How to combine SVG's and style overrides

General
,
1

Saw an interesting article on SVG style overrides recently. Ended in in discussion wit the authors about what I thought would be a better way using CSS Variables.

Turns out that I wasn't quite correct initially and had to rethink. Ending up down a deep rabbit hole!

Anyway, the result was a GitHub repo with a working web page showing my various workings out and what eventually worked.

Thought I'd share here since SVG's are an increasingly common image type for use on dashboards and other UI's.

Turns out that if you want to use an external SVG file (from a url), there are only 3 realistic ways to enable overrides using CSS styles.

  • One of them based on the article (which rather limits the styles and images you can use - works for the icon example given in the article but not necessarily for all use-cases). Where you can only use your source image as a MASK.

  • JavaScript based solutions, simply importing the SVG and inserting to the DOM.

  • The final solution which I think might be my favourite actually as it requires no JavaScript, is to embed an SVG in the HTML that uses the external SVG file as an import.

<svg style="width:2em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    <use href="./blue-world.svg" />
</svg>

These last 2 options allow full use of style overrides in the remote SVG including using CSS variables. They also allow more flexibility than the mask image option I believe.

Thought I'd share as it may be helpful to others.

1 Like