This is the "S" behind SVG: Scalable. It was probably the main driver behind creation of a new graphics format in the first place. A simple example will help to explain this. Let's say you want your web page to show a red circle with a thin blue border. If you wanted to display this in raster format, you would fire up Microsoft Paint (or Adobe Photoshop), draw the image at the desired resolution (i.e. 100x100 pixels) and save it as JPG or PNG. The problem is that if a computer is told to display this image at 400x400 resolution, it needs to expand the pixel patterns and then interpolate the pixels in between in order to make the image look smooth. Depending on the interpolation algorithm, the image may look jagged, the border of the circle may not have consistent width, etc. In an SVG document, you would simply tell the computer: "Fill the image with a red circle having a thin blue border" (in XML grammar, of course). The computer executes these instructions at any resolution.

This is partly the "V" behind SVG: Vector. When you are drawing/displaying raster images, the image is generally just a "blob of pixels", it has no meaning. With vector images, when I draw a circle, the program knows it is a circle. I can usually stretch it, change its properties (colour, stroke width), give it a name, copy it to other areas of the image, etc. If at some point I want to change the circle into a star, I can do that without affecting other parts of the image. This also means that contents of the image could be indexed by search engines, such as Google.

I am measuring "effectiveness" here by the fact that compression in an SVG image is lossless meaning no information is lost. In many cases, an equivalent SVG image can be an many times smaller than a corresponding raster image. However, in other cases, a raster image may end up being smaller in size, particularly if the image is complicated, abstract or particularly small (i.e. a 20x20 icon with a complicated image).

When dealing with static images, this is less of a big deal, but once you get into some of the dynamic features of SVG (in later articles, I promise!) the power unleashed here is quite impressive. Since the SVG is declarative, you can change properties of the SVG image on the fly and see the results instantly. SVG images can be scripted, they can be embedded directly in XHTML, etc.

Although there is much discussion about the current SVG specification being incompatible with CSS on some fronts, the SVG working group is attempting to make SVG usable with CSS to a great extent. This means the presentation of buttons/images can be separated from the content/behavior. As most web designers know by now: separation of presentation and content is a good thing.