Conversor de SVG a CSS Data URI y Background-Image
Convierte código SVG a formato Data URI optimizado para CSS background-image, HTML y Base64 con previsualización en tiempo real.
Opciones de Codificación
¿Qué es un Data URI para SVG y por qué utilizarlo en CSS?
Un Data URI (Uniform Resource Identifier) es un esquema que permite incrustar recursos multimedia directamente dentro de archivos de código como hojas de estilo CSS o documentos HTML, en lugar de cargarlos a través de peticiones HTTP externas. En el caso de gráficos vectoriales SVG, utilizar un Data URI como valor de la propiedad background-image resulta especialmente ventajoso.
Al integrar tus iconos y patrones SVG directamente en el archivo CSS, eliminas solicitudes de red adicionales, aceleras el renderizado inicial y evitas el parpadeo de iconos durante la carga de la página. Esta herramienta se encarga de convertir de manera automática y segura el marcado SVG en una cadena codificada lista para copiar y pegar.
Codificación URL-Encoded frente a Base64
Existen dos formas principales de incrustar SVG en CSS:
- URL-Encoded (Recomendado): Mantiene el SVG legible en UTF-8 reemplazando caracteres especiales como almohadillas (
#), comillas y barras diagonales. Produce archivos más compactos (generalmente entre un 20% y un 30% más pequeños que Base64) y permite editar colores directamente en el CSS. - Base64: Convierte toda la cadena binaria en un bloque alfanumérico estándar. Es ampliamente compatible, aunque añade un sobrepeso de aproximadamente un 33% al tamaño del archivo.
Cómo utilizar el Conversor de SVG a Data URI
- Pega tu código SVG: Introduce el marcado XML de tu archivo SVG en el área de texto correspondiente o haz clic en "Cargar Ejemplo".
- Selecciona las opciones: Elige entre codificación URL estándar o Base64, y decide si deseas optimizar las comillas y minificar los espacios en blanco.
- Revisa la previsualización: Comprueba visualmente que el icono o gráfico se renderiza de forma correcta y verifica el tamaño resultante en bytes.
- Copia el código generado: Utiliza los botones de copiado rápido para obtener la propiedad CSS completa, el Data URI sin formato o la etiqueta
<img>de HTML.
Ventajas de optimizar tus vectores en el navegador
Esta aplicación web procesa todo el contenido localmente mediante las APIs nativas de JavaScript de tu navegador. Tus gráficos no se envían a ningún servidor externo, garantizando total privacidad, rapidez instantánea y disponibilidad sin necesidad de instalar dependencias ni herramientas de compilación pesadas.