Dabei ist allerdings nicht jede Methode für die problemlose Implementierung der SVG-Sprites geeignet. Chris Coyier erklärt, warum „Ajaxing“ SVG-Sprites besonders nützlich ist.
Ajaxing von SVG-Sprites
Normalerweise werden SVG-Icon-Systeme als sprite.svg gespeichert und können so in einem Dokument implementiert und zum Beispiel mit beliebig genutzt werden. Diese Methode funktioniert zwar, führt allerdings oft zu Performance-Problemen, da jede einzelne Seite identische SVGs beinhaltet, die vom HTML-Parser bei jedem Laden der Seite gelesen werden müssen.
Natürlich gibt es andere Möglichkeiten, wie man sich Browser Caching besser zu Nutze machen kann – die allerdings nicht in jedem Browser funktionieren. Gerade der Internet Explorer sowie ältere WebKit-Browser haben bei der Nutzung des -Links als externe Quelle Probleme.
Eine recht einfache Alternative für die Nutzung von SVG-Sprites ist daher, sie zu „ajaxen“ und in die Seite zu injizieren. Der Vorteil dabei ist einerseits, dass die SVGs gecached werden können, andererseits funktioniert diese Methode überall, wo inline SVG funktioniert. Wichtig ist dabei, dass das SVG vor dem Hinzufügen zur Seite im korrekten Namespace ist. Dann wird es in einem
-Element hinzugefügt, das anschließend in die Seite implementiert wird.
Einige Code-Beispiele, anhand denen der Vorgang des Ajaxings von SVG-Sprites erläutert wird, finden sich in Chris Coyiers Artikel. In jedem Fall bietet diese Methode einige Vorteile bei der Nutzung von SVG-Sprites – insbesondere auch in Browsern, denen der Support von SVG-Sprites fehlt.
Aufmacherbild: Tips & Tricks! note with pen on yellow background von Shutterstock / Urheberrecht: Sampien
Meinungen zu diesem Beitrag