SVG / Symbole

SVG-Sprite-Generator: Symbole und Icon-Nutzung

Ziehe mehrere SVG-Icons hierher, um einen Symbol-Sprite zu erstellen. Bereinige das Markup, entferne doppelte IDs aus Dateinamen, erhalte viewBoxes, wandle Füllungen optional in currentColor um und lade sprite.svg herunter.

SVG-Sprite-Generator: Symbole und Icon-Nutzung: Füge mehrere SVG-Icons ein und erhalte eine Sprite-Datei mit einem Symbol für jedes Icon sowie das Snippet zur Verwendung jedes einzelnen Icons. Skripte, externe Ressourcen und alle unsicheren Inhalte werden entfernt. Größen werden bei Bedarf in eine viewBox umgewandelt. Füllungen können in currentColor geändert werden, damit sich die Icons an die Textfarbe anpassen. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
SVG-SymbolspriteLokale Verarbeitung

Läuft vollständig in deinem Browser

Bis zu 60 Symbole · jeweils 1 MB · die Dateiauswahl ersetzt die aktuelle Auswahl

Skripte, Ereignis-Handler, externe Ressourcen, eingebettete Bilder, Text und nicht unterstützte Elemente werden entfernt. Grundlegende Inline-Stile werden zu Präsentationsattributen. Bei einem fehlenden viewBox werden numerische Breite und Höhe verwendet; für jede fehlende Abmessung dienen 24 Einheiten als Ersatzwert. Prüfe jede Vorschau vor der Verwendung.

SVG-Symbol bearbeiten

Symbole und Wiederverwendung

SVG 2 spezifiziert die Elemente symbol und use sowie deren viewBox-Verhalten: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Lokale Verarbeitung und Farbgebung

Jedes Symbol wird aus einer Liste sicherer SVG-Elemente und -Attribute neu erstellt, sodass Skripte, Ereignisbehandler und externe Ressourcen nicht auf das Sprite zugreifen können. Es ist kein Symbolsatz von Drittanbietern enthalten. Die SVG-Farbgebung und currentColor sind unter https://www.w3.org/TR/SVG2/painting.html spezifiziert. Für die Lizenzen hochgeladener Symbole ist der Nutzer selbst verantwortlich.

So benutzt du es

  1. Ziehe bis zu 60 SVG-Icons hierher, jeweils kleiner als 1 MB.
  2. Prüfe die bereinigten Vorschauen und wandle Füllungen optional in currentColor um.
  3. Lade den Sprite herunter und wähle ein Icon aus, um sein Nutzungs-Snippet zu kopieren.

Datenschutz & Einschränkungen

Deine SVG-Dateien bleiben lokal. Das Tool ruft keine eingebetteten URLs ab und lädt keine Icons hoch.

Ähnliche Tools

SVG-EditorSVG‑BereinigerSVG zu JSX

Häufige Fragen

Wie verwende ich den Sprite?

Füge den SVG-Sprite einmal in einem ausgeblendeten Container auf der Seite ein und verwende anschließend die kopierten Inline-Snippets. Für eine separate Datei verwendest du stattdessen sprite.svg#id als href.

Was passiert, wenn viewBox fehlt?

Numerische Angaben für width und height, einschließlich px-Einheiten, definieren eine neue viewBox. Jede fehlende oder nicht unterstützte Größenangabe wird auf 24 Einheiten gesetzt. In der Vorschau werden reparierte viewBoxes gekennzeichnet, damit du mögliche Beschnitte prüfen kannst.

Behält jedes Icon sein genaues Erscheinungsbild?

Nein. Grundlegende Formen, Gruppen, Verläufe, Beschneidungen und Masken bleiben erhalten. Skripte, Text, eingebettete Bilder, use-Elemente und nicht unterstützte Formatierungen werden jedoch entfernt. Prüfe die Vorschau. Für die Lizenzen der hochgeladenen Grafiken bleibst du selbst verantwortlich.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig