Kostenloses Tool

SVG-Sprite-Generator

Fasse viele SVG-Icons in einer Sprite-Datei zusammen. Einmal laden und jedes Icon mit einem kurzen use-Tag anzeigen.

SVG-Dateien oder einen Ordner hier ablegenDateien bleiben auf deinem Gerät

Noch keine Dateien

Hier erscheinen die umgewandelten Dateien. Lege oben SVG-Dateien ab oder probiere es mit Beispiel-Icons.

So erstellst du ein SVG-Sprite

SVG-Icons ablegenFüge Dateien oder einen Ordner hinzu oder SVG-Code ein.
ID-Präfix festlegenJedes Icon wird ein symbol, benannt nach seiner Datei, etwa icon-rocket.
sprite.svg herunterladenLade sie auf deine Website und zeige Icons mit dem use-Code an.

Wozu ein SVG-Sprite?

Der Browser lädt eine einzige Datei für alle Icons und speichert sie im Cache. Jedes Icon auf der Seite ist eine Zeile Code statt eines ganzen SVG.

Wie zeige ich ein Icon aus dem Sprite an?

Füge ein svg-Element mit einem use-Element ein, dessen href auf das Sprite und die ID des Icons zeigt, etwa /sprite.svg#icon-rocket.

Kann ich die Farbe per CSS ändern?

Ja. Einfarbige Icons nutzen currentColor und übernehmen die Farbe des umgebenden Texts.

Funktionieren Verläufe noch?

Ja. IDs in jedem Icon bekommen die ID ihres symbol als Präfix, sodass Verläufe und Masken nie kollidieren.