SVG image sprites? Possible or not?

Question

Has anyone ever used SVG for image sprites? I wish to replace a bunch of very similar GIFs and JPGs with some scalable SVG images, but the image gradient and button shape specifications bloat out the SVG.

If I could create a composite diagram, then I might be able to reuse the gradients and base button shapes etc. I'm just not sure whether it's possible to reference SVG images inside of (say) a CSS document. I assume it's not, since one must use SVG via embed or object tags rather than img tags.

Perhaps I could programmatically, using jquery for example, take fragments of the master SVG doc and use it to compose SVG images on demand. But I assume that would be pretty slow?

Thanks,

Andrew Matthews

Answer 1

Here's my example of using SVG in <img> and in pure element form for drawing to <canvas>, works in Opera 9.5 and up IIRC:

http://dahlström.net/svg/presentations/svgdemos/canvas2d.html

Webkit also does svg in <img> elements, and the above example sort of worked in the Epiphany webkit version I tested just now (needed a refresh to see the tiger, but it was drawn to the canvas as expected).