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.

Elysia Tools

Mobile Navigation

Media

SVG-Sprite-Sheet-Generator

Lade bis zu 30 SVG-Icons hoch und füge sie zu einem Sprite-Sheet zusammen: <symbol>-Modus für inline <use>, <view>-Modus für externe Datei-Fragmente. Ergänzt viewBox (aus width/height), dedupliziert Icons, entfernt optional fill/stroke für currentColor, säubert immer <script> und on*-Attribute und erzeugt HTML-/React-/Vue-/CSS-Snippets mit Live-Vorschau jedes Icons.

Einzelheiten

Wobei dieses Tool hilft

Merge-Regeln: Jedes <symbol id viewBox> erhält den inneren Inhalt des ursprünglichen <svg> (ohne Root-Element); fehlt das viewBox, wird es aus width/height als 0 0 W H abgeleitet; der <view>-Modus gibt zusätzlich ein <g id> für externe Referenzen aus (<use href="sprite.svg#id">). 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: <script> und on*-Attribute werden immer entfernt.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Drei Beispiel-SVGs zu einem Symbol-Sprite mergen

Die drei einfachen Beispiel-SVGs (360×240-ViewBox) verschmelzen zu einem Symbol-Sprite; Ziffern-initialen Dateinamen erhalten das i--Präfix, HTML/React/Vue-Snippets werden erzeugt.

<section class="ssg">3 icons · symbol mode · ids i-01-basic-shapes, i-02-stroke-and-fill, i-03-transforms · sprite source + usage snippets</section>

View-Modus-Sprite mit icon--Präfix

Die Beispiele icon-set und responsive verschmelzen im View-Modus mit dem Präfix „icon-“ — die Ausgabe enthält <view id viewBox>- und <g id>-Fragmente für externe Referenzen.

<section class="ssg">2 icons · view mode · ids icon-icon-set, icon-i-11-responsive · <view> + <g> fragments</section>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

5 Optionen

DateienQuelldateien für diesen Workflow hochladen.1

SVG-Dateien (bis zu 30)filePflicht

Maximale Größe je Datei: 2.0 MB / Max. Dateien: 30Unterstützte Typen: image/svg+xml

InhaltHaupteingaben einfügen oder eingeben.1

ID-PräfixtextOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.1

Sprite-TypselectOptionales Feld

SchalterOptionales Verhalten aktivieren oder deaktivieren.2

fill/stroke entfernen (für currentColor)checkboxOptionales FeldAktiviert, wenn ausgewähltIdentische Icons deduplizierencheckboxOptionales FeldAktiviert, wenn ausgewählt

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

SVG-Sprite-Sheet-Generator

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Drei einfache Icons zu einem Symbol-Sprite zusammenführen

2. View-Sprite mit Präfix für externe Datei

FAQ

XML-Beispiele

XML-Beispiele

SVG Beispiele

SVG-Beispiele

Data-URI-Generator

PDF-Kopf-/Fußzeilen-Bausteine

SVG-Favicon-Generator

SVG zu JPG Konverter

Tools fur Bildformat-Konvertierung und animierten Export

XML-Werkzeuge fur Konvertierung, Mapping und XPath

HTML-Extraktions-, Bereinigungs- und Markdown/PDF-Export-Tools

Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung