SVG is a markup language, much like XHTML, that describes 2D graphics. It's a W3C recommended standard for creating vector graphics not just for the web, but for all software. Any piece of software could read or render SVG. Jumping into a quick overview of the compontents of an SVG document - there are three types of graphic object available in SVG:
Vector Graphicsare geometrical primitives such as points, lines, curves, and polygons, which are all based upon mathematical equations to represent images.
In SVG these primitives are represented by the circle, rect, ellipse, polygon, polyline, line and path elements. Because only the mathematical data is stored SVG images can be scaled to any size and never lose their quality. Text will always be sharp and rounded edges will always be smooth. Vector images also have a much smaller files sizes than raster images (unless there is a huge amount of data) because only mathematical data is stored instead of every single pixel.
Text can be represented in vector format. In fact font files contain vector data so that fonts can be made any size (that's why the text is always smooth in word, no matter how high the font size is).
Raster Images are defined by a collection of pixels with each pixel having 3-4 bytes of data (Alpha (opacity/transparency), Red, Green and Blue. Alpha is limited to .png file formats.). To scale a raster image these pixels have to be blended together losing some image quality. You've probably all seen this while trying to enlarge a .jpg file or any other raster image. Wikipedia has an image that demonstrates the vector/raster scaling differences pretty well. I wont really be talking about raster images in SVG, at least not yet anyway.
But you want to see some markup now, right? (View in SVG enabled browser)
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" fill="navy" r="30"/>
<circle cx="50" cy="50" fill="white" r="22"/>
<circle cx="50" cy="50" fill="red" r="10"/>
</svg>
Lovely, eh? It's a trivial example I know, but writing that in notepad took less time than it would to load up Photoshop, draw the circles, align them and then save the image for web.
SVG and the web
Why use SVG? There are lots of reasons, and I wont go into all of them right now but there are two that I do want to talk about. Maintainability and Accessibility. Note: One important thing to remember is that browser support varies. Some support more features than others and some don't support any. This will change though. Be ready for it! ;)
Accessibility with images on the web has never been fantastic. We've always had to reply on alt or longdesc attributes on img elements or the like. This text can give a general idea of what the image is of but not much more than that.
Enter SVG. It's XML. It's machine readable. Search engines and browsers are able to read through SVG files and get details of every element. In the above SVG example any reader will know that the image is made of 3 circles and the reader will know what colour they are, and their size. For example a screen reader would be able to tell the user about that data - The image is comprised of three circles. A small red circle ontop of a larger white circle that is ontop of a larger navy coloured circle all centered on the same point.
Maintainability of raster images has always been a pain. I think we've all been in the position where we're making a design and we want to change the background colour of an image, or change the text from Update to Submit and then back to Update because we couldn't decide which was best. This involves changing the text in a graphics editor and then saving the file again. With SVG all these changes can be done with notepad!
In same cases you may never need to maintain an SVG file. Many web services provide data in XML. This XML can be transformed into SVG at request time so that almost any XML data can be represented as an image (think of stock quote data, even XHTML could be transformed into an image!)
Lets get started!
In Part 2 I'm going to go over the different elements available in SVG and how to use them to create some interesting (and hopefully practical) images. As a little taste I've created a small example of a way in which SVG can be used to create rich interfaces.