Cómo funciona
Convierte el código de un SVG en un Data URI listo para usar en CSS, de modo que puedas incrustar el ícono directamente en la hoja de estilos sin un archivo aparte ni una petición HTTP adicional.
Ofrece dos codificaciones: URL-encoded (percent-encoding), más corta y legible, recomendada para SVG; y Base64, algo más larga pero universalmente compatible.
El resultado se puede generar como background-image, como mask-image (para colorear el ícono con CSS) o como variable CSS reutilizable. Minificar el SVG antes reduce aún más el tamaño.
Ejemplos
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");La codificación URL mantiene el SVG casi legible y suele ser más corta que Base64.-webkit-mask-image: url("data:image/svg+xml,…");
mask-image: url("data:image/svg+xml,…");Como mask-image, el color del ícono se controla con la propiedad background-color del elemento.Casos de uso
- Incrustar íconos SVG como background-image sin sumar peticiones HTTP a la página.
- Usar un SVG como máscara (mask-image) para recolorearlo desde CSS según el tema o el estado.
- Guardar un ícono en una variable CSS y reutilizarlo en varios selectores.
- Reducir el peso de íconos inline minificando el SVG antes de incrustarlo.
Preguntas frecuentes
¿Conviene URL-encoded o Base64?
Para SVG, URL-encoded suele ser la mejor opción: genera un Data URI más corto y legible porque el SVG es texto. Base64 aporta compatibilidad máxima, pero agrega alrededor de un 33% de tamaño.
¿Por qué usar mask-image en vez de background-image?
Con background-image el ícono conserva sus colores originales. Con mask-image el SVG define solo la forma y el color lo aporta el CSS, ideal para íconos monocromáticos que cambian con el tema.
¿Qué hace la opción de minificar?
Elimina comentarios y colapsa los espacios en blanco del SVG antes de codificarlo, con lo que el Data URI final queda más chico sin cambiar el dibujo.
¿Se sube mi SVG a un servidor?
No. La conversión ocurre íntegramente en tu navegador; el SVG no sale de tu equipo.