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, Opera or Firefox 4 nightlies:

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'); }

You’ll notice also a box labelled ‘SVGZ’ — the background-image on this element is in the compressed SVG format, SVGZ:

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

The file size is less than one-third of the non-compressed version. In order to use this, you may need to configure your server; full instructions for Apache servers can be found here.

The drawback 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.

Update (21/12/2010): Changed information about SVGZ, thanks to the comment from Robert Longson below.