• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part: I SVG Fundamentals > Getting Started with SVG

Hour 1. Getting Started with SVG

SVG is an acronym for Scalable Vector Graphics, a language created by the World Wide Web Consortium (W3C) to handle vector graphic display and animation in XML. Because of its development in the W3C, SVG is an open, standards-based solution for vector graphics.

SVG is an entirely text-based language; its functions and content are never hidden from authors or users. As such, SVG is editable in text editors, just like HTML, and its source code is easily viewable. Even better, element tags are often in plain English; for instance, a circle is described in code as <circle/>.

Because SVG is a vector graphic technology, it is resolution independent. This means your content does not visually suffer when scaled to extremely large sizes(or even smaller sizes). Also due to its vector nature, SVG files can be quite small in file size when designed with the technology's strengths in mind. A considerable amount of vector imagery can be stored using a fraction of the disk space required for a comparable high-quality raster (pixel-based) image. To further reduce file size, SVG supports GZIP compression, an industry standard for file compression. (You can learn more about GZIP compression independently at http://www.gzip.org/.) Once you have finished coding an SVG file, you can GZIP the document, allowing even smaller file sizes. Any conformant SVG viewer will be able to display the more compact SVG format (known as SVGZ).

SVG gives developers an amazing level of control over screen appearance compared with other Web and onscreen technologies. Supporting alpha channel transparency, smooth gradients, anti-aliased selectable text, and Photoshop-like effects, SVG was designed from the ground up to answer the design community's needs for an interactive graphics technology. Furthermore, SVG supports animation, interactivity, control over raster imagery, and pixel-precise layouts, allowing SVG to compete against existing, formidable Web technologies.

SVG works hand-in-hand with other technologies. Developed by the W3C, SVG was guaranteed thoughtful consideration toward interoperability with other Web technologies. SVG can exist on its own, be nested within an XML document from within another XML namespace, be referenced from HTML, utilize JavaScript and CSS, display JPEGs, and much, much more.

In this hour, you will learn the following:

  • Advantages and disadvantages of using SVG

  • What SVG offers designers and developers



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint