SVG-Symbol-Sprite
SVG-Icons zu einem einzigen Symbol-Sprite zusammenführen
Kombinieren Sie einen Ordner mit SVG-Symbolen zu einem wiederverwendbaren Sprite. Jede Datei wird zu einer <symbol> mit einem vorgefertigten <use>-Snippet, während vorangestellte interne IDs verhindern, dass Verläufe, Masken und Clippfade kollidieren.
Diese Einstellungen gelten für das gesamte Sprite.
Sprite-Vorschau
SVG-Dateien hinzufügen, um ein Sprite zu erzeugen.
Noch keine Dateien. Dateien oben ablegen oder DATEIEN AUSWÄHLEN klicken.
Symbol-Sprite oder Spritesheet?
Ein Symbol-Sprite ist eine einzelne SVG-Datei, die pro Icon ein <symbol> enthält. Gezeichnet wird erst, wenn Sie ein Symbol mit <use> referenzieren. Die Icons bleiben also Vektoren, bleiben per CSS gestaltbar und bleiben in jeder Größe scharf. Genau das wollen Sie für das Icon-Set einer Benutzeroberfläche.
Ein Spritesheet ist ein einzelnes Bild, auf dem alle Icons in einem Raster angeordnet sind und über background-position oder eine JSON-Frame-Map gezeichnet werden. Die Icons sind Pixel an festen Koordinaten: genau das, was Game-Engines und Canvas-Renderer erwarten, und genau das, was Sie brauchen, wenn das Ziel <use> überhaupt nicht nutzen kann.
Den SVG-Spritesheet-Generator öffnenWann sollte man ein Symbol-Sprite einsetzen
Ein Symbol-Sprite speichert einen Symbolsatz in einer wiederverwendbaren SVG-Datei und jede Symbolinstanz wird zu einem kurzen <use>-Element anstelle eines wiederholten Pfadblocks. Dies ist nützlich für Navigation, Schaltflächen, Tabellen und andere Schnittstellen, die dieselben Symbole wiederverwenden. Die Symbole bleiben im Vektor-Markup, bleiben also scharf und können Farbe und Größe von CSS übernehmen.
So erzeugen Sie ein SVG-Symbol-Sprite online
- 1
SVG-Icons ablegen oder DATEIEN AUSWÄHLEN klicken, um sie der Warteschlange hinzuzufügen. Bis zu 40 auf einmal, und die Reihenfolge in der Liste ist die Reihenfolge der Symbole.
- 2
Ein externes oder ein Inline-Sprite wählen und entscheiden, ob die Icons optimiert und ihre viewBoxes normalisiert werden. Das Icon-Raster baut sich dabei aus dem Sprite selbst neu auf.
- 3
Auf ALLE SPEICHERN klicken, um sprite.svg herunterzuladen, oder ein ZIP mit sprite.svg und usage.html, wenn die Verwendungsbeispiele aktiv sind.
Datenschutz: Ihre Dateien verlassen den Browser nicht
Die Konvertierung erfolgt lokal in Ihrem Browser mit JavaScript und WebAssembly. Es erfolgt kein Datei-Upload oder eine serverseitige Konvertierung, sodass die von Ihnen hinzugefügten Dateien auf Ihrem Gerät verbleiben.
Die lokale Verarbeitung trägt zum Schutz vertraulicher Logos, interner Dokumente und unveröffentlichter Kundengrafiken bei. Seiten und Konvertierungscode werden zwischengespeichert, während Sie sie verwenden, sodass bereits geöffnete Tools ohne Netzwerkverbindung weiterarbeiten können.
Häufige Fragen
Was passiert, wenn zwei Dateien dieselbe ID ergeben?
Die IDs stammen aus dem Dateinamen ohne Endung, kleingeschrieben und in einen Slug umgewandelt, aus "Arrow Left.svg" wird also arrow-left. Ergeben zwei Dateien dieselbe ID, behält die erste sie, und die folgenden bekommen -2, -3 und so weiter. Benennen Sie eine Datei in der Liste um, ändert sich ihre ID sofort, und dasselbe gilt fürs Sortieren oder Verschieben der Liste, denn die schlichte ID behält immer die Datei, die in der Reihenfolge zuerst kommt.
Sollte ich ein externes oder ein Inline-Sprite verwenden?
Ein externes Sprite ist eine Datei sprite.svg, die Sie mit <use href="sprite.svg#icon-id"> referenzieren. Sie wird wie jedes andere Asset zwischengespeichert und hält Ihr HTML klein, kostet dafür eine zusätzliche Anfrage und muss von derselben Origin kommen, sofern CORS nichts anderes erlaubt. Ein Inline-Sprite ist dasselbe Markup, in einem versteckten <svg> in die Seite eingefügt und mit <use href="#icon-id"> referenziert. Es braucht keine Anfrage und wird immer aufgelöst, dafür wiederholen sich diese Bytes in jedem HTML-Dokument, das es nutzt.
Verändert das Erzeugen eines Sprites das Aussehen meiner Icons?
Nein. Das Wurzelelement <svg> jeder Datei wird zu einem <symbol> mit derselben viewBox, und seine Kindelemente werden unverändert übernommen, abgesehen vom Präfix für die IDs. "SVG optimieren" führt dieselben sicheren Durchläufe aus wie der SVG-Optimierer, Kommentare, Editor-Metadaten und überflüssige Attribute verschwinden also, während die Geometrie bleibt. "viewBox normalisieren" zentriert jedes Icon neu in einem quadratischen Koordinatenraum, das ändert den Rahmen und nicht die Zeichnung. <script>-Elemente und on*-Attribute werden immer entfernt, denn ein Sprite landet am Ende eingebettet in Ihrer Seite.