2

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

Andrew Matthews
  • 3,006
  • 2
  • 29
  • 42
  • Just remember, svg isn't supported natively on IE. If your target audience uses IE, then you'd probably better find another route. – Matthew Talbert Sep 22 '09 at 03:32
  • Hi Matthew, I would like to fall back to the GIFs in the case of IE, but I want to use Chrome as my showcase demo platform - the app is very JS intensive. – Andrew Matthews Sep 22 '09 at 03:47
  • I came up with a lightweight way to do this which would work great for what you are trying to do. See this Q&A: http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/ – Drew Baker Aug 16 '12 at 00:11

1 Answers1

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).

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • Thanks, Eric. Does this mean that I could reference an SVG file from within a CSS style sheet when using Opera? i.e. using a url(...) element for a button background perhaps? – Andrew Matthews Sep 23 '09 at 01:23