SVG Data-URI-Encoder
Füge SVG-Markup ein und wandle es sofort in eine Data-URI um, die du in CSS oder HTML verwenden kannst. Mit Vorschau und Kopierfunktion.
So verwendest du den SVG-Encoder
- Füge dein rohes SVG-Markup in das Eingabefeld ein.
- Prüfe die Vorschau, damit das SVG weiterhin korrekt dargestellt wird.
- Kopiere die Data-URI oder das fertige CSS-Snippet.
Warum SVG als Data-URI kodieren
Mit einer Data-URI kannst du SVG direkt in CSS oder HTML einbetten, ohne eine separate Bilddatei zu speichern.
Die Kodierung ist wichtig, weil SVG Zeichen enthält, die URLs oder HTML-Attribute beschädigen können, wenn sie nicht escaped werden.
Das Tool kodiert alles lokal im Browser und liefert sowohl die URI als auch ein fertiges CSS-Beispiel.
Häufig gestellte Fragen
Was ist eine Data-URI? ▼
Eine Data-URI bettet Dateiinhalte direkt in eine Zeichenkette ein, sodass keine externe Datei referenziert werden muss.
Warum nicht einfach rohes SVG in CSS einfügen? ▼
Rohes SVG enthält oft Zeichen, die URL-kodiert werden müssen. Eine Data-URI ist robuster.
Kann ich das Ergebnis in einem img-Tag verwenden? ▼
Ja. Die erzeugte Data-URI funktioniert in img src oder als CSS background-image.
Macht das die Datei kleiner? ▼
Manchmal, aber der Hauptvorteil ist die einfache Einbettung und Portabilität.
Ist die Umwandlung privat? ▼
Ja. Alles passiert lokal im Browser ohne Upload.