Codifica marcado SVG como data URI codificado en URL o base64, con líneas listas para pegar de background-image en CSS y <img>. Minificado opcional.
— la salida aparece aquí —
— la salida aparece aquí —
— la salida aparece aquí —
Acerca de esta herramienta
Pega marcado SVG en bruto y obtén un data URI que puedes colocar directamente en CSS o HTML. Produce dos codificaciones y todo se genera en tu navegador, así que no se sube nada.
La salida codificada en URL cambia las comillas dobles por comillas simples, ejecuta encodeURIComponent y luego restaura algunos caracteres seguros (espacio, dos puntos, barra, igual) para mantenerla compacta y legible. La salida base64 codifica el SVG en UTF-8 y lo pasa por btoa, dando data:image/svg+xml;base64,… . Una comparación de bytes muestra qué codificación es más pequeña; para la mayoría de los iconos gana la forma codificada en URL.
Activa la minificación para eliminar comentarios y colapsar el espacio en blanco entre etiquetas antes de codificar. Copia la línea background-image para CSS o la línea <img src> para HTML. Ten en cuenta que las comillas dentro del SVG se normalizan a comillas simples para que el data URI pueda envolverse en comillas dobles de forma segura.
Preguntas frecuentes
¿Codificado en URL o base64? ¿Cuál debo usar?
El codificado en URL suele ser más pequeño y sigue siendo legible, lo que ayuda a depurar. Base64 es más opaco pero universalmente aceptado; la comparación de tamaño te dice cuál es más pequeño aquí.
¿Por qué se cambiaron mis comillas dobles por simples?
Las comillas de atributo se convierten en comillas simples para que todo el data URI pueda ir dentro de un url("…") o src="…" entre comillas dobles sin escapar. Ambas son válidas en SVG.
¿La minificación cambia cómo se ve el SVG?
No. Solo elimina comentarios y colapsa el espacio en blanco entre y dentro de las etiquetas; el vector renderizado es idéntico, solo que más pequeño.
¿Se sube mi SVG a algún sitio?
No. La codificación se ejecuta íntegramente en tu navegador con encodeURIComponent y btoa; el marcado nunca sale de tu dispositivo.