SVG a Data URI para CSS
Pega código SVG o abre un archivo .svg para obtener un data URI compacto y codificado en URL, listo para background-image, mask-image o una etiqueta img. La herramienta minifica el SVG, codifica solo los caracteres necesarios, compara el tamaño con Base64 y muestra una vista previa en vivo.
Última actualización:
Comparación de tamaño
Cómo usar SVG a Data URI para CSS
- Pega tu SVG en el cuadro, o abre o arrastra un archivo .svg.
- Elige la codificación: codificación URL optimizada (normalmente la más pequeña) o Base64.
- Elige la salida: background-image de CSS, máscara CSS, data URI sin más o una etiqueta img de HTML.
- Revisa la vista previa y las barras de tamaño para confirmar que el icono se muestra y ver cuánto más pequeña es la codificación URL que Base64.
- Copia el código en tu hoja de estilos o en tu HTML, o descárgalo.
Por qué el SVG codificado en URL supera a Base64
Base64 convierte cada 3 bytes en 4 caracteres, así que un data URI en Base64 siempre es aproximadamente un 33% más grande que el SVG. La codificación URL deja intactos las letras, los dígitos, los espacios y la mayoría de los signos de puntuación y solo escapa unos pocos caracteres, por lo que un icono típico crece apenas un pequeño porcentaje. Como el resultado sigue siendo texto legible, gzip y Brotli también lo comprimen mejor.
| Carácter | Se codifica como | Motivo |
|---|---|---|
# | %23 | Iniciaría un fragmento de URL y cortaría el SVG, una causa habitual de colores hexadecimales rotos |
% | %25 | Inicia un escape de porcentaje |
< > | %3C %3E | No se permiten sin escapar en las URL; los navegadores antiguos los rechazan |
" | ' o %22 | Cerraría url("…"); los atributos se cambian a comillas simples |
| Saltos de línea | eliminados o %0A | No se permiten dentro de una cadena CSS |
{ } | \ ^ ` [ ] | codificados en porcentaje | No seguros en URL |
| é, emojis y otros caracteres no ASCII | Bytes UTF-8 en porcentaje | Los data URI solo admiten ASCII |
¿Imagen de fondo o máscara?
- background-image dibuja el SVG con sus propios colores. Úsalo para ilustraciones multicolor, patrones y formas decorativas.
- mask-image usa el SVG solo como plantilla y lo rellena con el
background-colordel elemento. Definebackground-color: currentColory el icono seguirá el color del texto, los estados hover y el modo oscuro, algo que una imagen de fondo no puede hacer. Incluye la línea-webkit-maskpara versiones antiguas de Safari y Chromium.
Consejos para data URI pequeños y fiables
- Pasa primero los SVG grandes por un optimizador de SVG: eliminar los datos del editor y redondear las coordenadas de los trazados suele reducir el tamaño a la mitad.
- Conserva un
viewBoxpara que la imagen se escale bien conbackground-size. - Escribe los colores en hexadecimal corto (
#fff) o con nombre: cada#ocupa tres caracteres una vez codificado. - Reutiliza el mismo data URI mediante una propiedad personalizada de CSS, p. ej.
--icon: url("…"), en lugar de repetirlo en muchas reglas.
Preguntas frecuentes
¿Cómo uso un SVG como imagen de fondo en CSS?
Convierte el SVG en un data URI y ponlo dentro de url(): background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' …%3E…%3C/svg%3E"). Pega tu SVG arriba y copia la regla ya preparada. El SVG debe incluir xmlns="http://www.w3.org/2000/svg", que la herramienta añade si falta.
¿Es mejor la codificación URL o Base64 para data URI de SVG?
Normalmente la codificación URL es mejor. El SVG es texto, así que codificar en porcentaje solo unos pocos caracteres lo mantiene legible y suele ser entre un 20% y un 30% más pequeño que Base64, que siempre añade un 33%. Además se comprime mejor con gzip o Brotli porque el texto sigue siendo repetitivo. Base64 es útil sobre todo cuando un sistema no acepta caracteres especiales en las URL.
¿Qué caracteres hay que codificar en un data URI de SVG?
Como mínimo % y # (la almohadilla iniciaría un fragmento de URL, así que fill="#f00" debe convertirse en %23f00), además de < y > y la comilla usada alrededor de la URL. Los saltos de línea deben eliminarse o codificarse. Esta herramienta también codifica { } | \ ^ ` [ ] y los caracteres no ASCII por seguridad, y cambia las comillas dobles de los atributos por comillas simples.
¿Por qué currentColor no funciona en una imagen de fondo SVG?
Un SVG usado como background-image o img se renderiza como una imagen aislada e independiente, así que no puede heredar CSS de tu página como el color, las fuentes o los estados hover. Para cambiar el color de un icono con CSS, úsalo como mask-image y define background-color en el elemento, que es lo que hace la salida de máscara CSS.
¿Por qué no se ve mi data URI de SVG?
Las causas habituales son la falta del atributo xmlns, un # sin codificar en un color, comillas dobles sin escapar dentro de url("…") o XML no válido. Las imágenes, fuentes y scripts externos dentro del SVG también se bloquean cuando se usa como imagen. La vista previa y la comprobación de renderizado de arriba señalan estos problemas.
¿Un data URI hace más rápida mi página?
En iconos pequeños ahorra una petición HTTP y evita un parpadeo mientras se carga el icono. En imágenes grandes o repetidas puede ser más lento, porque el data URI se descarga de nuevo dentro de cada hoja de estilos o página que lo contiene y no se puede almacenar en caché por separado. Mantén los SVG en línea en unos pocos kilobytes.
¿Se sube mi SVG?
No. La minificación, la codificación y la vista previa se hacen por completo en tu navegador, así que tu diseño se queda en tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.