Modify SVG fill color when being served as Background-Image

Question

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

po         


        

Answer 1

In some (very specific) situations this might be achieved by using a filter. For example, you can change a blue SVG image to purple by rotating the hue 45 degrees using filter: hue-rotate(45deg);. Browser support is minimal but it's still an interesting technique.

Demo