Convertidor de SVG a Base64

Convertir SVG a Base64

SVG (Scalable Vector Graphics) es el único formato de imagen web que se mantiene perfectamente nitido en cualquier nivel de zoom. Esta herramienta codifica archivos SVG a Base64 para incrustar como data URI en CSS, HTML o JavaScript.

Como Usarlo

1. Suelta un archivo SVG en el área de carga o haz clic para examinar
2. La herramienta lee el archivo y lo codifica a Base64
3. Selecciona tu formato de salida: Base64 plano, data URI o CSS background
4. Copia el resultado

SVG y Base64: Cuándo Tiene Sentido

SVG es único entre los formatos de imagen porque ya es texto (XML). Esto crea una opción que no existe con formatos binarios como PNG o JPEG: puedes incrustar SVG como Base64, texto codificado en URL o marcado en línea.

Data URI Base64

background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0...);

Los bytes SVG se codifican a Base64 y se envuelven en un data URI. El navegador lo decodifica y renderiza el SVG.

Data URI con URL encoding (generalmente mejor)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");

El XML del SVG se codifica con porcent encoding. Esto suele ser más pequeno que Base64 para SVGs porque SVG ya es texto y no se beneficia del paso de binario a texto.

SVG en línea

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

Marcado directamente en HTML. El enfoque más flexible: puedes estilizarlo con CSS, anadir animaciones y manipularlo con JavaScript. No requiere codificación.

Cuando Usar Base64 para SVG

Aunque el URL encoding suele ser más pequeno, los data URIs Base64 para SVG son la opción correcta cuando:

• El SVG va a un contexto que no soporta URL encoding (algunos clientes de correo, ciertos motores de plantillas)
• Necesitas almacenar el SVG en una carga JSON donde los caracteres codificados en URL requeririan escape adicional
• El SVG contiene caracteres problematicos para el URL encoding

Optimización de SVG Antes de la Codificación

Los SVGs sin optimizar de herramientas de diseño suelen incluir:

• Metadatos de editor (Illustrator, Sketch, Figma, Inkscape)
• Elementos <defs> no utilizados
• Precisión excesiva en coordenadas de trazado
• Estructura XML redundante

Ejecutar SVGO elimina estos. Un logo de 15 KB de Figma puede reducirse a 4 KB después de SVGO, lo que resulta en un string Base64 o URL encoding mucho más corto.