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.
Ähnliche Tools
Base64 Kodierer/Dekodierer
Kodieren Sie Text zu Base64 oder dekodieren Sie Base64 zu Text sofort. Unterstützt volles Unicode einschliesslich Emoji. Die gesamte Verarbeitung läuft lokal in Ihrem Browser.
CSS-Gradient-Generator
Schöne CSS-Verläufe visuell erstellen. Linearen, radialen oder konischen Typ wählen, Farbstopps hinzufügen, Winkel anpassen und Live-Vorschau sehen. CSS mit einem Klick kopieren.
QR-Code-Generator
QR-Codes für URLs, WLAN-Passwörter, E-Mail-Adressen, vCard-Kontakte oder Text erstellen. Größe und Fehlerkorrektur wählen, dann als PNG herunterladen. Kostenlos, sofort, ohne Anmeldung.