Saltar al contenido principal

SVG a Data URI

Convierta SVG en un URI de datos para CSS o HTML

Crea un URI de datos SVG codificado para URL o en Base64, además de fragmentos listos para CSS background-image, CSS mask-image y HTML img. Optimiza el marcado, comprueba la vista previa y copia el formato que necesites sin subir el SVG.

Suelta archivos aquí

Editando valores predeterminados para nuevos archivos

Codificación

La codificación en URL solo escapa los caracteres que una URL no puede llevar, así que en archivos del tamaño de un icono suele quedar un 20-30 % más pequeña que Base64 y el marcado sigue siendo legible. Elige Base64 cuando un paso de compilación o un CMS reescriba los signos de porcentaje.

Codifica también los espacios, los apóstrofos y los paréntesis, para que el data URI sea seguro dentro de un url(...) sin comillas y dentro de cadenas de Sass o Less. Cuesta unos pocos bytes. Base64 no lo necesita.

Optimización

Aplica el preajuste seguro del optimizador antes de generar la salida.

Estilo

Sustituye los rellenos y los trazos para que el icono herede el color del texto que lo rodea. Solo sirve para ilustraciones de un solo color: aplana un SVG multicolor a un único color.

Sin vista previa. Añade y selecciona archivos para ver resultados.

Aún no hay archivos. Suelta archivos arriba o haz clic en SELECCIONAR ARCHIVOS.

Aún no hay archivos. Suelta archivos arriba o haz clic en SELECCIONAR ARCHIVOS.

¿Qué es SVG?

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML. En lugar de píxeles, un SVG describe matemáticamente formas, trazados, rellenos y contornos, de modo que se puede renderizar a cualquier tamaño sin perder calidad.

SVG es el formato vectorial estándar para la web. Todos los navegadores modernos lo admiten de forma nativa y se puede diseñar con CSS o animar con JavaScript o SMIL. Suele ser compacto para logotipos, iconos e ilustraciones, aunque los archivos SVG complejos pueden ocupar bastante espacio.

Cuándo insertar un SVG como data URI

Un URI de datos coloca el SVG completo dentro de la hoja de estilo o el marcado, por lo que el navegador no necesita una segunda solicitud para dibujarlo. Eso vale la pena para obras de arte decorativas pequeñas: viñetas, flechas, galones, casillas de verificación o una marca en un pie de página. La codificación URL suele ser más compacta para el texto SVG, mientras que Base64 puede resultar útil cuando otra herramienta lo espera. Una máscara CSS trata el SVG como una plantilla para el color de fondo propio del elemento, por lo que se puede cambiar el color de un icono monocromático por estado, por tema o por componente con una única declaración CSS.

Cómo convertir un SVG a data URI en línea

  1. 1

    Suelta tus archivos SVG, o haz clic en SELECCIONAR ARCHIVOS, para añadirlos a la cola. Hasta 40 a la vez.

  2. 2

    Elige entre codificado en URL y Base64, y decide si quieres optimizar antes el marcado. Las cinco salidas, y su tamaño en bytes, se actualizan a medida que cambias las opciones.

  3. 3

    Copia el fragmento que necesites, o haz clic en GUARDAR TODO para descargar un archivo .css por cada SVG con las reglas de fondo y de máscara.

Privacidad: tus archivos nunca salen del navegador

La conversión se ejecuta localmente en su navegador usando JavaScript y WebAssembly. No hay carga de archivos ni conversión del lado del servidor, por lo que los archivos que agrega permanecen en su dispositivo.

El procesamiento local ayuda a proteger logotipos confidenciales, documentos internos y obras de arte inéditas de los clientes. Las páginas y el código de conversión se almacenan en caché a medida que los utiliza, por lo que las herramientas que ya ha abierto pueden seguir funcionando sin una conexión de red.

Preguntas frecuentes

¿Es un data URI codificado en URL más pequeño que uno en Base64?

Generalmente. Base64 agrega una sobrecarga de codificación a los bytes sin formato, mientras que la codificación URL solo expande los caracteres que deben tener escape. La diferencia exacta depende del marcado SVG, por lo que la herramienta muestra ambos tamaños y le permite compararlos para el archivo que tiene delante.

¿Cómo recolorea un icono la regla de máscara CSS?

mask-image usa el SVG como plantilla de recorte: el elemento pinta su propio background-color y la máscara decide qué píxeles sobreviven. Como el color viene del CSS, un mismo data URI puede tener cualquier color, y una variante para el hover o para el modo oscuro es un solo cambio de background-color. Solo funciona con ilustraciones de un color, porque la máscara conserva el canal alfa y descarta los colores propios del SVG. Safari todavía necesita el prefijo -webkit-mask-image, que la regla generada incluye.

¿Cuándo no conviene insertar un SVG como data URI?

Cuando el archivo es grande o compartido. Un URI de datos se copia en cada hoja de estilo o página que lo utiliza, por lo que no se puede almacenar en caché por sí solo y se vuelve a descargar cada vez que ese archivo cambia. Para ilustraciones o recursos más grandes que se reutilizan en muchas páginas, un archivo .svg separado con sus propios encabezados de caché suele ser la mejor opción. Tampoco se puede diseñar un URI de datos desde fuera, por lo que la regla de máscara generada es útil para iconos monocromáticos.