Konwersja Data URI z powrotem do edytowalnego SVG

SVG Data URI jest wygodne dla malych ikon inline w HTML lub CSS. Problem zaczyna sie wtedy, gdy masz tylko dlugi lancuch data:image/svg+xml... i potrzebujesz odzyskac edytowalny plik SVG.

Bezpieczna zasada jest prosta: podziel ciag na pierwszym przecinku, dekoduj tylko payload, a potem sprawdz SVG przed zapisem. Ten poradnik nawiazuje do dyskusji Stack Overflow Converting a data URI back to SVG.

Rozpoznaj format

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

Przed przecinkiem znajduje sie typ MIME i kodowanie. Po przecinku znajduje sie zakodowana tresc SVG.

Dekodowanie Base64

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 lepiej chroni tekst UTF-8, symbole i metadane niz zalozenie, ze SVG jest czystym ASCII.

Dekodowanie URL encoding

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

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

  return decodeURIComponent(payload);
}

Ten wariant czesto pojawia sie w tla CSS, bo przy prostych ikonach bywa krotszy i czytelniejszy.

Uniwersalny dekoder

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);
}

Po dekodowaniu sprawdz, czy wynik ma korzen <svg> i czy da sie go sparsowac jako XML.

Dobre praktyki

Zweryfikuj odzyskany XML.
Usun skrypty, event handlery, zewnetrzne referencje i foreignObject.
Sprawdz viewBox, rozmiar i przycinanie.
Otworz wynik w SVG Viewer.
Wyeksportuj nowy ciag w SVG to Data URI.

Typowe bledy

Dekodowanie calego lancucha zamiast samego payloadu.
Uzycie Base64 dla SVG zakodowanego jako URL.
Ponowne uzycie niezaufanego SVG bez sanitizacji.
Traktowanie escaping w CSS, HTML i JSON tak samo.

Workflow SVGView

Zdekoduj Data URI, wklej SVG do SVG Viewer, oczysc markup w SVG Sanitizer, zoptymalizuj w SVG Optimizer i wygeneruj nowy Data URI w SVG to Data URI.

Konwersja Data URI z powrotem do edytowalnego SVG