Recolorable SVG icons in a web page?

Question

I'm writing a quite complicated, big and long living (it might display for many days) web page that will also need icons. These icons are supposed to be SVG graphics. Depending on the place on the page the SVG should be recolored by JavaScript calls (jQuery or even jQuery-SVG is fine).

So my questions are:

• What's the best way to include the SVG in the web page?
  • <img>
  • <object>
  • jQuery(...).svg({loadUrl:...})
  • ...
• How to "multiply" them?
  • Pre-load in a hidden <div> and clone()?
  • Just load on demand?
• What's the best way to setup the SVG? (All icons in one file on different layers? All icons in one file separated by place? One file per icon?)
• What's the best way to recolor the icons then? (Think of quite abstract icons consisting out of a line graphic where that line should get a different color)

Required browsers are the usual compliant modern ones (Firefox, Chrome, Opera, Safari) for normal PC as well as mobile (Android, iOS). Internet Explorer compatability is not required.

Answer 1

If you want to recolour it then <img> is out straight away as you can't change images with javascript either externally or internally.

If you put clone data then you'll need to make sure that any id attributes remain unique within a single document so perhaps having things as <object> would be easiest for you.

You can use straight DOM calls to change the colour of things in an SVG graphic or you can use jquery if you want.

For the rest you'll probably have to try things and see how they work out for you.