Converter Data URI de volta para SVG editavel

SVG Data URI e pratico para pequenos icones inline em HTML ou CSS. O problema surge quando voce recebe uma string longa data:image/svg+xml... e precisa voltar para um SVG editavel.

A regra segura e simples: separe a string na primeira virgula, decodifique apenas o payload e valide o SVG antes de salvar. Este guia foi inspirado pela discussao do Stack Overflow Converting a data URI back to SVG.

Identifique o formato

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

Antes da virgula ficam o tipo MIME e a codificacao. Depois da virgula fica o conteudo SVG codificado.

Decodificar 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 preserva melhor texto UTF-8, simbolos e metadados do que uma conversao ASCII improvisada.

Decodificar URL encoding

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

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

  return decodeURIComponent(payload);
}

Esse formato aparece bastante em backgrounds CSS porque pode ser mais curto e facil de revisar.

Decoder universal

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

Depois de decodificar, confirme que existe uma raiz <svg> e que o resultado pode ser lido como XML.

Boas praticas

Valide o XML recuperado.
Remova scripts, manipuladores de evento, referencias externas e foreignObject.
Verifique viewBox, tamanho e recorte.
Abra o resultado no SVG Viewer.
Exporte novamente com SVG to Data URI.

Erros comuns

Decodificar a string inteira em vez do payload.
Usar Base64 em um SVG codificado como URL.
Reutilizar SVG nao confiavel sem sanitizar.
Esquecer que CSS, HTML e JSON exigem escaping diferente.

Workflow SVGView

Decodifique o Data URI, cole o SVG no SVG Viewer, limpe o markup com SVG Sanitizer, otimize com SVG Optimizer e gere uma nova string com SVG to Data URI.

Converter Data URI de volta para SVG editavel