SVG zu Base64 Encoder
Kodieren Sie jedes SVG als Base64 und Data URI, um es inline in CSS, HTML oder React einzubetten. Fünf kopierfertige Varianten, darunter eine URL-kodierte Version, die das Markup in Ihrem Stylesheet lesbar hält. Kostenlos, privat und sofort.
SVG hier ablegen oder klicken zum Hochladen
Akzeptiert .svg-Dateien oder SVG-Code unten einfügen
Warum SVG als Base64 einbetten
Fünf einsatzbereite Formate
Erhalten Sie das rohe Base64, einen Data URI, eine CSS-background-image-Regel, einen HTML-img-Tag und eine URL-kodierte Variante – jeweils mit eigener Kopierschaltfläche.
Lesbare URL-kodierte Variante
Die URL-kodierte UTF-8-Variante hält das SVG-Markup im Data URI lesbar, sodass Sie eine Füllfarbe direkt im CSS ändern können. Da jedes reservierte Zeichen maskiert wird, fällt sie etwas länger aus als der Base64-String, nicht kürzer.
UTF-8-sicher
Die Kodierung verarbeitet Emojis, Umlaute und nicht-lateinische Zeichen korrekt, sodass Ihr SVG durch Sonderzeichen nie beschädigt wird.
HTTP-Anfrage einsparen
Ein kleines SVG als Data URI einzubetten entfernt eine separate Netzwerkanfrage, was den First Paint für Icons und Logos beschleunigen kann.
100 % Privat
Die Kodierung läuft vollständig in Ihrem Browser. Ihr SVG wird nie hochgeladen – das macht das Tool sicher für private Markenassets.
Kostenlos und unbegrenzt
Keine Anmeldung, keine Credits, keine Limits. Kodieren Sie so viele SVGs wie Sie möchten und kopieren Sie jede Variante mit einem Klick.
So kodieren Sie SVG in Base64
SVG hinzufügen
Ziehen Sie eine .svg-Datei per Drag & Drop, klicken Sie zum Durchsuchen oder fügen Sie Ihren SVG-Code in das Feld ein.
Varianten erhalten
Der Encoder generiert sofort das rohe Base64, einen vollständigen Data URI, eine CSS-Hintergrundregeln, einen img-Tag und eine URL-kodierte Version.
Die richtige auswählen
Verwenden Sie den Data URI in src oder href, die CSS-Variante in background-image oder die URL-kodierte Variante, wenn das SVG inline lesbar und bearbeitbar bleiben soll.
Kopieren und einfügen
Klicken Sie auf die Kopierschaltfläche neben einer Variante und fügen Sie sie direkt in Ihr Stylesheet, HTML oder Ihre Komponente ein.
Wählen Sie das richtige Tool
Warum diese Seite existiert
Use the SVG to Base64 encoder to embed a vector inline as a data URI for CSS, HTML, or JSON, removing a network request. Copy the raw base64, the data URI, a CSS background, an img tag, or a URL-encoded variant that keeps the markup readable in your stylesheet.
Am besten für
- Inlining icons in CSS background-image rules
- Embedding small SVGs directly in HTML or React without a separate file
- Cutting an extra HTTP request for tiny vector assets
Verwandte Tools, die als nächstes benötigt werden
SVG-zu-Base64 FAQ
Ein Data URI ermöglicht es, ein Bild direkt in CSS oder HTML einzubetten, anstatt auf eine separate Datei zu verlinken. Für SVG sieht er so aus: data:image/svg+xml;base64,PHN2Zy... – der Browser dekodiert und rendert es inline, ohne zusätzliche Netzwerkanfrage.
Verwenden Sie Base64, wenn ein Tool oder eine Plattform ausdrücklich Base64-Eingabe verlangt. Verwenden Sie die URL-kodierte UTF-8-Variante (data:image/svg+xml,...), wenn das SVG in Ihrem CSS lesbar und bearbeitbar bleiben soll. Beachten Sie: Unser Encoder maskiert jedes reservierte Zeichen, daher ist der URL-kodierte String etwas länger als der Base64-String, nicht kürzer.
Kopieren Sie die CSS-background-image-Variante und fügen Sie sie in eine Regel ein, zum Beispiel background-image: url("data:image/svg+xml;base64,..."). Das Icon wird dann als Hintergrund gerendert, ohne eine separate Bilddatei zu laden.
Ja. Der Encoder ist UTF-8-sicher, sodass Umlaute, nicht-lateinische Schriften und Emojis in Ihrem SVG korrekt kodiert werden und fehlerfrei gerendert werden.
Das Einbetten als Data URI eignet sich am besten für kleine SVGs wie Icons und Logos, bei denen das Entfernen einer HTTP-Anfrage das Laden beschleunigt. Für große oder häufig wiederverwendete SVGs ist eine separate gecachte Datei in der Regel besser, da der Data URI jeder Seite, die ihn enthält, mehr Gewicht hinzufügt.
Nein. Die Kodierung erfolgt vollständig in Ihrem Browser, sodass das SVG Ihr Gerät nie verlässt. Das macht das Tool sicher für vertrauliche oder unveröffentlichte Assets.
SVG zu Base64 Encoder
Kodieren Sie jedes SVG als Base64 und Data URI, um es inline in CSS, HTML oder React einzubetten. Fünf kopierfertige Varianten, darunter eine URL-kodierte Version, die das Markup in Ihrem Stylesheet lesbar hält. Kostenlos, privat und sofort.