Vector graphics could be one of the best things to happen to the web. Think about it—any user of any device could scale the entire site, including graphics, text, and rendered HTML elements to the size he or she wants without mucking up how it looks. Only photographs and other images that don’t convert well to vector formats would remain a problem.

Scalable Vector Graphics

The .svg file format is based on the recommendations from the W3C for scalable vector graphics. It’s basically an .xml format for describing two-dimensional objects.

So far this open-source .xml file format works very well. It produces sharp images that can be scaled as necessary. Unfortunately, support for the .svg file format by browsers is spotty at best. You can’t count on .svg support even as much as you can count on universal .png support (although .png files are supported by most modern browsers, IE 6 being a notable exception). We’re gonna have to wait, for the time being, before .svg support is universal enough to start changing how we look at web design.

Other Uses for .svg Files

Although vector image files can’t be directly applied to web sites today, they are very useful for other web design tasks. For example, have you ever needed a slightly larger or smaller version of a web graphic, such as a button, icon, arrow, or logo? If you have created your image as a vector, it’s relatively easy to scale your image to the size you need.

Many vector graphics programs cost a pretty penny. Adobe® Illustrator™ costs $599 or comes as part of an $1199 bundle. However, for .svg work, there is an open source program called Inkscape that I have found to work rather well. I’m no graphics pro by any means, but I have been able to create some cool stuff for web sites already. If you compare the different versions of an RSS feed I made for DiamondLime, you can see how the image quality is preserved whether my final image is 32 or 256 pixels wide:

Even if .svg images can’t be directly applied to a site today, they are very useful for design related tasks where resizing, transparency, opacity, gradients, and more are important.