SVG a Base64
Pega un SVG, un data URI o la URL de una imagen, o suelta un archivo. La herramienta codifica automáticamente, decodifica los data URI de SVG de vuelta a marcado y prepara un resultado listo para CSS.
Código de entrada
Pega un SVG o un data URI codificado. También puedes soltar un archivo o cargar una imagen desde una URL.
Resultado principal
El resultado codificado aparecerá aquí automáticamente
Pega algo a la izquierda y la transformación empezará automáticamente
Cómo funciona SVG a Base64
Codifica archivos SVG como data URI en Base64 o decodifícalos de vuelta a marcado. Obtén un resultado listo para CSS e insertarlo en línea.
SVG a data URI
Codifica cualquier archivo o marcado SVG como data URI en Base64, listo para usarlo en línea en CSS, HTML o JavaScript. Ahórrate una solicitud HTTP por cada icono.
Decodificar de vuelta a SVG
Pega un data URI codificado en Base64 y la herramienta extraerá al instante el marcado SVG original. Inspecciona o edita SVG insertados sin herramientas externas.
Resultado listo para CSS
Obtén un fragmento de CSS con background-image que puedes pegar directamente en tu hoja de estilos. El resultado está codificado para URL y optimizado para ocupar lo mínimo.
Varias formas de entrada
Pega código SVG, suelta un archivo .svg o introduce la URL de un SVG. La herramienta detecta automáticamente el tipo de entrada y lo convierte al instante.
Preguntas frecuentes
Insertar SVG como data URI en Base64 elimina una solicitud HTTP, lo que puede mejorar el tiempo de carga de iconos pequeños y elementos de la interfaz. Es especialmente útil en CSS, donde no puedes insertar el marcado SVG directamente.
Sí, Base64 añade aproximadamente un 33 % de tamaño. En SVG muy pequeños (menos de 1-2 KB) suele compensar por la solicitud HTTP que te ahorras. Para SVG más grandes, es más eficiente servirlos como archivos separados con una buena caché.
Ambos se pueden usar como data URI. El SVG codificado para URL mantiene el marcado legible y suele ser más pequeño que Base64. Base64 tiene mejor compatibilidad con clientes de correo antiguos y algunos casos límite. Esta herramienta te ofrece ambas opciones.
Sí. Iconos sencillos, ilustraciones complejas, SVG animados: se puede codificar cualquier marcado SVG válido. Sin embargo, los SVG con referencias externas (imágenes o fuentes enlazadas) pueden no mostrarse correctamente cuando se insertan como data URI.