NEW 283489
light-dark() does not work in SVGImages 
https://bugs.webkit.org/show_bug.cgi?id=283489
Summary light-dark() does not work in SVGImages
Oliver Williams
Reported 2024-11-21 07:42:21 PST
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.
Attachments
test case (2.47 KB, text/html)
2025-03-14 09:45 PDT, Said Abou-Hallawa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Oliver Williams
Comment 1 2024-11-21 08:06:29 PST
A similar issue has also been raised previously: https://bugs.webkit.org/show_bug.cgi?id=199134
Oliver Williams
Comment 2 2024-11-24 09:36:01 PST
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
Comment 3 2024-11-28 07:43:13 PST
<rdar://problem/140661763>
Nilesh Prajapati
Comment 4 2024-11-28 08:26:50 PST
WebKit position: SVG favicons https://github.com/WebKit/standards-positions/issues/367
Said Abou-Hallawa
Comment 5 2025-03-14 09:45:02 PDT
Created attachment 474571 [details] test case
Said Abou-Hallawa
Comment 6 2025-03-23 23:37:52 PDT
Pull request: https://github.com/WebKit/WebKit/pull/42918
Taher
Comment 7 2025-03-24 14:38:51 PDT
Pull request: https://github.com/WebKit/WebKit/pull/42955
Oliver Williams
Comment 8 2025-03-28 02:40:34 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.