So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font). To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one? If so it means you couldn't cache the SVG files.
> So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font).
That wasn't my assumption, I was just seeing if it could be done, rather than if you might want to. That thought would make this method impractical, though there may be a way around that.
> To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one?
Not necessarily. CSS cascades, and SVG can embed SVG. (Edit: I'm not actually sure about the browser support here. Do nested SVGs get to inherit from each other? Is that the same for all browsers? It'd require a bit of experimentation.)
So potentially, you could have a wrapper document that sets an ID or class that corresponds to how you want to change it, and then your base image linked within the wrapper.
The base image would cache, as would the base CSS file, however you could still apply changes.
A bit clumsy, but still allows you to avoid JS or in-lining, if that is what you want.
Of course, the wrapper won't cache, but it should be a very, very small overhead.
