This post is a write-up of the talk I gave at OggCamp10 over the weekend.
It’s been announced that IE9 will finally support SVG rendering, bringing it up to speed (in this area at least) with the other modern browsers. This has some potentially huge implications for web designers and developers, as it gives us a fundamentally different way of displaying content on the web.
SVG stands for “Scalable Vector Graphics”. It’s a W3C Standard format which, surprisingly enough, defines a vector graphics. What’s different about that? Well, the graphics in use on the web until now have been bitmap formats such as JPEG, PNG and GIF. A bitmap requires that the colour, position and (where supported) opacity of each pixel in the image is stored. Compression can be used, but in general this means that a lot of data is stored and transferred for each image, which increases exponentially as the image becomes larger or more complex.
Vector Graphics take a fundamentally different approach. Rather than storing individual pixels, they store data about shapes. Each shape in the image has properties such as it’s height, width, position and colors stored. When the image is displayed, these properties are used to dynamically render the image. This provides 2 advantages. Firstly, the file size is, generally speaking, a lot smaller for a vector image than for a bitmap image since less data has to be stored. Also, it allows the image to be scaled and stretched up or down in size, without losing resolution and becoming pixelated.
SVG is also an XML format, so is pretty easy to learn for anyone used to XHTML or other XML formats. It even supports CSS styling, including pseudo-classes like :hover!
What’s so good about that then?
One of the great advantages that vector graphics offers on the web is screen resolution-agnostic images. All too often images are a constraint on the width of a web page where they’re required for a heahttp://raphaeljs.com/analytics.htmlding graphic or an important layout element. With SVG, you can have a design which scales to fit the user’s screen, rather than the other way around. Furthermore, SVG already has solutions for many of the problems that CSS 3 has been trying to solve, such as rounded corners (all SVG rectangles can have a corner radius defined) and custom fonts (fonts are just vectors after all, so they can be easily embedded in an SVG).
Another cool thing that SVG’s good for is data visualization. As SVG is an XML format, there’s various ways of dynamically generating graphs from raw data.
For me, the real selling point of SVG is it’s potential to provide a realistic, open alternative to the proprietary Flash format for multimedia in the browser.
And video, I hear you ask? Well, SVG also supports a tag called “foreignobject”, allowing you to easily include elements from another XML spec inside an SVG image. This can be used very effectively in conjunction with HTML5’s video tag to display video, with the added advantage that you’re not limited to a rectangular player.
There’s still work to be done in this area. While this is all *possible* at present, there’s nothing with the ease of Adobe Flash for producing SVG with animation or embedded video/audio.
How do I produce SVG?
There’s 3 main options at the moment:
- Hand-Code it Like any other XML format, you can produce an SVG document quickly and easily with a text editor. The following line is all that’s needed to display a simple rectangle.