Use-ing SVGs wih inline style blocks

31st July 2024

The below inline SVG…

<svg style="--color-a: #ff0000; --color-b: #00ff00;">
  <use href="example.svg#box1"/>
</svg>

…where example.svg is…

<svg fill="none" xmlns="http://www.w3.org/2000/svg">
  <style> .fill-primary { fill: var(--color-a, #ff9999); } </style>
  <symbol id="box1" viewBox="0 0 100 100">
    <style> .fill-primary { fill: var(--color-b, #99ff99; } </style>
    <path class="fill-primary" d="M0 0H100V100H0V0Z"/>
  </symbol>
</svg>

…displays as a red square in Chrome, and a black square in Firefox and Safari:

Chrome is picking up the first style block in the external SVG; Firefox and Safari are both ignoring the style blocks and going with the default fill, which is black.

Which, if any of them, is right?

The CSS specification says “When the referenced element is from an external document, the stylesheet objects generated when processing that document apply to the shadow tree, and are read-only.” so I think it is meant to use the stylesheets it finds. So that is Chrome doing the right thing. But then Chrome is ignoring the style block inside the symbol, which seems like it should be the one to pick?

Using inline style attributes works in everything, but means a lot of repetition. Not using use and inlining the whole SVG also works, but I liked the idea of one cacheable ‘sprite’ SVG.

Is there a way for Firefox/Safari to recognise the style sheet?