Optimizar SVG para la web: SVGO, presets y buenas prácticas

¿Por qué optimizar y minificar tus SVG?

Los SVG son ideales para iconos, logos e ilustraciones responsive. Pero las exportaciones de las herramientas de diseño suelen incluir metadatos innecesarios, atributos redundantes y trazados demasiado verbosos. La minificación rápida elimina espacios y comentarios; la optimización SVGO va más allá. Empieza con nuestro minificador SVG en línea y luego usa optimizar SVG (SVGO) — consulta el hub de herramientas SVG. Combínalo con el minificador HTML en línea para los SVG inline. Para el impacto global en el rendimiento, lee también nuestra guía de Core Web Vitals y minificación.

Reducción del 30 al 70 % del tamaño de los SVG según la complejidad

Mejor LCP en páginas con logos e ilustraciones hero

Menos ancho de banda y carga más rápida en móvil

Código SVG más limpio y más fácil de mantener

Mejora de la puntuación Lighthouse en recursos de imagen

Impacto real en el rendimiento

Caso real: set de iconos de e-commerce

Optimización de un lote de 120 iconos SVG usados en las páginas de categoría y producto.

Before optimization

Tamaño de archivos: 620 KB
Tiempo de carga: 420ms

After optimization

Tamaño de archivos: 248 KB
Tiempo de carga: 250ms

Impacto en Core Web Vitals

Unos SVG más ligeros reducen el coste de descarga y aceleran el renderizado de los elementos críticos.

LCP: ganancia de 120 a 350 ms según el tamaño de las ilustraciones hero

INP: menos trabajo de CPU para parsear los SVG inline grandes

CLS: ningún impacto negativo si se conservan las dimensiones

TBT: menos picos al parsear páginas ricas en SVG

UX móvil: carga más estable en redes 3G/4G

Buenas prácticas SVG para producción

Checklist antes de publicar

Aplica esta rutina para mantener assets ligeros y robustos.

Conservar siempre el atributo viewBox para el responsive

Limitar la precisión decimal de los paths (2-3 decimales en general)

Eliminar capas ocultas y grupos no usados

Evitar incluir inline los SVG grandes no críticos

Probar el renderizado en móvil y pantallas retina

Versionar los SVG fuente no minificados y desplegar la versión minificada

Errores frecuentes a evitar

Para los SVG inline, minifica el contenedor con el minificador HTML y comprime los estilos asociados con el minificador CSS. Si necesitas analizar un SVG ilegible, usa el modo embellecer o desminificar antes de reoptimizar.

Eliminar viewBox por error y romper el responsive

Minificar a ciegas SVG animados sin pruebas visuales

Conservar IDs verbosos no usados

Olvidar los atributos de accesibilidad (title, role, aria-label)

No monitorizar el tamaño SVG en la CI

Anatomía de la optimización SVG

Antes / después de la minificación SVG

La minificación SVG elimina los elementos no esenciales sin modificar el renderizado visual.

Antes

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1">
  <!-- Exported from Illustrator -->
  <metadata>Created with Design Tool X</metadata>
  <g id="Icon_Group" fill="#1d4ed8" fill-opacity="1.000000" stroke="none">
    <path d="M 10.0000 10.0000 L 110.0000 10.0000 L 110.0000 110.0000 L 10.0000 110.0000 Z" />
  </g>
</svg>

// ~430 bytes

Después

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="#1d4ed8" d="M10 10h100v100H10z"/></svg>

// ~150 bytes (alrededor del 65 % de reducción)

Qué se elimina vs qué se conserva

El objetivo es ganar bytes sin romper la visualización ni la accesibilidad.

ELIMINA: metadatos del editor (Illustrator, Figma, Inkscape)

ELIMINA: comentarios y espacios superfluos

ELIMINA: atributos por defecto redundantes

OPTIMIZA: precisión decimal de los paths

CONSERVA: viewBox, semántica y renderizado visual

CONSERVA: etiquetas útiles para la accesibilidad (title, desc)

Método rápido: FastMinify SVG Optimizer

Optimizar un SVG en 3 pasos

Empieza por el minificador SVG para una limpieza rápida. Para los presets SVGO (safe, default, aggressive), pasa a optimizar SVG — consulta el hub de herramientas SVG.

Paso 1: pega o importa tu SVG

Añade tu código SVG en bruto o importa el archivo en el editor.

Paso 2: lanza la optimización

Haz clic en Minificar para eliminar metadatos, espacios y atributos redundantes.

Paso 3: copia el resultado

Recupera el SVG optimizado para tu pipeline de build o tu CMS.

Funciones útiles para equipos web

La herramienta también permite trabajar en modo beautify/desminificar para releer un SVG complejo, y luego volver a la versión compacta antes de producción.

Optimización instantánea en el cliente

Sin subida al servidor para contenidos sensibles

Modo desminificación/beautify para depuración rápida

Copia en un clic para integrar en el código

Compatible con SVG inline y archivos externos

Optimización SVG programática

SVGO (Node.js) para CI/CD

SVGO es la referencia para automatizar la optimización SVG en un pipeline frontend.

Ejemplo básico

import { optimize } from 'svgo'

const svg = `<svg xmlns="http://www.w3.org/2000/svg">...</svg>`
const result = optimize(svg, {
  multipass: true,
  plugins: ['preset-default']
})

console.log(result.data)

Minificación de archivo

import { optimize } from 'svgo'
import fs from 'node:fs'

const input = fs.readFileSync('icon.svg', 'utf8')
const { data } = optimize(input, {
  path: 'icon.svg',
  multipass: true,
  plugins: [
    'preset-default',
    { name: 'cleanupIds', params: { minify: true } },
    { name: 'removeDimensions', active: false }
  ]
})

fs.writeFileSync('icon.min.svg', data)
console.log('SVG optimizado escrito en icon.min.svg')

Configuración recomendada

Esta configuración conserva las dimensiones lógicas (viewBox) y optimiza de forma agresiva los trazados.

Configuration

export default {
  multipass: true,
  js2svg: { indent: 0, pretty: false },
  plugins: [
    'preset-default',
    { name: 'convertPathData', params: { floatPrecision: 2 } },
    { name: 'sortAttrs', active: true },
    { name: 'removeViewBox', active: false }
  ]
}

Uso

# npm
auto_svgo() {
  npx svgo -f src/assets/svg -o public/assets/svg
}

# ej.: hook en el build
npm run optimize:svg && npm run build

SVG inline vs archivo externo

Incluir un SVG crítico en el HTML puede ser pertinente para el above-the-fold. Si no, es mejor usar archivos cacheados. Para los SVG inline, combina con la minificación HTML a través de FastMinify.

Conclusión

Optimizar tus SVG es una de las ganancias de rendimiento más rápidas de aplicar: menos bytes, renderizado más rápido y mejor experiencia de usuario, sin sacrificar la calidad visual. Combina un método rápido con la herramienta en línea para necesidades puntuales y una automatización SVGO en tu pipeline para industrializar las ganancias.

Optimiza tus SVG gratis ahora

Usa FastMinify para las optimizaciones rápidas de SVG

Automatiza SVGO en tu pipeline CI/CD

Conserva viewBox para garantizar el responsive

Valida visualmente cada SVG optimizado

Combina SVG optimizado + HTML/CSS minificados para una ganancia máxima