SVG – which stands for ‘Scalable Vector Graphics’ – has been around since 1999. However, its support has always been fairly limited, but with more (and I choose my words carefully) ‘useful’ browsers becoming more widespread and popular, we are all now able to start to take advantage of the latest technologies and web standards without fear of alienating any of our users.
A standard image, such as a JPEG or a PNG, is made up of a huge amount of pixels, each one being a single colour. Get millions of them together and you can form a pretty detailed picture, and this is the most common way images are created and stored for the web.
Vector images, on the other hand, use a completely different system. Imagine a list of coordinates, like those of a map or graph. When you plot these coordinates (yes, like ‘join the dots’) it forms the image you have specified. Now, the advantage of vectors over pixels is that when you resize a pixel image, you will start to notice the pixels more and more. The edges will lose definition and things will become jagged, whereas with a vector image, the lines between the plotted points will always stay sharp and the image will just resize its coordinates accordingly. In theory, you could make a vector image the size of a stamp or as big as the moon without any loss of quality.
With the advent of SVG, web designers now have the ability to create images using coordinates. These images can be complex and interactive, and take considerable less space and bandwidth on the site, leaving most of the work to the browser to create the image by interpreting those coordinates. This can be particularly useful for logos, graphs, blocks of data, shapes and transitions, animations and a whole host of other things.
If you want some good examples of the power of SVG and the web, take a look at the plethora of headers (doodles) that Google has created over the years. There are some gems hidden at http://www.google.com/doodles