Conversor de SVG a Data URI — SVG en línea como fondo CSS
Convierte código SVG a data URIs para usarlos en background-image de CSS, etiquetas img de HTML o incrustación en línea. Elige entre el formato codificado como URL (más pequeño) o Base64. Previsualiza tu SVG y copia fragmentos de código listos para usar.
¿Por qué convertir SVG a data URI?
Los data URIs de SVG te permiten incrustar gráficos vectoriales directamente en CSS o HTML sin solicitudes HTTP separadas. Esto resulta especialmente útil para iconos pequeños, logotipos y elementos de la interfaz, donde la sobrecarga de una solicitud HTTP supera el tiempo de transferencia del archivo.
Hay dos métodos de codificación: la codificación como URL (recomendada para SVG) conserva la legibilidad y suele ser más pequeña, mientras que la codificación en Base64 produce una cadena más larga pero evita posibles problemas de análisis con caracteres especiales en algunos contextos.
Ventajas de la codificación como URL
- Normalmente un 20-30 % más pequeña que Base64 para archivos SVG
- Parcialmente legible para los humanos: aún puedes ver la estructura del SVG
- Recomendada por la mayoría de las guías de optimización del rendimiento
Buenas prácticas
- Minifica tu SVG antes de convertirlo (elimina comentarios, espacios en blanco y metadatos del editor)
- Usa data URIs para SVGs pequeños de menos de 10KB; los archivos más grandes deberían ser externos
- Establece siempre xmlns='http://www.w3.org/2000/svg' en tu SVG para garantizar la compatibilidad con data URI
Preguntas frecuentes
¿Debería usar la codificación como URL o Base64 para los data URIs de SVG?
Se recomienda la codificación como URL para SVG. Produce una salida más pequeña (normalmente un 20-30 % más pequeña que Base64) y mantiene el SVG parcialmente legible. Usa Base64 solo si encuentras problemas de análisis con caracteres especiales en tu contexto específico.
¿Por qué no se renderiza mi SVG en el data URI?
Asegúrate de que tu SVG incluya el atributo xmlns (xmlns='http://www.w3.org/2000/svg'). Comprueba también que no haya caracteres especiales sin escapar como # en los valores de color, y que el SVG sea XML bien formado.
¿Cuál es el tamaño máximo para los data URIs de SVG?
No hay un límite estricto en los navegadores modernos, pero el rendimiento se degrada con data URIs grandes. Mantén los data URIs de SVG por debajo de 10KB para obtener mejores resultados. Para SVGs más grandes, usa un archivo externo servido a través de una CDN.
¿Puedo usar data URIs de SVG en propiedades personalizadas de CSS?
Sí. Puedes almacenar un data URI de SVG en una propiedad personalizada de CSS (variable) y usarlo con url(). Es un patrón excelente para la tematización, ya que te permite intercambiar iconos cambiando el valor de una sola variable.
Herramientas relacionadas
Codificador y decodificador Base64 en línea
Codifica o decodifica cadenas Base64 directamente en tu navegador
Codificador y decodificador de texto
Convierte texto a Base64 o decodifica Base64 a texto plano
Imagen a Base64
Convierte imágenes a cadenas codificadas Base64
Base64 a imagen
Decodifica cadenas Base64 a imágenes visibles
Archivo a Base64
Codifica cualquier archivo a una cadena Base64
Base64 a archivo
Decodifica cualquier cadena Base64 de vuelta a su archivo original
Base64 a PDF
Decodifica cadenas Base64 a documentos PDF
Decodificador JWT
Decodifica e inspecciona tokens JWT
Codificador/Decodificador URL
Codifica o decodifica URLs con codificación porcentual
Codificador/Decodificador HTML
Convierte caracteres especiales a entidades HTML y viceversa
Convertidor Hex ↔ Base64
Convierte entre formatos hexadecimal y Base64
Base64 a texto
Decodifica cadenas Base64 a texto legible
Validador de Base64
Comprueba si una cadena es una codificación Base64 válida
Base64 a JSON
Decodifica Base64 y muéstralo con formato JSON legible
Generador de Data URI
Genera Data URIs en Base64 a partir de texto o archivos
Base64 a hexadecimal
Convierte cadenas Base64 a hexadecimal y viceversa
Codificador y decodificador UTF-8
Codifica texto a bytes UTF-8 o decodifica bytes a texto