I’m going to be writing a lot about SVG, so I thought I’d give some explanation as to just what it is. Scalable Vector Graphics is an XML language for creating graphics. It’s a bit like HTML for images. If you want to draw a circle on your page, you type:

<circle cx="50" cy="35" cx="20" fill="blue" />

And then you have a blue circle with a radius of 20 pixels (more on that in some later post), centered 50 pixels from the left and 35 pixels from the top. Obviously, since people want to draw more than just circles, it gets a lot more complicated than that, but that’s the basic idea. SVG is a vector-based language, which means that rather than a collection of dots, like raster images (rasters are formats like bitmaps, JPEGs, etc.), SVG shapes are sets of instructions that tell the browser how to best draw the image. For instance, a line in a raster is just a series of unconnected dots… if you zoom in on it, that’s what it breaks down into; but an SVG line tells the browser to start at this point and go to that point, and so no matter how you zoom in or out, it remains a smooth, solid line. Each image is composed of a number of shapes, or elements, that have identities and properties. If you move your mouse over an element, or click on it, the browser knows about it, and the author can give instructions (either using script or something called declarative programming) for what to do… it might let you drag the shape, or change its color, or most anything else you want.

SVG is an open format, meaning anyone can make a browser or an authoring tool that uses it without having to pay any royalties. This sets it apart from similar technologies like Adobe Flash and Microsoft XAML. (I strongly believe in open standards, because it gives everyone a chance to control the future of the format; specifically, I think that all democratic governments should use open standards as much as possible, rather than rely on one company who can control the costs and future access to the information stored in their format.) And the fact that it’s open pays off. SVG is supported natively in Firefox, Opera, Safari, and other browsers for both the desktop and mobile devices. Right now, it is not supported natively in Internet Explorer, but you can get a plug-in for that (see later posts for updates on this). No other vector format is natively supported across so many browsers.

SVG can be simple and free to author. There are several good programs that let you draw images and save them as SVG, including Adobe Illustrator and Inkscape (a free drawing app that works on most platforms). But if you want to get your hands dirty, you can dig in and create shapes just by typing out the code; this is how most programmers tend to do it, because it lets you control how the drawing behaves according to scripted instructions. If you want to see how someone drew an image, you can always view the source code and, if permitted, create or change it to suit your needs, just as many people learn HTML and Javascript.

But SVG is not just shapes. Because it is intended to allow rich presentations in an accessible way, you can also use text in SVG, and even define your own fonts (though this is not yet as widely supported). Animation is native to the language, and in later versions (such as ones shipping on phones), audio and video are also available.

Finally, SVG can be used with HTML, to create a rich Internet document. Because it was designed from the ground up to be used with other languages (including styling languages like CSS and XSL), as well as on its own, it is truly a part of the Web, and as it grows more popular, the possibilities of the Web will grow even more.