Cómo se usa
- Pega la cadena Base64 o el URI data:image/svg+xml;base64.
- Revisa la vista previa y el formato y las dimensiones detectados.
- Deja SVG como formato de descarga. Si la entrada es SVG, el archivo se guarda como texto SVG.
- Descarga el archivo .svg y ábrelo en un editor si quieres leer o modificar el marcado.
Cómo encontrar un SVG dentro de Base64
A diferencia de otros formatos de imagen, SVG es texto XML plano. Un archivo que empieza por <svg se codifica en un Base64 que comienza por PHN2Zy, y uno que empieza con una declaración XML (<?xml) da un Base64 que comienza por PD94bWwg. Los SVG en Base64 son habituales en imágenes de fondo CSS, conjuntos de iconos, exportaciones de herramientas de diseño y plantillas de correo. El tipo MIME es image/svg+xml.
Muchos data URI de SVG no están en Base64, sino que son texto con codificación porcentual, como data:image/svg+xml,%3Csvg.... Esta herramienta espera Base64, así que analiza esos URI con el Generador de data URI.
Leer el código SVG
La vista previa muestra cómo se renderiza el gráfico, pero a menudo lo interesante es el marcado: los datos de los trazados, los colores, un viewBox o fuentes incrustadas. Descarga el archivo como Original o SVG y ábrelo en cualquier editor de texto, o pega el mismo Base64 en el decodificador Base64 para ver el XML como texto directamente.
De mapa de bits a SVG: un envoltorio, no una vectorización
Si los datos Base64 son un PNG, un JPEG u otro mapa de bits, al elegir SVG se genera un archivo SVG que contiene los píxeles originales en un elemento <image>. Resulta útil cuando una herramienta solo acepta archivos SVG, pero no convierte la imagen en formas: la imagen se sigue viendo borrosa al ampliarla, y el archivo es más grande que el mapa de bits porque los píxeles se guardan dentro como Base64. Para obtener trazados vectoriales reales, usa un programa de vectorización como Potrace o la función Vectorizar mapa de bits de Inkscape.
Cómo tratar SVG de origen desconocido
Un SVG puede contener elementos <script>, atributos de controladores de eventos y enlaces a recursos externos. Los navegadores bloquean todo esto cuando un SVG se muestra como imagen, mediante una etiqueta <img> o un fondo CSS. En cambio, los scripts pueden ejecutarse y los recursos externos pueden cargarse cuando el archivo se abre directamente en una pestaña del navegador o cuando su marcado se pega en línea dentro de una página. Revisa o sanea los SVG de fuentes desconocidas antes de usarlos de esa manera.
Preguntas frecuentes
¿Puede convertir un PNG en un SVG vectorial real?
No. Convertir un mapa de bits a SVG solo incrusta la imagen dentro de un archivo SVG. El resultado escala como el mapa de bits original, no como un dibujo vectorial.
¿Por qué no se decodifica mi data URI de SVG?
;base64,. Si no es así, el SVG tiene codificación porcentual o es texto sin codificar, y no está en Base64. El Generador de data URI puede analizarlo.¿Es seguro decodificar un SVG de origen desconocido?
Decodificarlo y guardarlo es inofensivo, porque el resultado es solo texto. Los scripts de un SVG solo pueden ejecutarse cuando se abre como documento o se inserta en línea en una página web.
¿Por qué faltan fuentes o imágenes enlazadas al convertir un SVG a PNG?
Para rasterizar un SVG, el navegador lo carga como imagen, y en ese modo un SVG no puede descargar archivos externos. Las fuentes web y las imágenes enlazadas se omiten y se usan fuentes predeterminadas en su lugar. Incrusta las fuentes y las imágenes en el SVG para que sea autónomo.