This is blue by default, can't override using CSS variables because img creates a separate document context.
I made an assumption about how to override SVG styles using CSS variables, but it turns out that it only works if the SVG is imported using JavaScript or embedded directly in the HTML.
If the SVG is imported using an <img> tag, the CSS variables won't work.
This is because the <img> tag creates a separate document context for the SVG, and the CSS variables defined in the parent document won't be accessible to the SVG.
These images are imported using JavaScript fetch and then injected into the DOM. The CSS override works on the first image because the SVG is part of the same document context as the CSS variables. It does not work on the 2nd because it is data: encoded and treated as a separate document context, so the CSS variables are not accessible to it.
This uses an in-line SVG to import the external SVG. The CSS variables work because the in-line SVG is part of the same document context as the CSS variables.
Trying the example from the dev.to article by Alessandro Grosselle and Tommaso Ruscica. This uses the SVG as a CSS MASK. This limits the styling and image options though. Used CSS var background colour rather than currentColor as used in the article. NB: Had to set the height in the css.
None of the following will work.
This is blue by default, can't override using CSS variables because img creates a separate document context.
This is blue by default. Try to override by importing style sheet into the SVG.
Try to use currentColor - (2nd image loads as a data url). Neither works. You would have to do a replace of the fill attribute in the SVG using JavaScript after fetching it to override the colour.
This is a star without CSS variables. Fill is not overridden.
This is a star with CSS variables. Also not overridden unless fetched and injected using JavaScript.
This is a star using currentColor.
