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.

Das Bild wird dafür wie eine ganz normale Wiki-Grafik notiert. Die Opt-In Klasse, die in der Testphase drin war, ist entfallen.

[[Datei:foo-4711.svg]]

Das Wiki erzeugt daraus ein <img> Element, das ein Preview-Bild anzeigt, weil Mediawiki Angst vor potenziell bösen SVGs hat. Aber wir haben keine bösen SVGs - oder wenn welche erscheinen, verhaften wir sie gleich. Der SVG-Replacer ersetzt in svg-Images deshalb das src-Attribut durch das Original SVG Bild.

/* SVG Preview PNGs durch ihre Originale ersetzen */
(function() {
  var i, source, thumbPos, svgPos,
      images = document.querySelectorAll("img[src$='.svg.png'][srcset]"),
      thumbPart = "/thumb/",
      svgPart = ".svg/";
  /*
   * Bild-URLs sehen aus wie https://.../images/thumb/5/53/Client_Server.svg/600px-Client_Server.svg.png
   * Daraus muss /thumb entfernt werden und alles hinter dem ersten ".svg/", inclusive des '/'.
   * Darüber hinaus muss dem img Element das srcset Attribut entnommen werden, das ist bei SVG nicht mehr nötig.
   */
  for (i=0; i<images.length; i++) {
    source    = images[i].src;
    thumbPos  = source.indexOf(thumbPart);
    svgPos    = source.indexOf(svgPart, thumbPos);
   
    if (thumbPos >= 0 && svgPos > thumbPos) {
      images[i].src = source.substring(0, thumbPos) 
                    + source.substring(thumbPos + thumbPart.length - 1, svgPos + svgPart.length - 1);
      images[i].removeAttribute("srcset");
    }
  }
})();

(in MediaWiki:Common.js)

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 Text im Auto-Dark-Mode dann aber weiß dar.

Regeln für Infografiken im SELF-Wiki

Der Upload-Manager des Wiki verlangt leider noch das obsolete type="text/css" im Style-Element:

obsoletes Attribute im style-Element

<style type="text/css>
...
</style>

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