Kodiert SVG-Markup als URL-kodiertes oder base64-Data-URI, mit einsatzbereiten CSS-background-image- und <img>-Zeilen. Optionales Minify.
— Ausgabe erscheint hier —
— Ausgabe erscheint hier —
— Ausgabe erscheint hier —
Über dieses Tool
Fügen Sie rohes SVG-Markup ein und erhalten Sie ein Data-URI, das Sie direkt in CSS oder HTML einsetzen können. Es erzeugt zwei Kodierungen und alles wird in Ihrem Browser generiert, sodass nichts hochgeladen wird.
Die URL-kodierte Ausgabe tauscht doppelte Anführungszeichen gegen einfache, führt encodeURIComponent aus und stellt dann einige sichere Zeichen (Leerzeichen, Doppelpunkt, Schrägstrich, Gleichheitszeichen) wieder her, um sie kompakt und menschenlesbar zu halten. Die base64-Ausgabe kodiert das SVG als UTF-8 und führt es durch btoa, was data:image/svg+xml;base64,… ergibt. Ein Byte-Vergleich zeigt, welche Kodierung kleiner ist; für die meisten Icons gewinnt die URL-kodierte Form.
Aktivieren Sie Minify, um Kommentare zu entfernen und die Leerräume zwischen Tags vor dem Kodieren zu reduzieren. Kopieren Sie die background-image-Zeile für CSS oder die <img src>-Zeile für HTML. Beachten Sie, dass Anführungszeichen im SVG zu einfachen Anführungszeichen normalisiert werden, sodass das Data-URI sicher in doppelte Anführungszeichen gefasst werden kann.
Häufig gestellte Fragen
URL-kodiert oder base64 – was sollte ich verwenden?
URL-kodiert ist meist kleiner und bleibt lesbar, was beim Debuggen hilft. Base64 ist undurchsichtiger, aber universell akzeptiert; der Größenvergleich sagt Ihnen, was hier kleiner ist.
Warum wurden meine doppelten Anführungszeichen zu einfachen geändert?
Attribut-Anführungszeichen werden zu einfachen umgewandelt, sodass das gesamte Data-URI ohne Escapen in einem doppelt gequoteten url("…") oder src="…" sitzen kann. Beide sind in SVG gültig.
Ändert Minify das Aussehen des SVG?
Nein. Es entfernt nur Kommentare und reduziert Leerräume zwischen und innerhalb von Tags; der gerenderte Vektor ist identisch, nur kleiner.
Wird mein SVG irgendwohin hochgeladen?
Nein. Das Kodieren läuft vollständig in Ihrem Browser mit encodeURIComponent und btoa; das Markup verlässt nie Ihr Gerät.