SVG-Sprites mit Ajax in Websites einbinden
Kommentare

SVGs für die eigene Website zu nutzen, bietet viele Vorteile, etwa um SVG-Icon-Systeme zu erstellen. Dabei gibt es verschiedene Möglichkeiten, SVG-Sprites zu erstellen, sei es von Hand oder mithilfe von Tools wie IcoMoon oder grunt-svgstore. Auch was die anschließende Integration in die Website angeht, stehen dem Webdesigner unterschiedliche Optionen zur Verfügung.

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

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -