Zum Hauptinhalt springen

SVG-Spritesheet

Generieren Sie ein SVG-Spritesheet mit einer JSON-Karte

Ordnen Sie SVG-Symbole in einem benutzerdefinierten Raster an und exportieren Sie ein PNG-, WebP- oder SVG-Spritesheet mit einer JSON-Framemap. Steuern Sie Spalten, Zellengröße, Abstand, Abstand, Ausrichtung, Skalierung und Sortierreihenfolge.

Dateien hier ablegen
Raster

0 bedeutet automatisch. Stehen beide auf 0, landen die Icons in einem quadratischen Raster; ist eines gesetzt, ergibt sich das andere aus der Dateianzahl.

Padding ist der leere Raum innerhalb einer Zelle, der Abstand ist die Lücke zwischen den Zellen. Die Frames in der JSON-Map decken die ganze Zelle ab, Padding eingeschlossen, und reichen nie in den Abstand hinein.

Sortierung
Zelleninhalt
Horizontale Ausrichtung
Vertikale Ausrichtung

Wie viel der Zelle samt Padding das Artwork ausfüllt, nachdem es eingepasst wurde.

Schreibt den Namen jeder Datei unter ihre Zelle. Die Beschriftungszeile vergrößert die Höhe des Sheets und bleibt außerhalb der Frames.

Ausgabe
Ausgabeformat

PNG funktioniert überall. WebP ist kleiner, sofern der Browser es kodieren kann. SVG behält jedes Icon als Vektor und skaliert ohne Unschärfe.

Hintergrund

Vorschau

Keine Vorschau. Dateien hinzufügen und auswählen, um Ergebnisse zu sehen.

Noch keine Dateien. Dateien oben ablegen oder DATEIEN AUSWÄHLEN klicken.

Was ist ein SVG-Spritesheet?

Ein Spritesheet ist ein einzelnes Bild, das viele kleinere Bilder in einem Raster enthält, dazu eine Map, die angibt, wo jedes davon sitzt. Hier sind die Quellen SVG-Dateien: Jede wird in ihre eigene Zelle gezeichnet, und das fertige Sheet wird als PNG, als WebP oder als eine einzige SVG-Zeichenfläche exportiert.

Es ist nicht dasselbe wie ein SVG-Symbol-Sprite. Ein Symbol-Sprite ist eine SVG-Datei mit einem <symbol> pro Symbol, das durch die ID mit <use> referenziert wird, sodass jedes Symbol Vektor-Markup bleibt und CSS es weiterhin einfärben kann. Ein Spritesheet ist eine visuelle Leinwand: Was auch immer es verbraucht, schneidet Frames nach Koordinaten in Scheiben. Wählen Sie das Symbol-Sprite für HTML-Symbole, das Spritesheet für Canvas, WebGL oder CSS-Hintergrundsprites.

Wann sollte man ein Spritesheet einsetzen

Ein Spritesheet fasst viele kleine Bilder in einer einzigen Datei zusammen, ein Spiel oder eine App stellt also nur eine Anfrage und hält jeden Frame in einer Textur. Canvas- und WebGL-Renderer zeichnen daraus rechteckweise, CSS positioniert es mit background-position, und die JSON-Map liefert die Koordinaten, sodass nichts von Hand ausgemessen werden muss. Dazu greifen Sie immer dann, wenn die Zielumgebung in Pixeln arbeitet. Wollen Sie Icons, die innerhalb von HTML skalieren und die Farbe erben, erzeugen Sie stattdessen ein SVG-Symbol-Sprite.

So erzeugen Sie ein Spritesheet aus SVG-Dateien

  1. 1

    SVG-Dateien ablegen oder DATEIEN AUSWÄHLEN klicken, um sie der Warteschlange hinzuzufügen. Bis zu 40 auf einmal.

  2. 2

    Das Raster einstellen (Spalten, Zeilen, Zellengröße, Padding, Abstand), dann Ausrichtung, Scale, Sortierung und Ausgabeformat. Das Sheet wird bei jeder Änderung neu gezeichnet.

  3. 3

    Auf ALLE SPEICHERN klicken, um ein ZIP mit dem Sheet und seiner JSON-Frame-Map herunterzuladen.

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

Sollte ich ein Spritesheet oder ein SVG-Symbol-Sprite verwenden?

Nehmen Sie ein Symbol-Sprite, wenn die Icons in HTML landen: Es bleibt Vektor, erbt die CSS-Eigenschaft color, und jedes Icon wird über die id mit <use> referenziert. Nehmen Sie ein Spritesheet, wenn etwas Pixel anhand von Koordinaten zeichnet, etwa ein canvas- oder WebGL-Spiel oder ein CSS-Background-Sprite. Die JSON-Map des Spritesheets liefert Ihnen x, y, width und height jedes Frames.

Was steht in der JSON-Map?

Ein Eintrag pro Icon, als Schlüssel dient der Dateiname ohne Endung, zum Beispiel {"home":{"x":0,"y":0,"width":64,"height":64}}. Das Rechteck deckt die gesamte Zelle ab, Padding eingeschlossen. Wer dieses Rechteck zeichnet, gibt das Icon also genau dort wieder, wo es platziert wurde. Doppelte Namen bekommen die Suffixe -2 und -3, damit jeder Schlüssel eindeutig bleibt.

Wie groß darf das Sheet sein?

Die Zeichenfläche ist auf 16.384 px pro Seite und 64 Megapixel insgesamt begrenzt, 40 Icons in Zellen von 256 px liegen also bequem innerhalb des Limits. Darüber hinaus meldet das Tool die Größe, statt ein leeres Bild zu schreiben. WebP hängt zudem vom Browser ab: Wo er WebP nicht kodieren kann, erhalten Sie eine Fehlermeldung statt einer PNG-Datei mit falscher Endung.