Data URI zurück in SVG umwandeln: Sicherer Leitfaden

Data URI zurück in SVG umwandeln

SVG Data URIs sind praktisch fuer kleine Inline-Icons in HTML oder CSS. Schwieriger wird es, wenn Sie nur noch eine lange data:image/svg+xml... Zeichenkette haben und daraus wieder eine bearbeitbare SVG-Datei machen muessen.

Die Grundregel: Nur den Teil nach dem Komma dekodieren, das Ergebnis als SVG validieren und erst danach speichern oder weiterverwenden. Dieser Ablauf orientiert sich an der Stack Overflow Diskussion Converting a data URI back to SVG.

Erst das Format erkennen

Typische SVG Data URIs sehen so aus:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...
data:image/svg+xml,%3Csvg%20xmlns%3D%22http...

Alles vor dem Komma beschreibt MIME-Typ und Kodierung. Alles danach ist die eigentliche SVG-Nutzlast.

Base64 dekodieren

function dataUriBase64ToSvg(dataUri) {
  const [, payload] = dataUri.split(",", 2);

  if (!payload) {
    throw new Error("Invalid SVG Data URI");
  }

  return new TextDecoder().decode(
    Uint8Array.from(atob(payload), (char) => char.charCodeAt(0)),
  );
}

TextDecoder ist robuster als eine ASCII-Annahme, besonders wenn Texte, Symbole oder Metadaten im SVG enthalten sind.

URL-kodierte SVG dekodieren

function dataUriEncodedToSvg(dataUri) {
  const [, payload] = dataUri.split(",", 2);

  if (!payload) {
    throw new Error("Invalid SVG Data URI");
  }

  return decodeURIComponent(payload);
}

Diese Variante ist oft in CSS-Hintergruenden zu finden, weil sie bei einfachen Icons kuerzer und lesbarer bleibt.

Sicherer Universal-Decoder

function dataUriToSvg(dataUri) {
  const [header, payload] = dataUri.split(",", 2);

  if (!header?.startsWith("data:image/svg+xml") || !payload) {
    throw new Error("Expected an SVG Data URI");
  }

  if (header.includes(";base64")) {
    return new TextDecoder().decode(
      Uint8Array.from(atob(payload), (char) => char.charCodeAt(0)),
    );
  }

  return decodeURIComponent(payload);
}

Pruefen Sie danach, ob ein echtes <svg> Wurzelelement vorhanden ist und ob XML-Parsing funktioniert.

Best Practices

XML nach dem Dekodieren validieren.
Skripte, Event-Handler, externe Referenzen und foreignObject entfernen.
viewBox, Groesse und Clipping pruefen.
Das Ergebnis in SVG Viewer ansehen.
Eine frische Data URI mit SVG to Data URI exportieren.

Haefige Fehler

Die komplette Data URI statt nur der Nutzlast dekodieren.
URL-Encoding mit Base64 verwechseln.
Ungeprueftes SVG-Markup wiederverwenden.
CSS-, HTML- und JSON-Escaping gleich behandeln.

SVGView Workflow

Dekodieren Sie die Data URI, pruefen Sie die Datei in SVG Viewer, bereinigen Sie sie mit SVG Sanitizer, optimieren Sie sie mit SVG Optimizer und exportieren Sie bei Bedarf erneut mit SVG to Data URI.

Data URI zurück in SVG umwandeln: Sicherer Leitfaden