SVGs – Your Flexible Friends

Although I tend to stick to writing wherever possible, sometimes I do need to employ some design/DTP skills. It was during one such assignment that I came across a graphics file type that I found extremely useful. So, being the benevolent person I am, I thought I would spread the word.

SVG stands for Scalable Vector Graphic, and that pretty much gives you all the information you need to know: they are images (graphics) that can be scaled to pretty much any size you like – WITHOUT losing quality. How? Well, that’s where the ‘vector’ bit comes in. As opposed to bitmaps (or rastor graphics), vector graphics do not save images as grids of pixels but as text-based mathematical formulae relating to lengths of lines, position of points, degree of curves, etc. When you resize your SVG on screen, you don’t make the pixels bigger (losing resolution), you modify the formulae and your machine redraws the image for you; its resolution is limited only by your screen. In addition, because you are still using the same instructions, the file size is independent of the graphics size (unlike bitmaps where high resolution images can take up large amounts of space).

Of course, rastor images are still necessary, for example in photographic images, but for clip art and line drawings, SVGs are the way to go.

For more information on SVGs, visit the W3C SVG section. For a more detailed example of how they work, visit the Adobe feature.