# SVG-Sprite-Sheet-Generator Lade bis zu 30 SVG-Icons hoch und füge sie zu einem Sprite-Sheet zusammen: \-Modus für inline , \-Modus für externe Datei-Fragmente. Ergänzt viewBox (aus width/height), dedupliziert Icons, entfernt optional fill/stroke für currentColor, säubert immer und on\*-Attribute und erzeugt HTML-/React-/Vue-/CSS-Snippets mit Live-Vorschau jedes Icons. > Kanonische Seite: https://elysiatools.com/de/tools/svg-sprite-generator - **Kategorie:** Media - **Schlagwörter:** svg-sprite, sprite-sheet, svg symbol, icon-set, use-element ## Überblick Merge-Regeln: Jedes \`\` erhält den inneren Inhalt des ursprünglichen \`\` (ohne Root-Element); fehlt das viewBox, wird es aus width/height als 0 0 W H abgeleitet; der \`\`-Modus gibt zusätzlich ein \`\` für externe Referenzen aus (\`\`). IDs werden aus dem Dateinamen gesäubert (Zeichen außer \[A-Za-z0-9\_-\] → „-“, Präfix i- bei Ziffernstart, plus Nutzer-Präfix), Suffix -2 bei Kollision. Deduplizierung per Hash aus viewBox + leerkomprimiertem Inhalt. Sicherheit: \`\` und on\*-Attribute werden immer entfernt. ## Eingaben - **SVG-Dateien (bis zu 30)** (file): Select up to 30 .svg icon files - **Sprite-Typ** (select) - **ID-Präfix** (text): e.g. icon- - **fill/stroke entfernen (für currentColor)** (checkbox) - **Identische Icons deduplizieren** (checkbox) ## Wann verwenden - Wenn du mehrere SVG-Icons in einer Seite mit einem einzigen Sprite und einbinden willst. - Wenn du eine externe Sprite-Datei mit \- und \-Fragmenten für href-Referenzen brauchst. - Wenn Icons einheitliche IDs, ergänzte viewBox und optionale currentColor-Vorbereitung benötigen. ## Funktionsweise - Lade bis zu 30 SVG-Dateien (jeweils image/svg+xml) hoch. - Wähle Sprite-Typ (Symbol für inline oder View für externe Fragmente), optional ein ID-Präfix sowie die Optionen zum Entfernen von fill/stroke und zum Deduplizieren. - Das Tool übernimmt den inneren SVG-Inhalt, leitet fehlende viewBox als 0 0 W H ab, säubert Dateinamen zu gültigen IDs, entfernt immer und on\*-Attribute und erzeugt das Sprite plus Nutzungs-Snippets. - Prüfe die Live-Vorschau jedes Icons und kopiere die fertigen HTML-/React-/Vue-/CSS-Codes. ## Anwendungsfälle - Inline-Icon-Set für eine Website mit einem Symbol-Sprite und \-Elementen. - Externe Sprite-Datei mit View-Fragmenten für referenzierte Icons in mehreren Seiten. - Vorbereitung eines Icon-Sets mit Deduplizierung und currentColor für thematische Farbgebung. ## Häufig gestellte Fragen ### Wie viele SVG-Dateien kann ich hochladen? Bis zu 30 SVG-Dateien. ### Was ist der Unterschied zwischen Symbol- und View-Modus? Symbol erzeugt für inline . View erzeugt zusätzlich und für externe Referenzen wie . ### Wie entstehen die Icon-IDs? Aus dem Dateinamen: ungültige Zeichen werden zu Bindestrichen, Ziffernstart erhält das Präfix i-, plus dein optionales ID-Präfix. Bei Kollisionen kommt der Suffix -2 hinzu. ### Werden unsichere Inhalte entfernt? Ja. \-Elemente und alle on\*-Attribute werden immer gelöscht. ### Was bewirkt die Option fill/stroke entfernen? Sie entfernt fill- und stroke-Attribute, damit sich die Icons per currentColor einfärben lassen. ## Ähnliche Tools - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [PDF-Kopf-/Fußzeilen-Bausteine](https://elysiatools.com/de/tools/pdf-header-footer-snippets): Konvertiert HTML zu PDF und fügt Logo-, Titel- und Datumsbausteine hinzu - [SVG-Favicon-Generator](https://elysiatools.com/de/tools/svg-favicon-generator): Erzeugt aus einem SVG- oder Rasterlogo ein komplettes Favicon-Paket mit ICO, PNG-Varianten, Apple-Touch-Icon und Web-Manifest - [SVG zu JPG Konverter](https://elysiatools.com/de/tools/svg-to-jpg): SVG-Vektorgrafiken in JPG-Rasterformat konvertieren mit anpassbaren Auflösungs-, Qualitäts- und Hintergrundoptionen - [SVG zu PDF](https://elysiatools.com/de/tools/svg-to-pdf): Vektorgrafiken SVG in PDF-Dokumente für Druck und Freigabe konvertieren - [SVG zu PNG Konverter](https://elysiatools.com/de/tools/svg-to-png): SVG-Vektorgrafiken in PNG-Rasterformat konvertieren mit anpassbaren Auflösungs-, Qualitäts- und Transparenzoptionen - [SVG zu WebP Konverter](https://elysiatools.com/de/tools/svg-to-webp): SVG-Vektorgrafiken in WebP-Rasterformat konvertieren mit moderner Kompression und Transparenzunterstützung - [Barrierefreiheitspruefer](https://elysiatools.com/de/tools/accessibility-checker): Erkennt haeufige WCAG-2.1-Probleme in HTML, Seiten oder Designbildern und liefert direkt umsetzbare Hinweise ## Beispiele - [XML-Beispiele](https://elysiatools.com/de/samples/xml-viewer-samples): Beispieldateien fuer den Browser-basierten XML-Viewer - [XML-Beispiele](https://elysiatools.com/de/samples/xml-samples): XML (eXtensible Markup Language)-Formatbeispiele von einfachen bis komplexen Strukturen - [SVG Beispiele](https://elysiatools.com/de/samples/svg-samples): Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren - [SVG-Beispiele](https://elysiatools.com/de/samples/svg-viewer-samples): Vektorgrafik-Beispiele für den SVG-Viewer im Browser ## Verwandte Inhalte - [Tools fur Bildformat-Konvertierung und animierten Export](https://elysiatools.com/de/hubs/image-convert): Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub. - [XML-Werkzeuge fur Konvertierung, Mapping und XPath](https://elysiatools.com/de/hubs/xml-convert): Gebundelte Werkzeuge fur XML-Konvertierung, Mapping, Zusammenfuhrung und XPath-Extraktion in einem Hub. - [HTML-Extraktions-, Bereinigungs- und Markdown/PDF-Export-Tools](https://elysiatools.com/de/hubs/html-convert): Vergleichen Sie HTML-Bereinigung, Attribut- und Bildquellen-Extraktion, HTML-zu-Markdown und HTML-zu-PDF in einem Hub für Web-Content-Konvertierungs-Workflows. - [Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung](https://elysiatools.com/de/hubs/image-utility): Bunde Bildbereinigung, Beschneiden, Padding, Rahmen, Batch-Resize/Kompression, Wasserzeichen und visuelle Veredelung in einem Hub fur Asset-Vorbereitung.