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](https://wiki.selfhtml.org/wiki/Kategorie:Icon) (41 Dateien) * [Kategorie:Infografik](https://wiki.selfhtml.org/wiki/Kategorie:Infografik) (44 Dateien) * [Spezial:Nicht_kategorisierte_Dateien](https://wiki.selfhtml.org/wiki/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: [](/images/fe5a4684-f394-11ed-b341-b42e9947ef30.png) 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](https://wiki-test.selfhtml.org/wiki/Stapelkontext)) 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)](https://wiki-test.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Was_ist_das_DOM) - Hier sind die Boxen in SELF-Farben - ich habe die brightness auf 1.25 reduziert. [^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. 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 -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

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](https://wiki.selfhtml.org/wiki/Kategorie:Icon) (41 Dateien) * [Kategorie:Infografik](https://wiki.selfhtml.org/wiki/Kategorie:Infografik) (44 Dateien) * [Spezial:Nicht_kategorisierte_Dateien](https://wiki.selfhtml.org/wiki/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: [](/images/fe5a4684-f394-11ed-b341-b42e9947ef30.png) 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](https://wiki-test.selfhtml.org/wiki/Stapelkontext)) 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)](https://wiki-test.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Was_ist_das_DOM) - Hier sind die Boxen in SELF-Farben - ich habe die brightness auf 1.25 reduziert. [^1]: Text ist manchmal im text-Element, öfter aber von Inkscape und illustrator als Pfad gezeichent. Pfeile sind eben Pfade (Im Idealfall) mit ner ID. 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 -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

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 (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](https://wiki.selfhtml.org/wiki/Kategorie:Icon) (41 Dateien) * [Kategorie:Infografik](https://wiki.selfhtml.org/wiki/Kategorie:Infografik) (44 Dateien) * [Spezial:Nicht_kategorisierte_Dateien](https://wiki.selfhtml.org/wiki/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: [](/images/fe5a4684-f394-11ed-b341-b42e9947ef30.png) 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](https://wiki-test.selfhtml.org/wiki/Stapelkontext)) 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)](https://wiki-test.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Was_ist_das_DOM) - Hier sind die Boxen in SELF-Farben - ich habe die brightness auf 1.25 reduziert. [^1]: Text ist manchmal im text-Element, öfter aber von Inkscape und illustrator als Pfad gezeichent. Pfeile sind eben Pfade (Im Idealfall) mit ner ID. 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 -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!