¿Archivo SVG demasiado grande? 8 técnicas de compresión y optimización

Un SVG suele pesar varios cientos de KB, incluso varios MB, y la causa habitual son demasiados nodos, trazados redundantes, metadatos del editor y una precisión decimal excesiva. Las ocho técnicas siguientes están ordenadas «de la fuente a la entrega» y todas son aplicables.

1. A nivel de trazado: menos nodos y trazados fusionados

Técnica 1: reducir nodos (simplificar el trazado)

Cuantos más nodos, más pesado es el archivo y más lenta la representación. Al convertir, sube un poco el suavizado para reducir los nodos desde el origen; en un SVG existente puedes usar «Objeto → Trazo → Simplificar» de Illustrator o «Trazado → Simplificar» (Ctrl+L) de Inkscape para eliminar nodos sobrantes. En la herramienta de conversión de PolySVG, el suavizado y el número de colores permiten equilibrar en vivo el efecto y el peso.

Técnica 2: fusionar trazados y capas

Combina en uno solo los trazados que comparten el mismo color de relleno para reducir los atributos repetidos; aplana los anidamientos de grupo sin sentido y borra las capas ocultas y los elementos vacíos. En los programas de diseño, el «Unión» del panel de trazados o la fusión de capas antes de exportar hace lo mismo.

2. En el contenido del archivo: borrar metadatos y bajar la precisión

Técnica 3: eliminar los metadatos del editor

Los SVG exportados por Illustrator o Inkscape suelen llevar espacios de nombres, un bloque <metadata>, comentarios y ajustes de exportación que no influyen en la representación: bórralos a mano o deja que SVGO los limpie. Conserva en cambio <title> y <desc>, porque ayudan a los lectores de pantalla.

Técnica 4: bajar la precisión decimal

Las coordenadas de los trazados suelen llevar de 6 a 8 decimales, mientras que la representación en pantalla solo necesita 1 o 2. En la configuración de SVGO, baja la precisión numérica (floatPrecision) a 1 o 2: el peso baja de forma apreciable sin diferencia visible a simple vista. En iconos muy pequeños evita comprimir demasiado las coordenadas, para no deformar la figura.

3. Automatización: compresión con un clic de SVGO

Técnica 5: optimizar automáticamente con SVGO

SVGO es la herramienta de referencia para optimizar SVG e incluye decenas de plugins: quitar comentarios y metadatos, fusionar trazados, optimizar las instrucciones de trazado, limpiar valores. Uso básico:

npx svgo input.svg -o output.svg

Un archivo típico se reduce entre un 30 % y un 70 %. Dos precauciones: no elimines el atributo viewBox, o el escalado se romperá; y en iconos cuyo color se cambia por CSS conserva la herencia de fill en lugar de fijar el valor.

Compara antes y después con el tamaño del archivo y con el tamaño real de transferencia en las herramientas de desarrollo del navegador, para confirmar el ahorro; cambia solo una categoría de parámetros cada vez, así resulta fácil localizar el paso que introduce una anomalía.

4. Estructura y reutilización: simbolización y control de los planos de color

Técnica 6: reutilizar gráficos repetidos con defs y use

Cuando el mismo icono aparece varias veces en una página, defínelo una vez con <defs> y refiérelo varias veces con <use>, o crea una hoja de sprites SVG: el peso y el número de peticiones bajan a la vez.

Técnica 7: controlar los planos de color y evitar imágenes incrustadas

Reduce el número de colores al vectorizar para tener menos planos; donde baste un color sólido, evita un degradado complejo. Sobre todo no incrustes imágenes de mapa de bits en base64 dentro del SVG: el archivo vectorial se convertiría en un contenedor de mapa de bits y el peso se dispararía. Los trazados sobrantes de la conversión se borran con un clic en el editor online.

5. Entrega: compresión de la transmisión y caché

Tecnica 8: activar gzip/Brotli y la caché

Como el SVG es texto, con gzip/Brotli en el servidor el tamaño de la transmisión baja otro 60-80 % de media; configura cabeceras de caché largas para los SVG estáticos. Los iconos muy pequeños pueden incrustarse directamente en el HTML y ahorrar la petición. El principio está explicado en Las ventajas del SVG; y si quieres controlar el peso ya en la conversión, lee Los métodos para convertir una imagen en SVG.

El orden importa: controla nodos y planos de color en la fuente, limpia metadatos y precisión en el archivo, pasa SVGO y, por último, comprime la transmisión. Con las cuatro capas sumadas, el peso de un SVG suele reducirse en un orden de magnitud.