TL; DR Der korrigierte Arbeitscode befindet sich am Ende des Posts.
Es gibt vier grundlegende Regeln, die befolgt werden müssen, um mindestens eine anständige Menge an browserübergreifender Kompatibilität für die Anzeige von SVGs zu erreichen.
1. Einbetten vs externen Lade
Wenn es nicht erforderlich ist, um die SVG-Inhalt, wie das Ändern Formen oder füllt durch CSS und/oder JavaScript zu manipulieren, sie von außen ist die bevorzugte Art und Weise zu laden.
Das bedeutet, dass mit diesem
<body>
<!-- content -->
<img src="external.svg"/>
<!-- content -->
</body>
statt dessen
<body>
<!-- content -->
<svg>
<!-- SVG content -->
</svg>
<!-- content -->
</body>
Embedding SVG-Code hat einige Vorteile, aber natürlich kommt es auch mit Fragen, die durch herstellerspezifische Browser-Implementierungen von SVG-Standards und Funktionalität (nicht vorhandene Unterstützung für SVG-Verläufe usw.)
2. Verwenden Sie das ViewBox-Attribut
Bei der Einbettung von SVG-Inhalten in HTML-Seiten muss der Browser wissen, wie sich der SVG-Inhalt auf den für die Darstellung im Browser (auch bekannt als Viewport) reservierten Platz bezieht. Durch die Definition des Attributs viewBox können Browser alle Koordinaten aus dem SVG in ein relatives Koordinatensystem übersetzen, das eine korrekte Anzeige in allen Browsern gewährleistet, einfach weil im Browser-Teil kein Raten erforderlich ist.
Wenn viewBox nicht definiert ist, werden manche Browser wie IE entweder Proportionen durcheinanderbringen oder manchmal sogar das Bild nicht vollständig anzeigen.
3. Verwenden Sie exotische XML-Namespaces nicht
SVGs benötigen nur einen deklarierten Namespace, um sie mit Browser zu verwenden und das ist
<svg xmlns="http://www.w3.org/2000/svg">...</svg>
alle zusätzlichen Namespace erheblich das Risiko erhöht Hinzufügen von SVG wird überhaupt nicht angezeigt. Die einzige Ausnahme ist xmlns:xlink="http://www.w3.org/1999/xlink", die zum Laden externer SVG-Speicher verwendet wird, eine Form von SVG-Sprites, die sich hervorragend zum Kombinieren mehrerer SVGs in einer Datei eignet.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">...</svg>
4. Nicht-Namespace-Präfixe
Im Gegensatz zu XHTML mamespaces in HTML5 implizit definiert, die Sachen wie diese bedeutet
<svg>
<!-- SVG content -->
<ns0:path d="..." />
<!-- SVG content -->
</svg>
einfach nicht wie erwartet funktionieren und ist oft einfach ignoriert. Die richtige Methode zum Definieren von Inhalt in SVG, der in HTML5 eingebettet ist, besteht darin, keine Namensraumpräfixe zu verwenden.
<svg>
<!-- SVG content -->
<path d="..." />
<!-- SVG content -->
</svg>
Wenn die oben genannten Regeln auf den ursprünglichen Code angewendet werden this is the result, die in allen Browsern funktionieren sollte.
Es ist auch erwähnenswert, dass es viele Tools gibt, die sehr hilfreich sein können bei der Vorbereitung von SVG-Ressourcen für den Browser-Einsatz. Eine der besten ist wahrscheinlich svgo, die auch verwendet werden kann, um Projekte zu erstellen und bereitzustellen, die SVGs verwenden.