Guten Abend!

bekanntlich hat der Safari Probleme, in per <img src="..."> geladenen SVGs den Darkmode zu erkennen.

Die Lösung soll angeblich sein, SVGs nicht als img, sondern als object einzubinden.

Ich hatte jetzt ein paar Tage Ruhe und Muße, um mal zu überlegen, wo der Kasus Knaxus liegt.

Seit 2014 hatte ich SVGs erstellt, bei denen ich Grafik-Objekte und Text zu Infografiken kombiniert hatte.

Genial, dass SVG auch CSS versteht.

Genial, dass SVG sogar prefers-color-scheme versteht. So konnte man im Dunklen Mode die dunkle Schrift auf weiß ändern, damit sie auf dunklem Hintergrund wieder sichtbar ist.

Hier habe ich eine Sache vergessen: Woher weiß die Grafik, welche Hintergrundfarbe vorhanden ist?

Im Tutorial zur Textfarbe in CSS steht folgendes:

Es ist sinnvoll, neben der Farbzuweisung der Schriftfarbe mit color auch den Hintergrund mit background-color zu gestalten.

Und das gilt auch hier: Eine dunkle Textfarbe in SVGs erfordert einen weißen/hellen Hintergrund für :root/ oder svg.

Eine solche Grafik wird in einem img normal dargestellt; der alt-Text in einem Screenreader normal vorgelesen oder beim Nichtladen im Browser angezeigt.

Falls ein Browser nun Dark Mode erkennt, wird die Webseite, aber auch das SVG umgestellt, wenn es eine Medienabfrage von prefers-color-schemeenthält. Man kann - gerade auch bei einem heruntergeladenen Bild aber nicht von einer bestimmten Hintergrundfarbe ausgehen. Deshalb sollten immer Text- und Hintergrundfarbe festgelegt werden. Der Safari würde so das SVG laden und mit schwarzem Text und weißem Hintergrund darstellen; andere Browser würden in den Dark Mode umschalten. progressive enhancement

Irgendwann zieht der Safari schon nach!

Das erfordert bei einer Änderung der Hintergrundfarbe im Wiki zwar ein erneutes Handling, ist aber auch für heruntergeladene Bilder passend.

Ich hoffe, dass ich euch überzeugt habe, dass ein workaround mit object nicht nötig ist.

Herzliche Grüße
Matthias Scharwies