Optimización SVG para desarrolladores: SVGO, pipelines de build e integración CI/CD

Los archivos SVG son la columna vertebral de los gráficos web modernos — escalables, estilizables, animables y típicamente más pequeños que las alternativas raster. Pero un SVG mal optimizado exportado desde Figma o Illustrator puede ser más pesado que un PNG y hundir tus Core Web Vitals.

He pasado ocho años enviando SVGs a producción. Esta es la guía que me hubiera gustado tener el primer día.

Por qué la optimización SVG es una partida del presupuesto de rendimiento

Un SVG sin optimizar puede contener metadatos del editor, rutas redundantes con 12 decimales de precisión, estilos inline repetidos, definiciones de gradiente/filtro sin usar y XML superfluo como xml:space. Una auditoría real: una ilustración hero de 52KB bajó a 7.8KB tras la optimización — 85% de reducción.

Configuración de SVGO paso a paso

SVGO es el optimizador estándar de la industria. Los valores por defecto dejan rendimiento sobre la mesa. Necesitas una configuración ajustada.

CLI vs API Node

# CLI -- archivos puntuales y scripts CI
npx svgo input.svg -o output.svg --config svgo.config.js

# Optimización por lotes de un directorio
npx svgo -f ./src/icons -o ./dist/icons --config svgo.config.js

// API Node -- integración en pipeline de build
import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';

const result = optimize(readFileSync('icon.svg', 'utf8'), {
  multipass: true,
  plugins: [
    'preset-default',
    'removeDimensions',
    { name: 'removeAttrs', params: { attrs: '(data-.*|class)' } },
  ],
});
writeFileSync('icon.opt.svg', result.data);

svgo.config.js de producción

module.exports = {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          convertPathData: { floatPrecision: 2, transformPrecision: 3 },
          mergePaths: { force: true },
        },
      },
    },
    'removeDimensions',
    'sortAttrs',
    { name: 'removeAttrs', params: { attrs: ['xml:space', 'data-name'] } },
  ],
};

Antes/Después: Eliminando metadatos y peso del editor

Cada herramienta de diseño incrusta su huella:

<!-- ANTES: 680 bytes de desperdicio -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" id="Layer_1" x="0px" y="0px" width="200px" height="200px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;"
     xml:space="preserve">
  <!-- Generator: Adobe Illustrator 28.0 -->
  <metadata><rdf:RDF><rdf:Description/></rdf:RDF></metadata>
  <defs><linearGradient id="unused_grad">...</linearGradient></defs>

<!-- DESPUÉS: limpio, listo para producción -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

Eliminados: version, dimensiones fijas, xml:space, enable-background, comentarios del generador, metadatos vacíos, defs sin usar. 680 bytes ahorrados en un icono pequeño — multiplica eso por un sprite de 40 símbolos.

Simplificación de rutas: Reducir nodos sin pérdida visual

Las rutas concentran la mayoría de bytes SVG. Los diseñadores crean rutas con cientos de nodos donde docenas bastan.

<!-- ANTES: precisión de 12 decimales -->
<path d="M10.123456789012 20.987654321098 C15.111111111111 25.222222222222
  30.333333333333 40.444444444444 45.555555555555 50.666666666666"/>

<!-- DESPUÉS: precisión de 2 decimales, visualmente idéntico -->
<path d="M10.12 20.99C15.11 25.22 30.33 40.44 45.56 50.67"/>

¿Diferencia visual a resolución de pantalla? Cero. ¿Ahorro de bytes? 58%. Usa el editor SVG de VectoSolve para inspeccionar visualmente la reducción de nodos.

Comparación de técnicas de optimización

CSS en SVG: Inline vs hojas de estilo externas

<!-- Estilos inline: inflados, pero autocontenidos -->
<path style="fill:#ff0000;stroke:#000;stroke-width:2" d="..."/>
<path style="fill:#ff0000;stroke:#000;stroke-width:2" d="..."/>

<!-- <style> consolidado: más ligero, autocontenido -->
<style>.a{fill:#f00;stroke:#000;stroke-width:2}</style>
<path class="a" d="..."/>
<path class="a" d="..."/>

<!-- Atributos de presentación: más ligero, ideal para SVG inline -->
<path fill="#f00" stroke="#000" stroke-width="2" d="..."/>

Para SVGs inline, usa atributos de presentación — sobreescribibles con CSS externo, sin problemas de scope. Para archivos independientes, los bloques <style> funcionan bien.

Estadísticas de compresión Gzip y Brotli

SVG es XML — se comprime espectacularmente:

Brotli supera a Gzip un 5-15% en SVG. Cloudflare, Vercel y Netlify lo soportan de serie.

"

Cada kilobyte que envías es un kilobyte que el navegador de tu usuario debe descargar, parsear y renderizar. Los SVGs optimizados no son un nice-to-have — son una partida del presupuesto de rendimiento.

Lazy Loading de páginas con muchos SVGs

Si tu página tiene más de 20 SVGs debajo del fold, no los cargues todos en el primer render:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

document.querySelectorAll('img[data-src$=".svg"]').forEach(img => observer.observe(img));

El rootMargin de 200px da ventaja al navegador. Cero layout shift, cero ancho de banda desperdiciado.

Integración en pipeline de build: Webpack, Vite, Next.js

La optimización manual no escala. Conecta SVGO a tu herramienta de build.

Vite

import svgLoader from 'vite-svg-loader';
export default defineConfig({
  plugins: [svgLoader({
    svgoConfig: { multipass: true, plugins: ['preset-default', 'removeDimensions'] },
  })],
});

Webpack

{ test: /\.svg$/, use: [
  { loader: 'svg-url-loader', options: { limit: 8192 } },
  { loader: 'svgo-loader', options: { configFile: './svgo.config.js' } },
]}

Next.js

config.module.rules.push({
  test: /\.svg$/,
  use: ['@svgr/webpack', {
    loader: 'svgo-loader',
    options: { configFile: './svgo.config.js' },
  }],
});

Con la integración en el pipeline, la optimización ocurre en tiempo de build. Sin pasos manuales, sin archivos olvidados.

La checklist de optimización completa

1. Exporta limpio desde tu herramienta de diseño
2. Ejecuta SVGO con una config commiteada — o optimiza con VectoSolve para un flujo visual
3. Verifica visualmente — compara antes/después, especialmente animaciones
4. Activa la compresión — Gzip mínimo, Brotli si el CDN lo soporta
5. Lazy load los SVGs debajo del fold con Intersection Observer
6. Automatiza en CI — SVGO en tu pipeline para que nada se envíe sin optimizar

¿Necesitas convertir imágenes raster a SVG optimizado? VectoSolve gestiona la vectorización y la optimización en un solo paso. O usa el editor SVG para control detallado de rutas y calidad de salida.

¿Preguntas o historias de guerra de optimización? Escríbenos a contact@vectosolve.com.

Fuentes y lecturas adicionales

• web.dev: Image Optimization — Guía de referencia de Google sobre optimización SVG y compresión para rendimiento web
• MDN Web Docs: SVG — Referencia técnica sobre sintaxis de rutas SVG y atributos de elementos objetivo de la optimización
• CSS-Tricks: Optimizing SVG — Tutoriales prácticos de configuración SVGO y ejemplos de optimización antes/después
• W3C SVG 2 Specification — Especificación oficial para entender qué atributos SVG son seguros de eliminar