I started drafting this post about a month ago, giddy with the news about Microsoft joining SVG Working Group and all the possibilities SVG portended. So, I started dreaming of creating a demo of how SVG could be used by web developers now, as background images with fall-back support, webfonts, and what not. Why, you ask? Think about all these that you can do with SVG using CSS:

• Simple background images that are several times smaller than PNG/GIF formats.
• Scalable background images that can be reused on elements with different widths and heights.
• SVG background images can share same stylesheet as the webpages which means you do not have to open Photoshop every time you need to change the colors of background images.
• Use the same SVG file as a font and an image.

Alas, it was not to be! The story of SVG is like the story of the boy who cried Wolf. Every 2 years there is a riot about SVG’s coming dominance, nothing happens, and everybody goes away disappointed. So, when SVG truly becomes a standard supported by most browsers, nobody gives a damn.

At the risk of sounding like that boy, my opinion is SVG dominance is closer to reality than ever before. SVG support for most modern browsers has improved (Opera, Firefox, Webkit). HTML specification has been updated to allow in-line SVG too! Hell, there are even Flash runtimes written with JavaScript and SVG that can run Flash animations on browsers that do not support Flash (I am looking at you, iPhone Safari).

David Storey has a nifty example of a HTML5 UI that uses SVG files as background images. Browsers do not consistently support using SVG files as background images. Safari does not render the file if the SVG does not have absolute width and height specified (not so for Chrome). Firefox does not render SVG background images at all. Here is a demo of using an SVG file as background or border image.

You have much better luck with SVG images rendered via the object element, most browsers support SVG as an image format, and for IEs you could use SVGWeb to replace them with a flash file. In SVG-friendly browsers, you can also use this jQuery plugin to manipulate SVG files.

So, all this means good times are ahead for SVG. Microsoft even seems to be asking relevant questions about implementing SVG, which only supports the assertion that IE9 will be the first Internet Explorer to support SVG.

If you are interesting in learning SVG, the W3C SVG Primer is best place to start. You can also create simple shapes in Illustrator or Inkscape and save them as SVG, but they are more likely to be tag-soups, so be sure to clean them with Scour.