Convertire un Data URI in SVG modificabile: guida sicura

Convertire un Data URI in SVG modificabile

Gli SVG Data URI sono comodi per piccole icone inline in HTML o CSS. Diventano meno comodi quando hai solo una lunga stringa data:image/svg+xml... e devi recuperare un SVG modificabile.

La regola e semplice: separa la stringa alla prima virgola, decodifica solo il payload e valida l'SVG prima di salvarlo. Questa guida prende spunto dalla discussione Stack Overflow Converting a data URI back to SVG.

Riconosci il formato

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

Prima della virgola trovi tipo MIME e codifica. Dopo la virgola trovi il contenuto SVG codificato.

Decodificare 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 conserva meglio testo UTF-8, simboli e metadati rispetto a una conversione ASCII improvvisata.

Decodificare URL encoding

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

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

  return decodeURIComponent(payload);
}

Questa forma e frequente nei background CSS perche puo restare piu corta e leggibile.

Decoder universale

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

Dopo la decodifica, verifica che esista una radice <svg> e che il risultato sia XML valido.

Buone pratiche

Valida l'XML recuperato.
Rimuovi script, event handler, riferimenti esterni e foreignObject.
Controlla viewBox, dimensioni e clipping.
Apri il risultato in SVG Viewer.
Esporta una nuova stringa con SVG to Data URI.

Errori comuni

Decodificare l'intera stringa invece del payload.
Usare Base64 su SVG codificato come URL.
Riutilizzare SVG non affidabile senza sanificazione.
Dimenticare che CSS, HTML e JSON richiedono escaping diverso.

Workflow SVGView

Decodifica il Data URI, incolla l'SVG in SVG Viewer, pulisci il markup con SVG Sanitizer, ottimizza con SVG Optimizer e rigenera la Data URI con SVG to Data URI.

Convertire un Data URI in SVG modificabile: guida sicura