Dynamic SVG fill colour


There are a couple of previous topics which seems to be very similar to this: Changing the color of an SVG icon
How to change svg image color on gojs
but they are very old and I don’t want to revive 3 year-old posts :P.

I’m not sure if anything has changed since these posts so ill ask again for reconfirmation more than anything.

We are implementing themes within out application which we would also like to apply to a collection of SVG icons which get rendered into the canvas. Normally with SVG we would attach a fill style to a css variable which would allow us to change the fill colour of any element in the SVG. Is it possible to pass in variables or bindings into the SVG when being rendered into the diagram so that we can change its fill colour on the fly without having duplicate icons?


You have to modify the SVG somehow. For security reasons the SVG does not have access to your page’s resources. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image