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.

What’s SVG?

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.

SVG can be manipulated through Javascript just like HTML can (albeit currently with a standard XML DOM). This combination of vectors and scripting is remarkably similar to Flash’s use of vector graphics in conjunction with ActionScript. In fact, ActionScript and JavaScript are both based on the ECMAScript standard, so moving from one to the other certainly isn’t a huge paradigm shift.

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:

  1. 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.
`<svg width="100" height="100"><rect width="100" height="100" /></svg>` </li> 

  * Dynamically Generate it 
    As an XML format, it&#8217;s possible to transform any other XML data into an SVG graphic using XSLT. You can also use javascript libraries like [Raphael](http://raphaeljs.com) and [gRaphael](http://g.raphaeljs.com/) to do the hard work for you!</li> 
    
      * Draw it 
        There are a few packages that support SVG, but the best by far is [Inkscape](http://www.inkscape.org/). With full support for all SVG elements, layers, and even a raw XML editor if you want, you can&#8217;t do a lot better if you want to produce an SVG quickly. Inkscape&#8217;s native format is SVG with some extra metadata, but you can also save to &#8220;Plain SVG&#8221; which is web-ready. </li> </ol> 
        
        This material is just a preview if what&#8217;s going to be available. We are going to have to wait and see exactly how good IE9&#8217;s SVG support is and how long it takes people to switch over, but with SVG as a reliably-supported format to complement not only existing image formats, but HTML itself, I can see exciting things in the next few years of the web.