Cómo optimizar archivos SVG para rendimiento web (2026)

Por qué importa la optimización SVG

Los SVG sin optimizar pueden ser más pesados que los PNG. Un SVG de 500 KB anula el propósito de usar vectores. La optimización adecuada puede reducir el tamaño de los archivos un 50-80 %.

Impacto real en el rendimiento

La checklist de optimización SVG

1. Eliminar metadatos del editor

Las herramientas de diseño añaden datos innecesarios:

Antes (exportación de Illustrator):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0, SVG Export -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px"
     viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;"
     xml:space="preserve">

Después (optimizado):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

Ahorro: 40-60 % solo con los metadatos

2. Simplificar trazados

Reduce la precisión decimal:

Antes:

<path d="M12.3456789,45.6789012 L67.8901234,12.3456789"/>

Después:

<path d="M12.35,45.68 L67.89,12.35"/>

Ahorro: 20-40 %

3. Fusionar trazados

Combina trazados similares:

Antes:

<path d="M0,0 L10,0" fill="#000"/>
<path d="M10,0 L20,0" fill="#000"/>
<path d="M20,0 L30,0" fill="#000"/>

Después:

<path d="M0,0 L30,0" fill="#000"/>

Ahorro: 50-70 %

4. Usar CSS en lugar de atributos

Antes:

<circle cx="50" cy="50" r="40" fill="#1cb721" stroke="#000" stroke-width="2"/>

Después:

<style>.c{fill:#1cb721;stroke:#000;stroke-width:2}</style>
<circle cx="50" cy="50" r="40" class="c"/>

Ahorro: 10-30 % (más con elementos repetidos)

5. Eliminar elementos ocultos

Borra todo lo que no sea visible:

• Elementos fuera del viewBox
• Formas completamente transparentes
• Grupos vacíos
• Definiciones no usadas

Mejores herramientas de optimización SVG

1. SVGO (mejor opción general)

Herramienta de línea de comandos, la más configurable:

npx svgo input.svg -o output.svg

Ahorro típico: 50-80 %

2. SVGOMG (interfaz web)

Versión online de SVGO con vista previa visual:

• jakearchibald.github.io/svgomg/

3. ImageOptim (Mac)

Optimización por arrastrar y soltar:

• Procesa SVG, PNG, JPG
• Compresión sin pérdida

4. VectoSolve (durante la conversión)

Los SVG de VectoSolve vienen pre-optimizados:

• Trazados limpios
• Código mínimo
• Sin metadatos

Configuración SVGO para máximo ahorro

// svgo.config.js
module.exports = {
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergeStyles',
    'inlineStyles',
    'minifyStyles',
    'cleanupIds',
    'removeUselessDefs',
    'cleanupNumericValues',
    'convertColors',
    'removeUnknownsAndDefaults',
    'removeNonInheritableGroupAttrs',
    'removeUselessStrokeAndFill',
    'cleanupEnableBackground',
    'removeHiddenElems',
    'removeEmptyText',
    'convertShapeToPath',
    'convertEllipseToCircle',
    'moveGroupAttrsToElems',
    'collapseGroups',
    'convertPathData',
    'convertTransform',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'mergePaths',
    'removeUnusedNS',
    'sortDefsChildren',
    'removeTitle',
    'removeDesc'
  ]
};

«El SVG más rápido es un SVG pequeño. La optimización no es opcional — es la diferencia entre una interfaz ágil y una lenta.» — Addy Osmani, Google Chrome Team

Ejemplos antes/después

Optimización de logo

Set de iconos (50 iconos)

Técnicas avanzadas

1. Sprites SVG

Combina múltiples iconos en un archivo:

<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">...</symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">...</symbol>
</svg>

<svg><use href="#icon-home"/></svg>

Beneficios:

• Una sola petición HTTP
• Caché del navegador
• Tamaño total menor

2. Compresión GZIP

Los SVG se comprimen excepcionalmente bien:

Configuración del servidor:

gzip on;
gzip_types image/svg+xml;

3. Carga diferida

Para SVG bajo el fold:

<img src="illustration.svg" loading="lazy" alt="...">

Impacto en Core Web Vitals

Los SVG optimizados mejoran directamente:

LCP (Largest Contentful Paint)

• Archivos más pequeños = carga más rápida
• Objetivo: < 2,5 segundos

FID (First Input Delay)

• Menos parsing = interactividad más rápida
• Objetivo: < 100 ms

CLS (Cumulative Layout Shift)

• SVG con viewBox = dimensiones estables
• Objetivo: < 0,1

Conclusión

La optimización SVG es esencial para el rendimiento web. Unos minutos de optimización pueden reducir el tamaño de los archivos un 80 % y mejorar significativamente tus puntuaciones de Core Web Vitals.

Ganancias rápidas:

1. Pasa todos tus SVG por SVGO
2. Habilita GZIP en tu servidor
3. Usa sprites SVG para iconos
4. Usa VectoSolve para conversiones pre-optimizadas

Empieza a optimizar: Convierte y optimiza tus imágenes con VectoSolve para SVG instantáneos y listos para la web.

Fuentes y lecturas adicionales

• web.dev — Guía definitiva de Google sobre rendimiento web incluyendo optimización SVG para Core Web Vitals
• W3C SVG 2 Specification — Especificación oficial que define la estructura SVG válida
• MDN Web Docs — SVG — Referencia técnica para elementos y atributos SVG
• CSS-Tricks: Using SVG — Flujos de trabajo de optimización prácticos y guías de configuración SVGO
• Smashing Magazine — Artículos en profundidad sobre auditoría de rendimiento SVG y casos de estudio