Das SVG-Defs-Block am Anfang des Dokuments funktioniert definitiv. Es hat auch einige Vorteile, wie die Tatsache, dass kein HTTP-Request gemacht werden muss, alle Informationen zum Zeichnen der Grafiken befinden sich direkt auf der Seite. Aber es hat auch einige Nachteile. All diese Informationen müssen vom Browser auf jeder Seite aus dem Dokument geparst werden. Es ist kein separates Dokument, das bereits vom Client gecached werden könnte, wie es bei anderen Assets der Fall sein kann. Und wo wir gerade beim Cache sind: Wenn Ihre Website HTML cacht (was typischerweise eine gute Idee ist), könnten Sie dies als „Page-Cache-Bloat“ betrachten, da jede einzelne gecachte Seite diesen großen, sich wiederholenden Codeblock enthält – keine sehr effiziente Nutzung des Server-Caches.
Die gute Nachricht ist, dass wir diesen SVG-Defs-Block in eine externe Datei verschieben **können** und ihn genau wie ein Bild oder ein anderes Asset verwenden können.
Wenn wir ihn dann verwenden, wäre der Dateipfad im Attribut, so:
<svg class="icon-book">
<use xlink:href="/path/to/imgs/svg-defs.svg#icon-book"></use>
</svg>Wichtig zu wissen: **Cross-Domain-Beschränkungen sind hier hart.** Selbst CORS-Header helfen in meiner Erfahrung nicht. Also keine CDNs (nicht einmal auf CodePen spielbar und definitiv nicht auf einer file:// URL spielbar).
Eine weitere wichtige Sache zu wissen: **Sie benötigen unbedingt das xmlns-Attribut, damit dies funktioniert.** Das heißt, Ihr SVG-Defs-Block sollte beginnen mit
<svg xmlns="http://www.w3.org/2000/svg">Ich hatte den Eindruck, dass Sie das in einem HTML5-Dokument nicht benötigen (ähnlich wie Sie keine Typen für <script>s benötigen), aber vielleicht, weil diese Datei nicht mehr innerhalb der Grenzen eines HTML5-Dokuments liegt (sie wird extern referenziert), benötigen Sie sie.
Aus diesem Grund ist die Demo hier.
Ebenso wichtig zu wissen: **Keine Version von IE unterstützt dies** (bis Version 11 zum Zeitpunkt der Veröffentlichung). Aber es gibt einen Weg, es zum Laufen zu bringen, indem man im Wesentlichen den benötigten SVG-Teil per Ajax einbindet und ihn dort einfügt, wo die <use> wäre, was es zu einer Art "normalem" Inline-SVG macht, das unterstützt *wird*. Es dauert eine Weile, bis wir das in Internet Explorer mit BrowserStack zum Laufen und Testen gebracht haben, aber letztendlich schaffen wir es.
Ich sehe immer gerne, wie Fehlersuche abläuft, besonders wenn sie erfolgreich ist. Großartig!
Urkomisch! Das sind die Art von Problemen, auf die jeder manchmal stößt, danke fürs Teilen, wie es ist :D
Das ist ein großartiges Tutorial, danke dafür, Kumpel.
Das Tutorial hat mir wirklich gefallen. Danke. Ich möchte sagen, dass die Firefox Developer Edition es Ihnen ermöglicht, das SVG auch mit einem file:// Pfad zu visualisieren.