Using SVG the contrast colors are 'unknown' initially

[fdverwoerd]

So I make lot's of use of svg and symbol usage like so:

<svg class="new-tab-icon">
  <title>{{ "site.new_tab" | translate }}</title>
  <use href="#svg_new_tab"></use>
</svg>

Where use then relates to a symbol defined somewhere else on the page:

<svg height="0" width="0" style="position: absolute;" xmlns="http://www.w3.org/2000/svg">
    <symbol id="svg_new_tab" viewBox="0 0 24 24" fill="currentColor">
      <path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
    </symbol>
    <symbol id="svg_open_details" viewBox="0 0 25 25"><path d="m20.2 17-7.7-6.4-7.7 6.4-1.3-1.5 9-7.5 9 7.5z"/></symbol>
</svg>

However even if the colors are good for contrast Sa11y can't understand it? After If I click the color input and close the colorpicker it's green :)

Why is it that at the 'start' this is unknown? Can this be fixed?

p.s. I tried embedding the 'whole' svg and not using symbol but still Sa11y initially can't seem to figure out the constrast?

[adamchaboryk]

Can you please tell me what colour space your SVG is in? Sharing a link to the page in question would be even better! :-)

[fdverwoerd]

The symbol is using currentColor for fill.

I've made an example using symbol and just "plain" svg here:
https://codepen.io/Wonky/pen/ogjQQKg

[adamchaboryk]

Thanks @fdverwoerd, I'll look into this soon

[adamchaboryk]

Ok, so I had closer look...

Your SVG is getting a warning because it has multiple <path> elements. Sa11y is only able to check the contrast of "simple" SVGs (or SVGs with a single ), because it's not possible to accurately test contrast of SVGs that may have different colours.

I took a closer look at your SVG, there seems to be an invisible/redundant path element. The first <path d="M0 0h24v24H0z" fill="none"/> — if you remove this, the warning should go away!

  Go to Sa11y plain SVG
  <svg fill="currentColor">
<path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
  </svg>
</a>```

[adamchaboryk]

That said... I do notice Sa11y throws a warning for SVGs that use <use>... I'll look into how I can better support <use> or suppress the number of svgs that reference the same id

[adamchaboryk]

Sa11y has better support for <svg> that use <use> now. Thanks @fdverwoerd!