reading: SVG favicons that respect theme preference
https://pawelgrzybek.com/svg-favicons-that-respect-theme-preference/

— related: I recently found media queries inside <img> SVG had mixed browser support 😔 we can't have nice things!

SVG favicons that respect theme preference | pawelgrzybek.com

Less of guide about the favicons and more a bug report of Safari that at the moment ignores media query user preferences in SVG favicons.

pawelgrzybek.com

@db media queries were an interop 2026 proposal. Let's hope it makes it next year or is implemented outside of that process.

https://github.com/web-platform-tests/interop/issues/1058

I was also really hoping for this svg feature to make svg graphics though <img tags more practical

https://github.com/web-platform-tests/interop/issues/996

@ccouzens oh dear, I guess it'll never be fixed then 😔

@db what do you mean by that? Are you referring to the case when the .svg file is in the “src” attribute of image tag, and this .svg file has media queries?

If yes, I would say that this is kinda expected. It would be too magical if it respected media queries in this situation.

For your use case probably the picture tag is the solution 🤷‍♂️

@pawelgrzybek yeah like that

but some queries do work! I'm pretty sure I saw `@media (color-gamut: p3)` working at least

@db this sounds to me like a material for a blog post. Super interesting.
@pawelgrzybek @db An example we’ve used in production once or twice that (at least at the time?) worked via `<img>`, in case it’s helpful reference for contemporary exploration! https://cloudfour.com/thinks/responsive-logo-composition-with-svg/
Responsive Logo Composition With SVG

Logos are an ideal use-case for SVG. Because they’re typically designed for reproduction and versatility, they’re almost always vector to begin with. SVG’s support of CSS and media queries means we can adapt brand imagery depending on the display size, a technique artfully documented by the likes of…

Cloud Four
@tylersticka @pawelgrzybek wow 2016 i guess browser support is ok then!

@db @tylersticka wow!

Quite often I read about something cool on the web. Then I desperately try to publish datę in the article just to find out roughly how much on the bleeding edge author lives. Then I found out it was published decade ago. Terrible way to remind me how old I am and how long I’ve been building for the web.

@db I didn't even realize that Safari supported SVG favicons, so that's good at least!