Comprimir archivos SVG

SVG es código, no píxeles

Un archivo SVG (Scalable Vector Graphics) es un documento de texto en XML que describe formas: trazados, círculos, degradados, texto. Como contiene instrucciones en lugar de píxeles, se ve nítido a cualquier tamaño, desde un favicon de 16 píxeles hasta una valla publicitaria. Los iconos, logotipos, ilustraciones, gráficos y mapas de la web suelen ser SVG, y el formato es un estándar del W3C desde 2001.

Ser texto tiene un efecto secundario: el tamaño del archivo depende de lo detallado que lo escribiera el editor, no del tamaño al que se muestra la imagen. Dos SVG que se ven idénticos pueden diferir varias veces en tamaño.

Qué hace que un SVG pese más de lo necesario

• Metadatos del editor. Illustrator, Inkscape, Figma y Sketch añaden sus propios espacios de nombres, nombres de capas, comentarios de exportación y, a veces, una copia incrustada del documento editable.
• Precisión excesiva. Coordenadas como 12.483920174 donde 12.48 se ve exactamente igual a cualquier tamaño realista.
• Estructura redundante. Grupos vacíos, capas ocultas, valores de atributos por defecto, definiciones sin usar y estilos que podrían ser más cortos.
• Sintaxis de trazados larga. Comandos absolutos donde los relativos son más cortos, letras de comando repetidas, espacios innecesarios.
• Mapas de bits incrustados. Una foto pegada en una ilustración se guarda como texto Base64 dentro del SVG, que ocupa aproximadamente un tercio más que el archivo de imagen original.

Cómo optimiza la herramienta los SVG

La herramienta ejecuta SVGO, el optimizador de SVG de código abierto más utilizado, en tu navegador. Elimina metadatos y comentarios, une grupos inútiles, acorta los datos de los trazados, redondea los números a 3 decimales por defecto (puedes elegir de 0 a 6) y fusiona estilos, repitiendo las pasadas hasta que no cambia nada. El resultado sigue siendo un SVG normal que puedes abrir en cualquier editor o pegar en HTML. En nuestras pruebas con ocho SVG, desde iconos optimizados a mano hasta una exportación de Inkscape llena de datos del editor, el ahorro fue del 8 % al 42 %.

Técnicamente, la optimización es con pérdida en un sentido estricto: el redondeo cambia las coordenadas en cantidades mínimas y los datos propios del editor desaparecen, así que no puedes volver a abrir el archivo con todas sus capas originales. Guarda el archivo fuente de tu programa de diseño y trata el SVG optimizado como la versión publicada.

Los servidores suelen enviar los SVG con compresión gzip o Brotli, que vuelve a reducir el texto camino del navegador. La optimización y la compresión del servidor se suman, porque los datos eliminados ya no hay que comprimirlos.

Cuándo se rompe un SVG optimizado

• El CSS o el JavaScript ya no encuentran un elemento. Los optimizadores acortan o eliminan los ID y nombres de clase que parecen no usarse dentro del archivo. Si los estilos o scripts de tu página hacen referencia a ellos, revisa el resultado antes de publicarlo.
• El icono ya no se escala. Un SVG necesita su atributo viewBox para redimensionarse correctamente. La herramienta lo conserva, así que comprueba si el original lo tenía; un SVG que solo tiene ancho y alto fijos nunca se escaló bien.
• Las formas diminutas se ven deformadas. Los iconos muy pequeños dibujados sobre un lienzo grande pueden verse afectados por el redondeo. Es raro con la precisión predeterminada.
• El archivo es sobre todo una foto incrustada. Exporta la foto como un JPG o WebP aparte y enlázala, o convierte todo el gráfico en un mapa de bits.

Preguntas sobre SVG

Páginas relacionadas

Las imágenes de mapa de bits se procesan con el compresor de imágenes. Para saber qué se ejecuta en local y por qué, consulta cómo funciona.