Conversation

realizing that over time whenever i've wanted to do any vector graphics manipulation i've just been doing it directly in svg instead of getting vector editing software svg is actually pretty good for direct editing as long as you don't have to do paths yourself

Tony "Abolish ICE" Arcieri

@bascule

May 25, 2021

Replying to

@ManishEarth

I've been doing a lot of like... hybrid stuff lately where I build the initial image in Adobe Illustrator and then hand edit the SVG export. Really interested in pursuing this approach for making SVG images which look good on light or dark backgrounds.

Tony "Abolish ICE" Arcieri

Replying to

and

I think this can be done with:

@media

(prefers-color-scheme: light/dark) ...but support is somewhat spotty

Replying to

and

that's what

has been doing with SVG favicons grapheneos.org/favicon.svg

Replying to

Chromium and Firefox both support SVG favicons with dark mode support. Note opening it directly won't apply the CSS since the Content-Security-Policy standard specifies that it applies to an SVG document but not an SVG included as an image via img. Didn't add a special rule.

Replying to

If you look at grapheneos.org in Chromium and Firefox you can see the favicon changes based on whether dark mode is enabled. I made it so that the SVG gets served when /favicon.ico is requested with image/svg+xml in the Accept header so it works for non-HTML in Chromium.

Replying to

Issue asking for Firefox to support that: bugzilla.mozilla.org/show_bug.cgi?i It's also needed for HTML with Chromium since otherwise it prefers the ICO. bugs.chromium.org/p/chromium/iss Best to avoid specifying type for /favicon.ico in the HTML and serve the SVG if the browser asks for one.

bugzilla.mozilla.org

1711622 - Consider explicitly listing image/svg+xml in the Accept header for images (for favicons?)

REOPENED (nobody) in Core - Networking. Last updated 2022-02-05.

Replying to

The web pages use a separate mask version of the SVG without the CSS for dark mode for the navigation bar and footer. Since caniuse.com/css-masks appears poorly supported, we had to use this nonsense (i.e. calculate a CSS filter chain to change color):

Quote Tweet

Daniel Micay

@DanielMicay

May 17, 2021

How to transform black into any given color using only CSS filters? The answer: Use simultaneous perturbation stochastic approximation to probabilistically obtain an approximation of the color through a chain of filter transforms... stackoverflow.com/a/43960991 Web development.

Show this thread

3:27 AM · May 26, 2021Twitter Web App

Replying to

Needed a separate one as a mask because we have it match the color of the text. The one in the header is either white or blue based on whether grapheneos.org is the active page and the one in the footer is either near black or light gray depending on light vs. dark mode.

grapheneos.org

GrapheneOS: the private and secure mobile OS

GrapheneOS is a security and privacy focused mobile OS with Android app compatibility.