Anleitung
- Legen Sie eine .svg-Datei auf dem Ablagebereich ab, klicken Sie darauf, um eine Datei auszuwählen, oder fügen Sie ein Bild ein.
- Wählen Sie unter „Konvertieren in“ die Option „Original beibehalten“, um das SVG-Markup selbst zu kodieren, oder PNG, JPEG bzw. WebP, um es in Pixel umzuwandeln.
- Wenn Sie rastern, steuern Sie die Pixelgröße über „Max. Breite“.
- Kopieren Sie die Ausgabe als CSS-background-image für ein Stylesheet, oder verwenden Sie die Data-URI, reines Base64, den img-Tag oder die Markdown-Version.
SVG als Data-URI
SVG (Scalable Vector Graphics, MIME-Typ image/svg+xml) beschreibt Formen als XML-Text und bleibt daher in jeder Größe scharf. Das Base64 beginnt meist mit PHN2Zy (das kodierte <svg) oder mit PD94bWw, wenn die Datei mit einer XML-Deklaration beginnt.
Wird ein SVG als Bild verwendet, muss das Wurzelelement xmlns="http://www.w3.org/2000/svg" tragen. Viele aus HTML kopierte Inline-Snippets lassen es weg, und die Data-URI zeigt dann nichts an. Im Bildmodus werden außerdem externe Ressourcen blockiert, sodass Webfonts und verlinkte Bilder im SVG nicht geladen werden; wandeln Sie Text vorher in Pfade um oder betten Sie diese Ressourcen ein.
Base64 oder URL-Kodierung?
Da SVG bereits Text ist, kann eine Data-URI das Markup direkt transportieren, wobei nur wenige Zeichen prozentkodiert werden (<, >, #, % und Anführungszeichen). Für ein typisches Icon in CSS ist das kürzer als Base64 und lässt sich mit gzip besser komprimieren. Base64 ist die sicherere Wahl, wenn der String Systeme durchläuft, die Anführungszeichen oder Sonderzeichen verfälschen, oder wenn eine API Base64 erwartet.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Prozentkodiert */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Um die prozentkodierte Form zu erzeugen, verwenden Sie den Data-URI-Generator und wählen „Prozentkodierung“.
Nicht vertrauenswürdige SVGs bereinigen
SVG kann <script>-Elemente, Event-Handler-Attribute wie onload und Links zu anderen Dokumenten enthalten. Browser führen keine Skripte in einem SVG aus, das über <img> oder als CSS-Hintergrund angezeigt wird, doch dieselbe Datei kann sie ausführen, wenn sie direkt in HTML eingebettet oder einzeln geöffnet wird. Wenn Benutzer SVG-Dateien in Ihre Anwendung hochladen können, bereinigen Sie diese, etwa mit DOMPurify, bevor Sie sie speichern oder einbetten. Base64 verbirgt das Markup nur vor einem flüchtigen Blick; sicher wird es dadurch nicht.
Häufig gestellte Fragen
Ist Base64 oder URL-Kodierung besser für SVG?
Für SVG in CSS ist die URL-Kodierung meist kürzer und bleibt lesbar. Base64 ist robuster, wenn der String andere Systeme durchläuft oder eine API Base64 verlangt.
Warum wird meine SVG-Data-URI nicht angezeigt?
xmlns-Attribut am Wurzelelement, ein nicht maskiertes # in einer prozentkodierten URI sowie Schriften oder Bilder, die das SVG aus anderen Dateien lädt.Kann ich ein SVG in einen PNG-Base64-String umwandeln?
Ja. Wählen Sie PNG als Zielformat. Der Browser rendert das SVG in Pixel, und mit der Option „Max. Breite“ können Sie das Ergebnis verkleinern.