Styling the same SVG <object> different ways

Question

I want to have a series of the same SVG file on a page with different colours. I\'m aware that the best method of getting the SVG into the page without bloating the code, an

Answer 1

As CBroe says, its an issue with styling an external object. You can access it via JS and change it, but I doubt thats ideal and there's issues of making sure its loaded first etc.

However, I'm not convinced this is necessarily the best method as you say, unless there are some other requirements (eg no javascript, or libs and it must be external, you can still load it via Snap load method for example then though if you support js).

You can simply use a defs/use statement. I've just used a circle for brevity, but you could have a more complex path or whatever in there.

jsfiddle