SVG Sprite Sheet Generator
Führung
SVG Sprite Sheet Generator
Kombinieren Sie mehrere SVG-Dateien zu einer einzigen Sprite-Tabelle für effiziente Icon-Load. Hochladen Sie Ihre SVG-Dateien per Drag-and-Drop, sehen Sie sie in einem Grid vor, bearbeiten Sie die Symbol-IDs und laden Sie eine kombinierte Sprite-Datei für die Produktion herunter. Erhalten Sie Verwendungscodebeispiele für externe, inline und CSS-Hintergrundansätze. Entfernen Sie optional Füllungen und Striche für CSS-farbige Icons und entfernen Sie Editor-Metadaten, um die Dateigröße zu verringern.
Nutzung
Ziehen Sie Ihre SVG-Icon-Dateien auf das Hochladebereich oder klicken Sie darauf, um zu wählen. Jede SVG-Datei wird analysiert und in einer Vorschau-Grid angezeigt mit ihrer automatisch generierten Symbol-ID. Bearbeiten Sie jede Symbol-ID, indem Sie darauf klicken. Aktivieren Sie die Optimierungsoptionen, um Füllungen/Striche zu entfernen oder Metadaten zu löschen. Klicken Sie auf „Generieren“, um alle Icons in eine einzige Sprite-Tabelle zu kombinieren. Laden Sie die kombinierte SVG-Datei herunter oder kopieren Sie den Inline-HTML-Code. Verwenden Sie die generierten Codebeispiele, um einzelne Icons in Ihrem Projekt zu referenzieren.
Funktionen
- Drag-and-Drop-Hochladen – Mehrere SVG-Dateien gleichzeitig per Drag-and-Drop oder Dateiwähler hochladen
- Icon-Vorschau-Grid – Alle hochgeladenen Icons in einem reaktiven Grid mit Etiketten anzeigen
- Bearbeitbare Symbol-IDs – Automatisch aus den Dateinamen generiert, klicken Sie, um sie vor der Kombination anzupassen
- Sprite-Tabelle-Generierung – Kombiniert SVG-Dateien zu einer einzigen Datei mit Symbol-Elementen und behält die viewBox bei
- Verwendungscodebeispiele – Erhalten Sie sofort einsetzbare Codebeispiele für externe Referenz, inline-Referenz und CSS-Hintergrundansätze
- Füllung/Strich-Entfernung – Entfernen Sie Füllung und Strichattribute für Icons, die mit CSS gefärbt werden sollen
- Optimierung – Entfernen Sie Kommentare, Metadaten und Editor-Namespace, um die Dateigröße zu minimieren
- Dateigrößenvergleich – Sehen Sie die individuellen und kombinierten Dateigrößen sowie den Speicherersparnis
Häufig gestellte Fragen
-
Was ist eine SVG-Sprite-Tabelle und warum sollte ich eine verwenden?
Eine SVG-Sprite-Tabelle ist eine einzelne SVG-Datei, die mehrere Icons als Symbol-Elemente definiert. Anstatt 20 separate SVG-Dateien (20 HTTP-Anfragen) zu laden, wird eine Sprite-Datei geladen und einzelne Icons mit dem „use“-Element referenziert. Dies reduziert HTTP-Anfragen, verbessert die Ladezeit und macht die Verwaltung von Icons einfacher. Jedes Symbol behält seinen eigenen viewBox bei, sodass Icons korrekt proportioniert angezeigt werden. Sprite-Tabellen sind besonders wertvoll für Websites mit vielen Icons über mehrere Seiten.
-
Was ist der Unterschied zwischen externer und inline-Sprite-Referenz?
Eine externe Referenz verwendet eine separate Sprite-SVG-Datei und referenziert Icons mit einem href-Pfad plus der Symbol-ID, wie sprite.svg#icon-name. Der Browser lädt die Sprite-Datei einmal und speichert sie. Eine inline-Referenz integriert die gesamte Sprite-SVG direkt in die HTML-Seite (normalerweise verborgen) und referenziert Icons mit nur dem Hash und der ID. Inline-Sprites funktionieren sofort ohne zusätzliche Dateianfrage, erhöhen jedoch die HTML-Größe und können nicht getrennt gespeichert werden. Externe Sprites eignen sich besser für mehrseitige Websites, während inline-Sprites gut für Einseitige Anwendungen geeignet sind.
-
Warum entferne ich Füllungen und Striche aus SVG-Icons?
Die Entfernung von Füll- und Strichattributen aus SVG-Icons ermöglicht es, die Farbe vollständig mit CSS zu steuern. Dies ist entscheidend für Icon-Systeme, bei denen Icons in verschiedenen UI-Kontexten, bei Hover oder im Dunkelmodus ihre Farbe ändern müssen. Ohne die Entfernung der ursprünglichen Attribute funktionieren CSS-Farbeänderungen möglicherweise nicht, da Inline-SVG-Attribute eine höhere Spezifität haben als CSS-Regeln. Die Option zum Entfernen von Füll- und Strichattributen in diesem Tool entfernt diese Attribute, sodass Sie Farben mit CSS-Füll- und Strich-Eigenschaften oder dem currentColor-Schlüssel einstellen können.
-
Wie werden Symbol-IDs aus Dateinamen generiert?
Das Tool konvertiert jeden Dateinamen in eine URL-sichere Symbol-ID, indem es die .svg-Endung entfernt, in Kleinbuchstaben umwandelt, Leerzeichen und Sonderzeichen durch Bindestriche ersetzt und mehrfache Bindestriche entfernt. Zum Beispiel wird „My Icon (v2).svg“ zu „my-icon-v2“. Sie können jede generierte ID vor der Kombination bearbeiten. Jede ID muss innerhalb der Sprite-Tabelle eindeutig sein, da sie als Referenz-ID bei der Verwendung des Icons dient. Bedeutende IDs wie „icon-arrow-right“ oder „icon-close“ machen Ihren Code lesbarer als allgemeine Namen.
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
Unverzichtbare Tools
Alle Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug hinzugefügt am 18. April 2026
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
