Codificador de URI de Datos para SVG | Data URIs CSS ~30% más ligeras que base64

Convierte un SVG en una data:image/svg+xml URI usando codificación porcentual mínima — solo se escapan los caracteres que romperían url(...) — y entrega un fragmento background-image: url(...) listo para pegar. Como base64 infla el contenido un 33% por construcción, este método suele ahorrar entre el 20% y el 35% en iconos típicos.

💡 Sobre esta herramienta

El caso de uso más habitual es incrustar un único icono SVG en CSS sin montar un loader de Webpack o Vite. Ahorras una petición HTTP, evitas el parpadeo de icono no cargado y cambiar el icono al hacer hover se resuelve con una sola regla CSS.

Base64 también funciona, pero mecánicamente engorda el payload un 33% (3 bytes de entrada producen 4 caracteres de salida). El SVG, en cambio, ya es texto y la mayor parte es segura dentro de una URL. Los únicos caracteres que de verdad necesitan escaparse son <, >, #, % y la comilla (" o ') que choca con la envoltura externa de url(...). Esta es la estrategia que popularizó el url-encoder de Yoksel en la época en la que los SVG sustituyeron a las icon fonts.

La sobrescritura del color fill es útil cuando mantienes un icono monocromo (<svg ... fill="currentColor">) y quieres versiones precoloreadas, por ejemplo un estado :hover rosa y un :active mint, sin duplicar el SVG tres veces.

🧐 Preguntas frecuentes

¿Debo elegir url("...") o url('...')? La comilla simple es más segura si el código va dentro de PostCSS, Sass o una plantilla JS que ya use comillas dobles. Para CSS puro, la versión con doble comilla requiere un escape menos y queda algo más corta.

¿La sobrescritura de fill también cambia fill="currentColor"? Sí. Reemplaza cualquier atributo fill= que encuentre. Si necesitas conservar el comportamiento de currentColor, deja el campo vacío.

¿Puede base64 acabar siendo más ligero? Ocasionalmente. SVGs con muchos < (grupos muy anidados), abundantes " en estilos inline, o con declaración XML y comentarios añadidos por herramientas como Sketch pueden inflarse en la versión porcentual hasta superar el 33% de overhead de base64. Por eso la herramienta muestra las tres tarjetas de tamaño juntas: decide con la cifra real, no con la regla general.

¿Es imprescindible el atributo xmlns? Cuando se consume vía background-image: url(...), sí. El navegador procesa la URI a través de la ruta de decodificación de imágenes y necesita el namespace. La herramienta no lo añade automáticamente; codifica exactamente lo que pegues.

¿Y los iconos de más de 256 KB? El selector de archivos corta en 256 KB, pero en la práctica cualquier SVG por encima de ~10 KB suele rendir mejor servido como archivo aparte: tu hoja de estilos se mantiene ligera y no pierdes el caching del navegador.

📚 Datos curiosos

El truco de "codificar solo los caracteres que rompen url()" se difundió a partir del url-encoder de Yoksel en 2015-2016, cuando los SVG empezaban a desplazar a las icon fonts. La sintaxis de imagen de fondo arbitraria de Tailwind (bg-[url('data:image/svg+xml,…')]) es su descendiente directo: misma codificación, mismo enfoque de archivo único, pero con utility classes en lugar de CSS escrito a mano.