Cómo optimizar archivos SVG: reduce su tamaño entre un 50 y 80%

Actualizado en junio de 2026 · Lectura de 6 minutos

Por qué es importante: Los SVG que salen directamente de Illustrator o Figma están sobredimensionados por metadatos, datos del editor y precisión innecesaria. Una exportación típica de 50KB puede quedar en 10KB después de optimizarla: un 80% más pequeña sin ninguna diferencia visual.

¿Por qué los archivos SVG tienen peso de más?

Los SVG son XML por debajo. Las herramientas de diseño añaden un montón de datos extra:

Metadatos del editor: Nombres de capas, datos de la mesa de trabajo, información de fuentes que los navegadores ignoran completamente
Comentarios y espacios en blanco: El formato legible para personas suma bytes de más
Precisión excesiva: Coordenadas de trazado con 8 decimales (totalmente innecesarias para el renderizado en pantalla)
Imágenes raster incrustadas: Algunos SVG contienen PNG codificados en base64 dentro
Definiciones sin usar: Gradientes, filtros y símbolos que no se emplean en ninguna parte

Paso 1: SVGO (el estándar de referencia)

SVGO es el optimizador de SVG estándar de la industria. Elimina todo el contenido sobrante sin cambiar nada del aspecto de tu imagen.

# Instalar globalmente

npm install -g svgo

# Optimizar un solo archivo

svgo input.svg -o output.svg

# Optimizar todos los SVG de una carpeta

svgo -f ./svgs/ -o ./optimized/

# Optimización agresiva (puede cambiar el aspecto)

svgo input.svg -o output.svg --config='{ "plugins": [ { "name": "preset-default", "params": { "overrides": { "removeViewBox": false } } } ] }'

SVGO suele conseguir reducciones de tamaño de entre el 50 y 80%. La configuración predeterminada es segura: elimina datos de editor, comentarios, espacios en blanco y precisión innecesaria manteniendo el resultado visual idéntico.

Paso 2: Elimina la precisión innecesaria

Mira el código fuente de tu SVG. Si ves coordenadas de trazado como d="M12.84736291,45.19284736...", tienes precisión de más. Los SVG que se renderizan en pantalla no necesitan 8 decimales: con 2 suele ser más que suficiente. SVGO lo gestiona automáticamente, pero puedes ajustar el valor:

# Limitar la precisión de trazados a 2 decimales

svgo --floatPrecision 2 input.svg -o output.svg

Paso 3: Compresión gzip

Como el SVG es XML basado en texto, se comprime genial con gzip. La mayoría de servidores web comprimen automáticamente los archivos SVG. Un SVG de 50KB se puede transferir con solo 8KB por la red. Asegúrate de que tu servidor o CDN incluye el SVG en su lista de formatos para comprimir:

# Configuración de Nginx
gzip_types text/css application/javascript image/svg+xml;

Paso 4: Limpieza manual

Para conseguir la optimización máxima, abre el SVG en un editor de texto y revisa que no tenga:

CSS incrustado: Los estilos en línea se pueden mover a hojas de estilo externas para reutilizarlas por caché
Trazados duplicados: A veces las capas tienen copias ocultas que no se usan
URI de datos gigantes: Las imágenes incrustadas deberían ser archivos externos

Antes y después: ejemplo real

Probamos con un logo SVG típico exportado de Figma:

Antes: 48,3 KB (exportado directamente de Figma)
Después de SVGO: 11,7 KB (reducción del 76%)
Después de SVGO + gzip: 3,2 KB transferidos (reducción del 93%)

El resultado es idéntico a nivel de píxeles. Nadie nota la diferencia, pero tu web carga 15 veces más rápido para esa imagen.

Optimización desde el navegador

¿No quieres instalar nada? SVGOMG es una interfaz gráfica de SVGO que funciona directamente en el navegador. Sube tu SVG, activa o desactiva las optimizaciones con casillas, y ve el resultado en tiempo real. Genial para optimizaciones puntuales.

Para convertir tus SVG optimizados a otros formatos, usa SVG2PNG para renderizar tu SVG limpio a PNG, JPG o WebP en cualquier resolución.

Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años diseñando interfaces y sistemas de diseño. Creé SVG2PNG después de cansarme de tener activos de clientes en servidores aleatorios. Más sobre mí →