Hallo alle,

bekanntlich hat der Safari Probleme, in per <img src="..."> geladenen SVGs den Darkmode zu erkennen.

Die Lösung soll angeblich sein, SVGs nicht als img, sondern als object einzubinden.

<object type="image/svg+xml" data="url" 
        width="..." height="..." class="...">
</object>

Ich habe eine Testversion des SVG-Replacers erstellt. Sie befindet sich im Wiki unter Benutzer:Rolf b/native_svg.js, um sie einzubinden, gibt es seit kurzem die Replacement-Instrumentierung.

Dazu in den Entwicklertools auf die Seite App (Chrome) oder Web-Speicher (Firefox) gehen - keine AHnung wie das im Safari heißt - und dem localStorage den Key "skins.Selfhtml.native_svg" den Wert "replace=Benutzer:Rolf_b/native_svg.js" hinzufügen.

Das native_svg-Modul unterstützt diese Instrumentierung und lädt dann die Version aus meinem Benutzernamensraum.

Das Ergebnis ist grausig.

• Die SVGs bekommen einen weißen Hintergrund, ich weiß nicht woher
• img Elemente haben implizit einen aspect-ratio der ihrer intrinsischen Größe entspricht, bei object ist das nicht der Fall. Dementsprechend sind kleinere SVGs jetzt alle zu hoch.

Wer sich berufen fühlt, möge den Test-Replacer mal aktivieren (im Hauptwiki) und sich das anschauen.

• Auf der Startseite
• Auf der Seite JavaScript_und_das_DOM/Was_ist_das_DOM

Ich habe keine Ahnung, woher der weiße Hintergrund kommt und wie man das Größenproblem lösen kann.

Rolf