What Is SVG?

SVG is an XML application designed for the creation of vector graphics. It was created by the World Wide Web Consortium with the collaboration of industry players like Adobe. For a thorough treatment of SVG, its specifications, supporting documents, and related products, please see the W3C and Adobe Web sites:

  • http://www.w3.org/Graphics/SVG/

  • http://www.adobe.com/svg/

The current SVG specification is version 1.1, although version 1.2 is in the works. The current version of Adobe's browser plug-in is 3.0. The SVG Viewer browser plug-in is a free download that you can get from Adobe's web site (mentioned above).

Bitmap Versus Vector Graphics

Before getting into the details of SVG, it's worth asking the question "what are vector graphics?" First of all, keep in mind that the idea behind all graphics technologies is to describe the appearance of a graphical object using some kind of inherently non-graphical scheme. The specifics of each scheme used to represent a graphical object are ultimately what determine the differences between graphics formats. Though not necessarily superior to bitmap, or raster, graphics, vector graphics have several characteristics that make them just the right tool for the job in many circumstances.

A bitmap image file is a list of instructions on how the monitor or printer should render each rectangular dot, or pixel, that comprises an image. If an image measures 64 x 64 pixels, that means a total of 4,096 separate instructions, each with its own recipe of red, green, and blue components. And this is a tiny icon-sized graphic! Although it is very accurate at representing complex images, such as photographs, bitmap technology results in very large image files slow to transmit, tedious to edit, and very difficult to interact with dynamically. On the other hand, they remain the tool of choice for photographs and other images where subtle gradations of tone are critical.

Vector graphics are the result of mathematical equations instead of thousands of pixels. SVG stands for Scalable Vector Graphicsa somewhat redundant term because vector graphics are scalable by definition. They are composed of a series of mathematical equations that describe graphics objects. So, for instance, if you wanted to draw a red circle, you would simply specify the center point, the radius, and the color, and SVG takes care of the details of rendering the red circle on the screen. The actual pixels that go into drawing the circle are irrelevant to SVG. To modify your drawing, you'd simply go in and change the parameters of the graphical objects being drawn. To modify the same picture with bitmap technology, by contrast, you would have to change the instructions for every pixel affected, up to thousands or millions. Because vector graphics are represented by mathematical equations, as opposed to pixels, they can be easily transformed and scaled while retaining a high level of quality. If you zoom in or blow up a vector graphic image, it will look much, much better than a zoomed or blown up bitmap equivalent.

In the desktop and print world, Adobe Photoshop, which produces mainly bitmap graphics, and Adobe Illustrator, which handles vector formats, typify the two different graphics approaches. They are also referred to as painting and drawing applications, respectively. It is worthwhile to note that, although you can create SVG files in any text editor (like any other XML file), many current graphics programs offer the capability of exporting an image to SVG without the need to get involved with the code. Please see the section "Creating an SVG Drawing" later in this tutorial for further discussion.