SVG in eine data URI für CSS und HTML umwandeln
Wandeln Sie SVG-Code in eine optimierte data URI um (nutzbar in CSS oder HTML), direkt in Ihrem Browser.
URL-encoded mode yields a shorter data URI than Base64 for SVG.
🔒 100 % clientseitig — keine Daten gesendet
Wandeln Sie Ihren SVG-Code in eine optimierte data URI um, bereit zum Einbetten in CSS oder HTML. Sie vermeiden eine zusätzliche Netzwerkanfrage, indem Sie das Bild direkt in Ihr Stylesheet einbinden. Die Umwandlung läuft zu 100 % im Browser, ohne Datei-Upload.
What is it for?
- ▸ Ein SVG-Symbol als CSS background-image ohne externe Datei einbetten
- ▸ Die Anzahl der HTTP-Anfragen auf einer Webseite reduzieren
- ▸ Ein kleines Logo direkt in ein src-Attribut einbetten
- ▸ Ein SVG für eine E-Mail oder eine Komponente optimieren und codieren
FAQ
Was ist eine data URI für ein SVG?
Das ist eine Zeichenkette, die das gesamte Bild direkt in der URL codiert, im Format data:image/svg+xml. Damit können Sie das SVG anzeigen, ohne eine separate Datei zu verwenden, indem Sie es in CSS oder HTML einfügen.
Sollte ich UTF-8 oder Base64 verwenden?
Bei SVGs ist UTF-8-Codierung (mit maskierten Sonderzeichen) oft schlanker und lesbarer als Base64. Das Tool erzeugt eine optimierte Version, die Sie unverändert in Ihr CSS einfügen können.
Wird mein SVG-Code irgendwo hochgeladen?
Nein, die Codierung erfolgt vollständig in Ihrem Browser. Ihr SVG wird niemals an einen Server gesendet oder dort gespeichert.