Using SVG in background‐image

Warning This article was written over six months ago, and may contain outdated information.

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.

7 comments on
“Using SVG in background‐image”

  1. […] This post was mentioned on Twitter by Peter Gasston, Kravimir. Kravimir said: RT @stopsatgreen Using SVG in background‐image […]

  2. […] Using SVG in background‐image […]

  3. wow that’s great. Never thought using SVG for background is possible!

  4. All browsers support svgz, the trick is that you need Content‐Encoding: gzip in the response header for the svgz file.

    Robert Longson [December 21st, 2010, 09:02]

  5. @Robert Longson: Thanks for that; I’ve tested it and you’re absolutely right, so I’ve updated the post to reflect that.

  6. Great post! I have made a code pen where I show using a SVG based image as background image, pretty cool :-)

  7. There’s a small issue — images mentioned in ‘background‐image‘ will not be printed by default when user chooses to print your page.