Antwort an „Matthias Scharwies“ verfassen

SELF-Forum

SVG Replacer und <object> Element

Matthias Scharwies E-Mail-Adresse des Autors

Servus!

Hallo alle,

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.

<object type="image/svg+xml" data="url" 
        width="..." height="..." class="...">
</object>

Das klang gut und vielen Dank, das du das ausprobiert hast.

Mist, dass der SafarIE noch kein prefers-color-schemeunterstüzt.

Ich würde vorschlagen, dass wir diese Baustelle beenden und alle SVGs der Kategorie:Infografik auf ihre Tauglichkeit überprüfen und ggfalls anpassen.

Dabei gäbe es zwei Möglichkeiten:

transparenter Hintergund, Schrift und Pfeile in blau

Der Hintergrund bleibt transparent.

Die blaue Farbe (#337599) ist sowohl auf weißem, als auch dunklem Hintergrund erkennbar und bietet gute Kontraste.

dunkler Hintergrund im SVG-Element

Das Bild erhält im svg-Element bereits einen dunklen Hintergrund entweder im CSS oder als style-Attribut

Vorteile:

  1. Schrift ist gut erkennbar
  2. Im hellen Modus sieht es nicht schlimm aus, der dunkelblaue Hintergrund zeigt, dass es ein Bild ist. Im Dark Mode sorgt es nicht für einen weißen Blitz.[1]

Vorteile dieses Ansatzes:

  1. img sind img, keine workarounds nötig.
  2. Einige wenige SVGs müssen überarbeitet werden.

Herzliche Grüße

Matthias Scharwies

--
bildung.social/@selfhtml

  1. Das haben wir ja eh bei den Screenshots mit weißem Hintergrund. ↩︎

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen