Wenn Firefox keine Inline-SVG auf Unterseiten anzeigt

Letzte Woche bekam ich von Heiko den Hinweis, dass im Firefox bei Erdmann & Freunde keine Icons angezeigt wurden. Ich hatte die Icons als Inline-SVG eingebunden, damit ich sie auch beliebig einfärben kann und das funktioniert soweit auch sehr gut. Nur eben nicht im Firefox.

Interessanterweise wurden die SVG-Icons auf der Startseite noch angezeigt, erst wenn man auf eine Unterseite ging, wurden die per <use xlink:href> eingebundenen Icons nicht mehr dargestellt. Ich habe wirklich lange gesucht und bin erst durch Try-and-Error darauf gekommen, dass es mit dem <base>-Tag zu tun haben muss.

Wenn ihr also auch mit dem <base>-Tag arbeiten müsst und Inline-SVG über <use xlink:href> einbinden wollt, hilft nur eines. Ihr müsst im <use>-Tag den Pfad zur Datei mit angeben, also zum Beispiel

<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="wer-wir-sind.html#icon-video-camera"></use>

Dann werden eure SVG-Grafiken auch im Firefox wieder angezeigt. Alternativ schaut euch mal das svgfixer.js von leonderijke an.

Ich bin Steuermann bei Erdmann & Freunde, einem Netzwerk für Contao-Webworker, und schreibe hier über Themen aus dem Bereich Webdesign und Webentwicklung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *