SVG a data URI

Cómo convertir un SVG en data URI

1. Pega el código SVG en el cuadro Texto. Abre un archivo .svg con cualquier editor de texto para copiarlo. El cuadro empieza con un icono de ejemplo.
2. El Tipo MIME ya es image/svg+xml, y Codificación está en SVG optimizado.
3. Mira la tabla bajo las opciones. Muestra la longitud de la URI y el tamaño con gzip para Base64, Codificado para URL y SVG optimizado, marca el más pequeño y tiene un botón Usar para cada uno.
4. Elige un Formato de salida: data URI en bruto, url() de CSS, <img> de HTML, <a> de HTML o Markdown. Después, Copiar salida.

También puedes soltar un .svg en el modo Desde archivo, que ofrece Base64 y codificación URL del archivo tal cual. La variante optimizada y la tabla comparativa necesitan el código en el cuadro de texto.

Tamaño de un SVG en Base64 frente a codificado para URL

Para el ejemplo incluido, un icono de 309 bytes con un cuadrado redondeado, un círculo y una línea, la tabla muestra:

La codificación URL simple es la más larga sin comprimir, porque cada espacio, comilla, <, > y salto de línea se convierte en tres caracteres. Sin embargo, tras gzip supera a Base64 con mucho margen, porque el código conserva su estructura repetitiva y Base64 la desordena. Las hojas de estilo casi siempre se sirven comprimidas, así que la columna con gzip es la que llega a los usuarios.

El SVG optimizado gana en ambas columnas. Para un icono de triángulo pequeño, de 103 bytes, la diferencia es la misma: Base64 166 caracteres, codificado para URL 172, optimizado 136. SVG a Base64 tiene una comparación con un conjunto entero de iconos.

Qué hace «SVG optimizado»

El optimizador hace cuatro cambios en el código:

1. Compacta cada secuencia de espacios en blanco, saltos de línea incluidos, en un solo espacio y recorta los extremos.
2. Sustituye " por ', pero solo si el SVG no contiene ya ningún '.
3. Codifica por porcentajes con encodeURIComponent y luego restaura los caracteres que son seguros en una URI: espacio, =, :, /, , y ;.
4. Escribe en minúsculas los escapes restantes (%3c en lugar de %3C), que con gzip se comprimen un poco mejor: 220 bytes en lugar de 222 para el ejemplo.

El resultado para el icono del triángulo:

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 1 15 15H1z' fill='%23e33'/%3e%3c/svg%3e

El # del color se convirtió en %23. Ese escape es obligatorio: un # sin escapar inicia un fragmento de URL, y todo lo que va detrás se descarta sin avisar.

Reglas de comillas y de contexto

La salida optimizada contiene comillas simples, espacios y paréntesis sin escapar, lo que funciona dentro de comillas dobles y en ningún otro sitio:

.icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e"); }

<img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e" alt="">

Un url(...) sin comillas se rompe con los espacios, y un atributo entre comillas simples termina en el primer '. Si la URI se monta en JavaScript, la inserta un motor de plantillas o se pega en un sistema que reescribe las comillas, Base64 es la opción más segura: solo contiene letras, dígitos, +, / y =, así que sobrevive en cualquier contexto. Usa el botón Usar de la tabla para cambiar.

Las demás limitaciones son menores. El SVG optimizado siempre es UTF-8 e ignora cualquier otro juego de caracteres que elijas, con un aviso. Compactar los espacios puede cambiar el texto de los elementos <text> que conservan los espacios. Y el SVG sigue necesitando xmlns="http://www.w3.org/2000/svg" en su elemento raíz, como cualquier SVG que se use como imagen.

El optimizador en JavaScript

La misma transformación cabe en unas pocas líneas, para scripts de build o CSS-in-JS:

function svgToDataUri(svg) {
  let s = svg.trim().replace(/\s+/g, " ");
  if (!s.includes("'")) s = s.replaceAll('"', "'");
  const keep = { "%20": " ", "%3D": "=", "%3A": ":", "%2F": "/", "%2C": ",", "%3B": ";" };
  return "data:image/svg+xml," + encodeURIComponent(s)
    .replace(/%[0-9A-F]{2}/g, m => keep[m] || m.toLowerCase());
}

Produce la URI del triángulo mostrada arriba. Hay más sobre la codificación en el navegador y en Node en Base64 en JavaScript. Para leer una data URI de SVG existente, pégala en Base64 a SVG o en el analizador de data URI.

Preguntas frecuentes