Codificación SVG
Convertidor de SVG a Base64
Convierte archivos SVG a data URIs Base64 para etiquetas HTML img, fondos CSS y cadenas JavaScript.
4.8 / 5 124 valoraciones
Espacio de trabajo SVG a Base64
Sube un SVG y copia un data URI para uso inline en el código.
Arrastra y suelta un SVG aquí, o haz clic para elegir un archivo
Tamaño máximo de archivo 2 MB
¿Necesitas ayuda para usar SVG Base64 en el código? Lee la guía HTML, CSS y JavaScript
Convertir SVG a Base64
Los archivos SVG son imágenes vectoriales basadas en XML. Cuando conviertes svg a base64, transformas el archivo en una única cadena de texto que puedes pegar en JSON, JavaScript o plantillas heredadas.
Esta herramienta genera un URI data:image/svg+xml;base64,... que puedes copiar desde la pestaña Data URI.
Formato Data URI SVG
El URI codificado conserva el tipo MIME SVG para que los navegadores lo rendericen como imagen vectorial.
Si necesitas un valor data image svg xml base64, copia el URI completo desde la salida del convertidor y pégalo en tu código.
Usa las pestañas HTML o CSS cuando quieras un fragmento listo en lugar de la cadena sin procesar.
SVG Base64 vs SVG Inline
El marcado SVG inline es más fácil de estilizar con CSS y a menudo produce un peso de página menor.
SVG Base64 funciona mejor cuando necesitas una única cadena codificada para configuraciones, variables JavaScript o sistemas que no aceptan bloques XML sin procesar.
Usar SVG Base64 en HTML y CSS
En HTML, coloca el data URI dentro del atributo src de una etiqueta img cuando necesites un patrón base64 img tag para iconos vectoriales.
En CSS, usa valores background image base64 con background-image: url("data:image/svg+xml;base64,..."); para iconos, insignias y recursos decorativos.
Problemas Comunes al Codificar SVG
Los archivos SVG grandes crean cadenas Base64 largas difíciles de leer y mantener en el código fuente.
Algunas características SVG se comportan de forma distinta cuando cargas la imagen mediante una etiqueta img en lugar de SVG inline.
Páginas Relacionadas
Preguntas Frecuentes
Solo cuando necesites una única cadena codificada. Para la mayoría de páginas web, SVG inline es más simple y flexible.
Sí. Usa el URI codificado como valor de background-image en CSS.