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.
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" [
]>