Sprite bauen
☞ läuft komplett in deinem Browser — nichts wird hochgeladenSVG-Icons hier ablegen
oder klicken zum Auswählen — bis zu 40 SVG-Dateien
Vorschau
Das hier dort einfügen, wo die Icons erscheinen sollen
OneImageTool
Kostenlose Bildtools
Sprite bauen
Icons hineinziehen und eine einzige Sprite-Datei aus symbol-Elementen erhalten — samt einer use-Zeile pro Icon, fertig zum Einfügen.
oder klicken zum Auswählen — bis zu 40 SVG-Dateien
Vorschau
eine Datei, eine Referenz pro Icon
Jedes einzeln geladene Icon ist eine eigene Anfrage, ein eigener Cache-Eintrag und eine eigene Gelegenheit, einen Frame zu spät zu kommen. Ein Sprite faltet sie in ein Dokument: Jedes Icon wird ein symbol mit eigener viewBox, von allein zeichnet nichts, und du holst eines mit use href="#icon-name" hervor, wo du es brauchst. Weil die Referenz über die Id läuft und nicht über eine URL, erbt das Icon currentColor und das CSS des umgebenden svg — genau das, was ein Stapel img-Tags nicht kann.
Das Schwierige ist nicht das Verpacken, sondern die Namen. Vierzig aus einem Designwerkzeug exportierte Icons enthalten bereitwillig vierzig Verläufe namens „a“ und vierzig Klassen namens „cls-1“, und sobald sie sich ein Dokument teilen, nimmt der zweite still die Farbe des ersten. Deshalb wird jede Id und jede Klasse in einem Icon mit dessen eigener Symbol-Id als Präfix umbenannt, und alle vier Verstecke einer Referenz — url() in einem Attribut, ein href auf ein Fragment, das style-Attribut und das CSS in einem style-Element — werden mitgezogen. Nichts färbt ab.
drei Schritte
Bis zu 40 SVG-Dateien auf einmal, im Browser geparst. Mit den Pfeilen umsortieren; diese Reihenfolge ist die Reihenfolge der Symbole in der Datei.
Jedes Symbol heißt wie seine Datei, mit dem Präfix davor, und die Liste zeigt das Ergebnis. Zwei gleichnamige Dateien bekommen eine Nummer, damit keine zwei Symbole dieselbe Id beanspruchen.
Das Sprite kommt in deine Seite oder wird als sprite.svg ausgeliefert; das Snippet liefert eine einfügefertige Zeile pro Icon.
kurze Antworten
Zwei Wege. Füge das ganze Sprite oben in dein HTML ein und referenziere ein Icon mit use href="#icon-name"; oder liefere die Datei aus und referenziere sie als use href="/sprite.svg#icon-name". Der erste Weg spart eine Anfrage, der zweite lässt den Browser ein Sprite für alle Seiten cachen.
Vom Dateinamen: kleingeschrieben, alles außer Buchstaben und Ziffern wird zum Bindestrich, das Präfix davor. arrow_left.svg wird mit dem Standardpräfix also zu icon-arrow-left.
Eine XML-Id darf nicht mit einer Ziffer beginnen, und Dateinamen wie 2-arrow.svg sind verbreitet. Das Präfix verhindert außerdem Kollisionen mit Ids, die schon auf deiner Seite stehen. Du kannst es ändern oder leeren; würde eine Id dadurch ungültig, wird ein Ersatzpräfix wieder eingesetzt.
Die zweite bekommt eine Nummer angehängt. Sonst trügen beide Symbole dieselbe Id und jede Referenz darauf zeigte das erste Icon — ein still falsches Bild statt einer Fehlermeldung.
Ja. Jede Id und Klasse in einem Icon wird mit dessen Symbol-Id als Präfix umbenannt, und die Referenzen werden mitgezogen: url() in Attributen, Fragment-hrefs, das style-Attribut und das CSS in einem style-Element.
Wenn ein Icon fill="currentColor" nutzt, ja — setze color auf dem svg, das die Referenz enthält, und das Icon folgt. Icons mit fest eingetragenen Füllungen behalten sie; das Sprite ändert deine Farben nicht.
Bis zu 40 auf einmal. Ein Sprite selbst hat keine echte Grenze, aber ein deutlich größeres Sheet teilt man besser nach Bereichen der Website auf, damit eine Seite nur die Icons trägt, die sie wirklich braucht.
Nein. Die SVGs werden in deinem Browser geparst und zusammengesetzt, und die Vorschau ist eine Blob-URL von deinem eigenen Rechner. Dieses Werkzeug hat keinen Server, der eine Datei entgegennehmen könnte.
Ja — kostenlos, ohne Wasserzeichen und ohne Anmeldung.