Wiki: SVG Replacer

[Rolf B]

Hallo Wiki-Autoren,

ich habe den SVG-Replacer, den ich im Test-Wiki schon eine Weile drin habe, jetzt auch im Hauptwiki eingebaut.

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.

Eigentlich fehlt uns noch eine Idee für SVGs im Darkmode, aber da der im Hauptwiki eh noch nicht vorhanden ist - und ich den Replacer gebraucht habe, weil mir der SVG-PNG Konverter mal wieder einen Haufen Sch....dreck gebaut hat, ist er jetzt drin.

Rolf

[Matthias Scharwies]

Servus!

Hallo Wiki-Autoren,

ich habe den SVG-Replacer, […] jetzt auch im Hauptwiki eingebaut.

Vielen Dank! Das ist eine wirklich feine Sache, da die NativeSVGHandler-Extension - die nur unter dem neuesten Mediawiki 1.39 läuft (wir haben 1.27) - angeblich auch nicht 100%ig laufen soll.

Eigentlich fehlt uns noch eine Idee für SVGs im Darkmode

I beg to differ:

SVGs im Wiki

Der Workaround mit den SVGs ist genial! Rolfs Script ersetzt die png-Vorschau durch das eigentliche SVG.

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.)

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

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

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:

1. Im Light Mode …
   • Text ^[1] auch als Text auszeichnen!
   • diesen durchgehend als font-family:sans-serif; formatieren
   • diesem Farbwerte schwarz oder #333 geben
   • evtl. vorhandenen weißen Hintergrund entfernen
2. Im Dark Mode entsprechend ...
   • Textfarbe auf weiß ändern
   • bzw. bestätigen (falls ein pastellfarbiger Hintergrund schwarze Farbe erfordert)
3. Koordinatensystem (Datei:3d axles.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);
4. (DOM-1.svg) - Hier sind die Boxen in SELF-Farben - ich habe die brightness auf 1.25 reduziert.

Wie gefällt es euch? Kommentare?

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!).

Farbpalette per @import ?

Evtl. könnte man überlegen, die SELF-Farbpalette per @import zu laden und so bei einem Farbwechsel automatisch alle SVGs immer aktuell halten zu können. Mach ich jetzt aber (noch) nicht.

---

Bitte kommentieren und verbessern - dann könnte man das im Hilfebereich veröffentlichen.

Herzliche Grüße

Matthias Scharwies

---

1. Text ist manchmal im text-Element, öfter aber von Inkscape und illustrator als Pfad gezeichnet. Pfeile sind eben Pfade (Im Idealfall) mit ner ID. ↩︎