Bug 283489 – light-dark() does not work in SVGImages

• Component: New Bugs
• Status: NEW

[Oliver Williams]

If you have an SVG file with the following markup: 

<svg id="cloud" style="color-scheme: light dark;" xmlns="http://www.w3.org/2000/svg" fill="light-dark(red, blue)" viewBox="0 0 16 16">
  <path d="M4.158 12.025a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m6 0a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m-3.5 1.5a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m6 0a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 1 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m.747-8.498a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 11H13a3 3 0 0 0 .405-5.973"/>
</svg>

In Firefox and Chrome, it will have a blue fill in dark mode and a red fill in light mode, even if the SVG is referenced using the HTML <img> tag: <img src="cloud.svg">

In Safari, the fill of the SVG is always red regardless of the users chosen color scheme.

[Oliver Williams]

A similar issue has also been raised previously: https://bugs.webkit.org/show_bug.cgi?id=199134

[Oliver Williams]

This issue only affects Safari and means that it is difficult for me to implement an icon system on my website. 
Hopefully this can also be fixed of the sake of light/dark favicons once Safari adds support for SVG favicons.

I also wanted to make clear that this issue effects both SVGs used as <img> and also SVG referenced using <use>.

[Radar WebKit Bug Importer]

<rdar://problem/140661763>

[Nilesh Prajapati]

WebKit position: SVG favicons https://github.com/WebKit/standards-positions/issues/367

[Said Abou-Hallawa]

Created attachment 474571 [details]
test case

[Said Abou-Hallawa]

Pull request: https://github.com/WebKit/WebKit/pull/42918

[Taher]

Pull request: https://github.com/WebKit/WebKit/pull/42955

[Oliver Williams]

Related to this: Canvas and CanvasText are not currently effected by the users chosen system preference, even when style="color-scheme: light dark"  is included on the SVG.