SVG in Base64
Füge SVG, eine Data-URI oder eine Bild-URL ein oder zieh eine Datei hierher. Das Tool kodiert automatisch, dekodiert SVG-Data-URIs zurück in Markup und bereitet ein CSS-fertiges Ergebnis vor.
Eingabe
Füge SVG oder eine kodierte Data-URI ein. Du kannst auch eine Datei hierher ziehen oder ein Bild über eine URL laden.
Hauptergebnis
Das kodierte Ergebnis erscheint hier automatisch
Füge links etwas ein – die Umwandlung startet automatisch
So funktioniert SVG in Base64
Kodiere SVG-Dateien in Base64-Data-URIs oder dekodiere sie zurück in Markup. Du bekommst CSS-fertigen Code zum Inline-Einbinden.
SVG in Data-URI
Kodiere jede SVG-Datei und jedes SVG-Markup in eine Base64-Data-URI zum Inline-Einsatz in CSS, HTML oder JavaScript. So sparst du pro Icon eine HTTP-Anfrage.
Zurück in SVG dekodieren
Füge eine Base64-kodierte Data-URI ein, und das Tool extrahiert sofort das ursprüngliche SVG-Markup. Prüfe oder bearbeite eingebettete SVGs ohne externe Tools.
CSS-fertiges Ergebnis
Du bekommst ein background-image-CSS-Snippet, das du direkt in dein Stylesheet einfügen kannst. Das Ergebnis ist URL-kodiert und auf minimale Größe optimiert.
Mehrere Eingabemöglichkeiten
Füge SVG-Code ein, zieh eine .svg-Datei hierher oder gib eine URL zu einem SVG ein. Das Tool erkennt die Art der Eingabe automatisch und wandelt sie sofort um.
Häufig gestellte Fragen
Als Base64-Data-URI eingebettete SVGs sparen eine HTTP-Anfrage, was die Ladezeit kleiner Icons und UI-Elemente verbessern kann. Besonders nützlich in CSS, wo du SVG-Markup nicht direkt einfügen kannst.
Ja, Base64 macht die Daten um etwa 33 % größer. Bei sehr kleinen SVGs (unter 1–2 KB) lohnt sich das meist wegen der eingesparten HTTP-Anfrage. Größere SVGs lieferst du effizienter als separate Dateien mit sauberem Caching aus.
Beides lässt sich als Data-URI verwenden. URL-kodiertes SVG bleibt für Menschen lesbar und ist meist kleiner als Base64. Base64 wird von älteren E-Mail-Clients und in manchen Sonderfällen besser unterstützt. Dieses Tool liefert beide Varianten.
Ja. Einfache Icons, komplexe Illustrationen, animierte SVGs – jedes gültige SVG-Markup lässt sich kodieren. SVGs mit externen Verweisen (verlinkten Bildern oder Schriftarten) werden als Data-URI aber eventuell nicht korrekt dargestellt.