Anleitung
- Fügen Sie den Base64-String oder die data:image/svg+xml;base64-URI ein.
- Prüfen Sie die Vorschau sowie das erkannte Format und die Abmessungen.
- Belassen Sie „Herunterladen als“ auf SVG. Bei einer SVG-Eingabe wird die Datei als SVG-Text gespeichert.
- Laden Sie die .svg-Datei herunter und öffnen Sie sie in einem Editor, wenn Sie das Markup lesen oder ändern möchten.
SVG in Base64 erkennen
Anders als andere Bildformate ist SVG reiner XML-Text. Eine Datei, die mit <svg beginnt, ergibt Base64, das mit PHN2Zy anfängt; beginnt sie mit einer XML-Deklaration (<?xml), lautet der Anfang PD94bWwg. Base64-SVGs sind häufig in CSS-Hintergrundbildern, Icon-Sets, Exporten aus Designtools und E-Mail-Vorlagen zu finden. Der MIME-Typ ist image/svg+xml.
Viele SVG-Data-URIs sind gar kein Base64, sondern prozentkodierter Text, etwa data:image/svg+xml,%3Csvg.... Dieses Tool erwartet Base64; analysieren Sie solche URIs stattdessen mit dem Data-URI-Generator.
Den SVG-Code lesen
Die Vorschau zeigt, wie die Grafik dargestellt wird, interessant ist aber oft das Markup: Pfaddaten, Farben, eine viewBox oder eingebettete Schriften. Laden Sie die Datei als „Original“ oder SVG herunter und öffnen Sie sie in einem beliebigen Texteditor, oder fügen Sie denselben Base64-Text in Base64 dekodieren ein, um das XML sofort als Text zu sehen.
Raster zu SVG ist eine Hülle, keine Vektorisierung
Sind die Base64-Daten ein PNG, JPEG oder eine andere Bitmap, erzeugt die Auswahl von SVG eine SVG-Datei, die die ursprünglichen Pixel in einem <image>-Element enthält. Das ist nützlich, wenn ein Werkzeug nur SVG-Dateien akzeptiert, zeichnet das Bild aber nicht in Formen nach: Beim Vergrößern wird es weiterhin unscharf, und die Datei ist größer als die Bitmap, weil die Pixel darin als Base64 gespeichert sind. Für echte Vektorpfade verwenden Sie eine Vektorisierungssoftware wie Potrace oder die Funktion „Bitmap nachzeichnen“ in Inkscape.
Umgang mit nicht vertrauenswürdigem SVG
SVG kann <script>-Elemente, Event-Handler-Attribute und Verweise auf externe Ressourcen enthalten. Browser blockieren all das, wenn ein SVG als Bild angezeigt wird, also über ein <img>-Tag oder einen CSS-Hintergrund. Skripte können jedoch ausgeführt und externe Ressourcen geladen werden, wenn die Datei direkt in einem Browser-Tab geöffnet oder ihr Markup inline in eine Seite eingefügt wird. Prüfen oder bereinigen Sie SVG aus unbekannten Quellen, bevor Sie es auf diese Weise verwenden.
Häufig gestellte Fragen
Kann das Tool aus einem PNG ein echtes Vektor-SVG machen?
Nein. Bei der Konvertierung einer Bitmap in SVG wird das Bild lediglich in eine SVG-Datei eingebettet. Das Ergebnis skaliert wie die ursprüngliche Bitmap, nicht wie eine Vektorzeichnung.
Warum lässt sich meine SVG-Data-URI nicht dekodieren?
;base64, enthält. Falls nicht, ist das SVG prozentkodiert oder roher Text und kein Base64. Der Data-URI-Generator kann es analysieren.Ist es sicher, ein SVG aus unbekannter Quelle zu dekodieren?
Das Dekodieren und Speichern ist harmlos, denn das Ergebnis ist nur Text. Skripte in einem SVG können erst ausgeführt werden, wenn es als Dokument geöffnet oder inline in eine Webseite eingefügt wird.
Warum fehlen Schriften oder verlinkte Bilder, nachdem ich ein SVG in PNG konvertiert habe?
Zum Rastern lädt der Browser das SVG als Bild, und in diesem Modus kann ein SVG keine externen Dateien abrufen. Webfonts und verlinkte Bilder werden übersprungen, stattdessen kommen Standardschriften zum Einsatz. Betten Sie Schriften und Bilder in das SVG ein, damit es eigenständig ist.