Das Setzen des SVG-Defs-Blocks oben im Dokument funktioniert auf jeden Fall. Es hat auch einige Vorteile, wie die Tatsache, dass keine HTTP-Anfrage gestellt werden muss. Alle Informationen zum Zeichnen der Grafiken befinden sich direkt auf der Seite. Es hat aber auch einige Nachteile. Alle diese Informationen müssen vom Browser auf jeder Seite aus dem Dokument analysiert werden. Es handelt sich nicht um ein separates Dokument, das möglicherweise bereits vom Client zwischengespeichert wird, wie dies bei anderen Assets der Fall sein könnte. Apropos Cache: Wenn Ihre Site HTML zwischenspeichert (normalerweise eine gute Idee), können Sie dieses "Aufblähen des Seitencaches" in Betracht ziehen, da jede einzelne zwischengespeicherte Seite diesen großen sich wiederholenden Codeblock enthält - keine sehr effiziente Verwendung des Server-Cache.
Die gute Nachricht ist , wir können , dass die SVG defs blockieren , in eine externe Datei bewegen, und es verwenden , wie würden wir ein Bild oder einem anderen Vermögenswert.
Wenn wir es dann verwenden, würde sich der Dateipfad wie folgt im Attribut befinden:
Wichtig zu wissen: Domänenübergreifende Einschränkungen sind in dieser Hinsicht schwierig. Selbst CORS-Header helfen Ihnen meiner Erfahrung nach nicht weiter. Also keine CDNs (kann nicht einmal auf CodePen abgespielt werden und kann definitiv nicht mit einer Datei abgespielt werden: // URL).
Eine weitere wichtige Sache zu wissen: Sie müssen auf jeden Fall xmlns Attribut, damit dies funktioniert. Wie in sollte Ihr SVG-Defs-Block beginnen mit:
Ich hatte den Eindruck, dass Sie das in einem HTML5-Dokument nicht benötigen (ähnlich wie Sie keine Typen für s benötigen ), aber vielleicht, weil diese Datei nicht mehr innerhalb der Grenzen eines HTML5-Dokuments liegt (es ist extern referenziert), brauchen Sie es.
Aus diesem Grund ist die Demo dafür hier.
Ebenso wichtig zu wissen: Keine IE-Version unterstützt dies (bis zu 11 zum Zeitpunkt dieser Veröffentlichung). Es gibt jedoch eine Möglichkeit, es zum Laufen zu bringen, indem Sie im Wesentlichen das benötigte SVG-Bit in Ajaxing einfügen und dort einfügen, wo es sein würde, wodurch es zu einer Art „normalem“ Inline-SVG wird, das unterstützt wird. Wir brauchen eine heiße Minute, um dies in Internet Explorer mit BrowserStack zum Laufen zu bringen und zu testen, aber letztendlich bekommen wir es.
Dateien
- 16-svg4everybody.js
- 16-svg-defs-test.svg