SVG-Kodierung

SVG-zu-Base64-Konverter

Konvertieren Sie SVG-Dateien in Base64-Data-URIs für HTML-img-Tags, CSS-Hintergründe und JavaScript-Strings.

Vektor-SVG-Unterstützung CSS- und HTML-fertig Keine Uploads

4.8 / 5 124 Bewertungen

SVG-zu-Base64-Arbeitsbereich

SVG hochladen und Data URI für Inline-Nutzung im Code kopieren.

Lokal verarbeitet

SVG hierher ziehen und ablegen oder klicken, um eine Datei auszuwählen

Maximale Dateigröße 2 MB

Brauchen Sie Hilfe bei SVG Base64 im Code? HTML-, CSS- und JavaScript-Leitfaden lesen

SVG in Base64 konvertieren

SVG-Dateien sind XML-basierte Vektorbilder. Wenn Sie svg to base64 konvertieren, verwandeln Sie die Datei in einen einzelnen Textstring, den Sie in JSON, JavaScript oder Legacy-Templates einfügen können.

Dieses Tool gibt eine data:image/svg+xml;base64,... URI aus, die Sie aus dem Data-URI-Tab kopieren können.

SVG-Data-URI-Format

Die kodierte URI behält den SVG-MIME-Typ bei, sodass Browser sie als Vektorbild rendern.

Wenn Sie einen data image svg xml base64-Wert benötigen, kopieren Sie die vollständige URI aus der Konverter-Ausgabe und fügen Sie sie in Ihren Code ein.

Nutzen Sie die HTML- oder CSS-Tabs, wenn Sie ein fertiges Snippet statt des rohen Strings wünschen.

Base64-SVG vs. Inline-SVG

Inline-SVG-Markup lässt sich leichter mit CSS stylen und erzeugt oft geringeres Seitengewicht.

Base64-SVG eignet sich besser, wenn Sie einen kodierten String für Konfigurationen, JavaScript-Variablen oder Systeme benötigen, die keine rohen XML-Blöcke akzeptieren.

SVG Base64 in HTML und CSS verwenden

Platzieren Sie in HTML die Data URI im src-Attribut eines img-Tags, wenn Sie ein base64 img tag-Muster für Vektor-Icons benötigen.

Verwenden Sie in CSS background image base64-Werte mit background-image: url("data:image/svg+xml;base64,..."); für Icons, Badges und dekorative Assets.

Häufige SVG-Kodierungsprobleme

Große SVG-Dateien erzeugen lange Base64-Strings, die im Quellcode schwer zu lesen und zu pflegen sind.

Manche SVG-Funktionen verhalten sich anders, wenn Sie das Bild über ein img-Tag statt als Inline-SVG laden.

Häufig gestellte Fragen

Nur wenn Sie einen einzelnen kodierten String benötigen. Für die meisten Webseiten ist Inline-SVG einfacher und flexibler.

Ja. Verwenden Sie die kodierte URI als Wert für background-image in CSS.