SVG-Replacer

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.

Erstmal nur mit opt-in, d.h. das Bild braucht eine Klasse replace-svg. Zum Beispiel so:

[[Datei:foo-4711.svg|class=replace-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("a.image > img.replace-svg"),   // Erstmal nur mit opt-in
      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)

SVG- Infografiken im Dark Mode

• Regeln für Infografiken im SELF-Wiki

ToDo (weitere ToDos)

Wie und wo dokumentieren wir solche Snippets, die evtl. auch anderen Mediawiki-Installationen zugute kommen könnten?

--Matthias Scharwies (Diskussion) 03:29, 8. Sep. 2023 (CEST)