Convertir un Data URI a SVG editable: Guia segura

Convertir un Data URI a SVG editable

Los SVG Data URI son utiles para iconos pequenos en HTML o CSS. El problema aparece cuando solo tienes una cadena larga data:image/svg+xml... y necesitas volver a un SVG editable.

La regla practica es clara: separa la cadena por la primera coma, decodifica solo la parte posterior y valida el SVG antes de guardarlo. Esta guia toma como referencia la conversacion de Stack Overflow Converting a data URI back to SVG.

Identifica el tipo de Data URI

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

Antes de la coma esta el tipo MIME y la codificacion. Despues de la coma esta el contenido del SVG.

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 ayuda a conservar texto UTF-8, simbolos y metadatos que no encajan bien en una suposicion ASCII.

Decodificar URL encoding

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

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

  return decodeURIComponent(payload);
}

Este formato suele aparecer en fondos CSS porque puede ser mas corto y 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);
}

Despues, confirma que existe una raiz <svg> y que el resultado se puede parsear como XML.

Buenas practicas

Valida el XML recuperado.
Elimina scripts, manejadores de eventos, referencias externas y foreignObject.
Revisa viewBox, anchura, altura y recortes.
Previsualiza el resultado en SVG Viewer.
Si necesitas otro Data URI, exportalo con SVG to Data URI.

Errores frecuentes

Decodificar toda la cadena en lugar de solo el payload.
Usar Base64 sobre un SVG codificado como URL.
Reutilizar SVG no confiable sin sanitizarlo.
Olvidar que CSS, HTML y JSON escapan caracteres de forma distinta.

Flujo recomendado en SVGView

Decodifica el Data URI, pegalo en SVG Viewer, limpia el marcado con SVG Sanitizer, reduce peso con SVG Optimizer y genera una nueva cadena con SVG to Data URI.

Convertir un Data URI a SVG editable: Guia segura