Base64 in SVG

So dekodieren Sie Base64 in SVG

1. Fügen Sie das Base64 ein, eine URI data:image/svg+xml;base64,... oder das CSS oder HTML, das sie enthält. URL-kodierte SVG-Data-URIs (data:image/svg+xml,%3Csvg...) funktionieren ebenfalls.
2. Die Vorschau zeichnet die Grafik und nennt ihre Abmessungen, oder „skalierbar“, wenn der Browser keine feste Größe meldet. Darunter steht der vollständige XML-Quelltext.
3. Drücken Sie Datei herunterladen, um eine .svg zu speichern, oder markieren Sie das Markup im Quelltextfeld, um es zu kopieren.

SVG ist reiner Text, das Dekodieren liefert also lesbares Markup. Neben dem Speichern der Datei finden Sie so heraus, was ein Icon in einem Stylesheet tatsächlich zeichnet, welche Farben es nutzt oder warum es nicht dargestellt wird.

SVG-Sicherheit: Bildvorschau und Inline-Markup

Eine SVG-Datei ist ein Dokument. Sie kann <script>-Elemente enthalten, Event-Attribute wie onload, Links, über <foreignObject> eingebettetes HTML und Verweise auf externe Bilder und Schriften. Was ein Browser damit macht, hängt davon ab, wie das SVG geladen wird:

Diese Seite dekodiert die Bytes und übergibt sie einem <img> als data:image/svg+xml;base64,...; was auch immer die Datei enthält, sie wird nur gezeichnet. Das Quelltextfeld zeigt den Text, ohne ihn zu interpretieren.

Wollen Sie das SVG inline in eine Seite einbauen, lesen Sie zuerst den Quelltext und achten Sie auf:

• <script>-Elemente und Attribute, die mit on beginnen, etwa onload oder onclick
• javascript: in href oder xlink:href
• <foreignObject>, das beliebiges HTML tragen kann
• href-Werte, die auf http://- oder https://-Adressen zeigen und sich für Tracking nutzen lassen
• <!ENTITY-Deklarationen, die manche serverseitigen XML-Parser gefährlich expandieren

Base64 verbirgt all das vor einem flüchtigen Blick, und deshalb kommt ein bösartiges SVG oft kodiert an. Base64 selbst schützt nichts; siehe Kodierung und Verschlüsselung.

Wie SVG erkannt wird

Die meisten SVG-Dateien beginnen mit <svg oder mit einer XML-Deklaration, ihr Base64 beginnt daher mit PHN2Zy oder PD94bWwg. Ein vorangestelltes UTF-8-Byte-Order-Mark fügt 77u/ hinzu, wie in 77u/PHN2Zy....

Das Tool behandelt die Daten als SVG, wenn das Tag <svg das erste Element ist, nachdem eine XML-Deklaration, Kommentare und eine Zeile <!DOCTYPE svg ...> übersprungen wurden, alles innerhalb der ersten 2 KB. Bei einer Data-URI, die image/svg+xml angibt, wird der angegebene Typ in jedem Fall verwendet. Ist ein SVG in etwas anderes eingebettet, etwa eine HTML-Seite, oder schiebt ein sehr langer Kommentar das Tag über 2 KB hinaus, erhalten Sie den Hinweis „Erkannt: Text, erwartet: SVG.“; tragen Sie image/svg+xml in MIME-Typ ein, um es darzustellen.

Wenn das SVG nicht dargestellt wird

• „Dieses SVG konnte nicht dargestellt werden“. Das XML ist fehlerhaft: ein nicht geschlossenes Tag, ein nicht maskiertes & oder eine abgeschnittene Zeichenkette, der das schließende </svg> fehlt. Sehen Sie sich zuerst das Ende des Quelltexts an.
• Hier wird es dargestellt, aber nicht auf Ihrer Website. Prüfen Sie, wie die Website es ausliefert. Bei einer Data-URI muss der Typ image/svg+xml sein; eine als text/plain oder application/octet-stream ausgelieferte Datei wird ebenfalls nicht als Bild dargestellt.
• Inline funktioniert es, als Data-URI nicht. Dem Wurzelelement fehlt xmlns="http://www.w3.org/2000/svg". Inline-SVG in HTML braucht es nicht, Bilder schon.
• Die Farben stimmen nicht. Ein als Bild verwendetes SVG kann weder currentColor noch CSS von der Seite erben. Es wird mit den Farben gezeichnet, die die Datei definiert, standardmäßig Schwarz.

Das dekodierte SVG im Code verwenden

Im Browser zeigen Sie ein Base64-SVG am sichersten an, indem es ein Bild bleibt:

const img = new Image();
img.src = "data:image/svg+xml;base64," + b64;
document.body.append(img);

Schreiben Sie stattdessen element.innerHTML = atob(b64), landet das Markup in Ihrer Seite, wo seine Skripte und Event-Handler mit den Rechten Ihrer Seite laufen. Beachten Sie außerdem, dass atob() Bytes als Latin-1-Zeichen zurückgibt, was Nicht-ASCII-Text im SVG kaputt macht; Base64 in JavaScript zeigt, wie Sie UTF-8 korrekt dekodieren. Um ein SVG zu kodieren, nutzen Sie SVG in Base64.

Häufige Fragen