Base64 a SVG

Cómo decodificar Base64 a SVG

1. Pega el Base64, una URI data:image/svg+xml;base64,... o el CSS o HTML que la contiene. También funcionan las data URI SVG codificadas para URL (data:image/svg+xml,%3Csvg...).
2. La vista previa dibuja el gráfico e indica sus dimensiones, o «escalable» cuando el navegador no da un tamaño fijo. Debajo está el código XML completo.
3. Pulsa Descargar archivo para guardar un .svg, o selecciona el código en el panel de código fuente para copiarlo.

SVG es texto plano, así que al decodificarlo obtienes un código legible. Además de guardar el archivo, puedes averiguar qué dibuja en realidad un icono de una hoja de estilo, qué colores usa o por qué no se renderiza.

Seguridad en SVG: vista previa como imagen frente a código en línea

Un archivo SVG es un documento. Puede contener elementos <script>, atributos de eventos como onload, enlaces, HTML incrustado mediante <foreignObject> y referencias a imágenes y fuentes externas. Lo que haga el navegador con todo eso depende de cómo se cargue el SVG:

Esta página decodifica los bytes y se los pasa a un <img> como data:image/svg+xml;base64,..., así que, contenga lo que contenga el archivo, solo se dibuja. El panel de código fuente muestra el texto sin interpretarlo.

Si piensas incrustar el SVG en línea en una página, lee antes el código fuente y busca:

• elementos <script> y atributos que empiecen por on, como onload u onclick
• javascript: en href o xlink:href
• <foreignObject>, que puede llevar HTML arbitrario
• valores href que apunten a direcciones http:// o https://, que pueden usarse para rastrear
• declaraciones <!ENTITY, que algunos analizadores XML del lado del servidor expanden de forma peligrosa

Base64 oculta todo esto a simple vista, y por eso los SVG maliciosos suelen llegar codificados. Base64 por sí mismo no protege nada; consulta codificación frente a cifrado.

Cómo se reconoce un SVG

La mayoría de los archivos SVG empiezan por <svg o por una declaración XML, así que su Base64 empieza por PHN2Zy o PD94bWwg. Una marca de orden de bytes UTF-8 delante añade 77u/, como en 77u/PHN2Zy....

La herramienta trata los datos como SVG cuando la etiqueta <svg es el primer elemento, tras saltarse una declaración XML, los comentarios y una línea <!DOCTYPE svg ...>, todo dentro de los primeros 2 KB. En una data URI que declara image/svg+xml se usa el tipo declarado en cualquier caso. Si un SVG está incrustado en otra cosa, como una página HTML, o un comentario muy largo empuja la etiqueta más allá de los 2 KB, aparece la nota «Esto no parece SVG»; escribe image/svg+xml en Tipo MIME para renderizarlo.

Cuando el SVG no se renderiza

• «No se pudo renderizar este SVG». El XML está mal formado: una etiqueta sin cerrar, un & sin escapar o una cadena truncada a la que le falta el </svg> de cierre. Mira primero el final del código fuente.
• Se renderiza aquí, pero no en tu sitio. Revisa cómo lo sirve el sitio. En una data URI, el tipo debe ser image/svg+xml; un archivo servido como text/plain o application/octet-stream tampoco se renderiza como imagen.
• Se renderiza en línea, pero no como data URI. Al elemento raíz le falta xmlns="http://www.w3.org/2000/svg". El SVG en línea dentro de HTML no lo necesita; las imágenes sí.
• Los colores no son los esperados. Un SVG usado como imagen no puede heredar currentColor ni el CSS de la página. Se dibuja con los colores que define el archivo, negro por defecto.

Usar el SVG decodificado en código

En el navegador, la forma segura de mostrar un SVG en Base64 es mantenerlo como imagen:

const img = new Image();
img.src = "data:image/svg+xml;base64," + b64;
document.body.append(img);

Si en su lugar escribes element.innerHTML = atob(b64), el código entra en tu página, donde sus scripts y manejadores de eventos se ejecutan con los privilegios de tu página. Ten en cuenta además que atob() devuelve los bytes como caracteres Latin-1, lo que estropea el texto no ASCII del SVG; Base64 en JavaScript muestra cómo decodificar UTF-8 correctamente. Para codificar un SVG, usa SVG a Base64.

Preguntas frecuentes