Is there an equivalent of spriting for SVG images in web pages?

Question

SVG images aren’t bitmaps, so (unless I’m missing something) you can’t do spriting like you can with other images files used on web pages (see http://www.alistapart.com/articles

Answer 1

One approach I’ve tried that isn’t spriting, but achieves similar aims, is to include url-encoded SVG images directly in the CSS file, using data URIs.

E.g.

background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20fill%3D%22%23CCD%22%20%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%0A%20%20%3Crect%20fill%3D%22%23039%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%221em%22%2F%3E%0A%3C%2Fsvg%3E);

(See http://intertwingly.net/blog/2008/09/07/SVG-via-CSS)

So, all your SVG images end up in the CSS file. Gzipping should squish multiple SVG files in one CSS file quite nicely.

As far as I can tell, the CSS above works in Opera 9.5+, IE 9 beta, Safari 5, and Chrome 6. Doesn’t seem to work in Firefox as of 3.6, or earlier versions of the other browsers.