Hilfe:Infografiken in SVG

Wie in SVG im SELF-Wiki beschrieben, könnnen SVGs als Bild-Dateien hochgeladen werden. Dabei wird eine png-Vorschau erstellt, die nicht alle CSS-Deklarationen übernimmt.

Deshalb hat Rolf B einen SVG-Replacer entwickelt, der die png-Vorschau durch das originale SVG ersetzt.

Vorteile

• Die Begrenzungen der png-Vorschau sind weg!
• CSS-Animationen (und SMIL) werden dargestellt.
• Dark Mode ist möglich - der Browser checkt beim Laden, welche media query zutrifft (Das funktioniert nicht im Seiteninspektor des Firefox, weil dort kein Reload stattfindet.)

Im Test-Wiki gibt es schon Dark Mode und das Script, deshalb habe ich bereits einige Beispiele angepasst:

Fazit: In vielen SVGs ist die Textfarbe nicht festgelegt, sondern es wird der default für fill (black) gesetzt. Das funktioniert im Allgemeinen, Chrome stellt im Auto-Dark-Mode Text dann aber weiß dar.

Regeln für Infografiken im SELF-Wiki

Im Light Mode …

• Text auch als Text auszeichnen!
• diesen durchgehend als font-family:sans-serif; formatieren
• diesem Farbwerte schwarz oder #333 geben
• evtl. vorhandenen weißen Hintergrund entfernen

Im Dark Mode entsprechend ...

• Textfarbe auf weiß ändern
• bzw. bestätigen (falls ein pastellfarbiger Hintergrund schwarze Farbe erfordert)
• Koordinatensystem (Datei:3d axes.svg) benötigt keinen hellen Hintergrund.
• Beschriftung (ist leider path) erhält eine Klasse .label und dann weiße Farbe.
• anstatt alle Farbwerte zu ändern, erhalten alle Pfade im Dark Mode filter: brightness(1.5);
  (Datei:DOM-1.svg) - Hier sind die Boxen in SELF-Farben - ich habe die brightness auf 1.25 reduziert.

Ich werde die <100 Dateien schluckzessive in den nächsten Tagen anpassen und ins Test-Wiki hochladen. Am Tag X werde ich dann die Dateien auch ins Prod-Wiki packen (Jetzt würde im Dark Mode der Hintergund weiß bleiben, weil das CSS ja noch keinen hat - die Schrift würde aber hell werden!).

Code-Snippet zum Kopieren

<style type="text/css">
text {
  font-size: 14px;
  font-family: arial, sans-serif;
  fill: black;
}

path {
  fill: none;
  stroke: #666;
  stroke-width: 1;
}

...

@media (prefers-color-scheme:dark) {
    text {
        fill: white;
    }
    path {
        stroke: white;
    }
	
    * {
        filter: brightness(1.15);
    }
}

</style>

Siehe auch

Hier ist eine Übersicht unserer SVGs im Prod-Wiki:

• Kategorie:Icon (42 Dateien)
• Kategorie:Infografik (53 Dateien)
• Spezial:Nicht_kategorisierte_Dateien - müsste man immer wieder mal durchforsten