In the project I am working on, we use SVG for icons. Most of our icons should have a second version, where the color is inverted (as in the blue icon on a white background and a white icon for a blue background).
We include icons using background-imagein CSS.
I am trying to find out if there is a way that we can only have one file for each icon, and use CSS or Javascript to change its color. This will allow us to leave with fewer requests.
Now I know that using CSS to set the properties of an embedded SVG image works, but I really don't want to embed every icon we have.
Is there any way to do this?
I have Plunker where SVG is enabled in three different ways. Inline, CSS background and tag img. There is a CSS rule that sets an attribute filland only gets into the embedded SVG. There is also a small piece of Javascript that tries to find all the circles and color them. Interestingly, installing filldirectly to the embedded SVG does not work if it is fillalready installed using CSS.
It document.querySelectorAllonly seems to find the built-in SVG, which I think makes sense. The other two, strictly speaking, are not part of the DOM.
Now, is there any way to redefine fillfrom the last two circles without making changes to the file circle.svg? Is there any other trick I can use to display a file circle.svgwith two different colors?