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 kleinere URL-kodierte Version. 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.
Kleinere URL-kodierte Variante
Die URL-kodierte UTF-8-Version ist für SVG in der Regel kleiner als Base64, sodass Ihr CSS und HTML schlank bleiben, während das Bild inline eingebettet ist.
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 für den kleinsten String.
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 smaller URL-encoded variant.
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.
Für SVG ist die URL-kodierte UTF-8-Variante (data:image/svg+xml,...) in der Regel kleiner als Base64, da SVG Text ist. Verwenden Sie die URL-kodierte Version für das schlankste CSS oder HTML. Verwenden Sie Base64, wenn ein Tool oder eine Plattform explizit Base64-Eingabe erfordert.
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 kleinere URL-kodierte Version. Kostenlos, privat und sofort.