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.

Ein Kommentar

  1. Andreas Kroll says:

    Manchmal hilft es auch wenn man die Köpfe der SVGs bereinigt.
    Also das hier entfernt:


    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot; [

    ]>

Schreibe einen Kommentar

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