Slightly ajar

While SVG shows at lot of promise, it hasn't yet taken off in the mainstream market. Support is still spotty, and the development tools are not quite there yet. Creating complex images using SVG by hand is beyond what most people would be willing to attempt. However there is one great use for SVG that has just been made possible in the very latest internal builds of Opera.

Internally, Opera now supports SVG as a background image in CSS through the usual background-image: url(filename.svg);. Why is this great? Well, it is now possible to create things like gradients and hi-lights as a svg file, which are fairly easy to do even by hand, and add them as a background image to add that extra bit of refinement to your design. You could have done that previously with any image format, but SVG is scaleable at any zoom level, can cope very well with liquid layouts, can be manipulated through the DOM and doesn't require the use of an image editing application to create. One can imaging adding SVG to the CSS3 buttons I created for this blog post to remove the solidness of the background colour or make them stand out more.

Of course, it can be used for more than just gradients and patterns. It is a common technique to use extra padding and a background image to add thing like custom bullet points and presentational images that shouldn't be in the HTML markup. SVG is also perfect for creating simple images like these without too much effort, and again they'll be fully scaleable instead of becoming blocky with increased page zoom. It is not something people can jump straight into, as we must wait for both a version of Opera to be released with this functionality and other browsers to catch up, but it is something that we can look forward to and start experimenting with.