Using SVG in background-image

While having a look through the list of features for developers planned for Firefox 4 earlier today, I noticed this:

You can now use SVG with the img element, as well as the background image in CSS.

I know you can already use SVG in background-image with Safari, Chrome and Opera, and this, coupled with Internet Explorer’s push towards SVG and the strong chance this will be available in IE9, made me decide to take a closer look.

I’ve put together a little demo page which you can view with Safari, Chrome or Opera — ironically, this doesn’t seem to be implemented in Firefox nightlies at the time of writing:

SVG in background-image demo

The same image is used many times at different sizes on this page, displaying the grand advantage of SVG over PNG: it can be resized without the same loss of quality that bitmap images suffer.

Implementation is very easy:

E { background-image: url('image.svg'); }

If you’re looking at the demo in a WebKit browser, you’ll notice an empty box labelled ‘SVGZ’ — the background-image on this element is in the compressed SVG format, SVGZ, which only Opera supports:

E { background-image: url('image.svgz'); }

The file size is less than one-third of the non-compressed version.

The drawback of this is that it’s not ready for use just yet — browsers that don’t support SVG in background-image will not provide any fallback, even if you supply another background-image value; so in non-supporting browsers, no image at all will be displayed.

Update: I’ve found a technique for using SVG images with PNG fallback.

The image used in this demo is from All Free Vectors.