Presets SVGO explicados: optimizar un SVG sin romper el render
¿Safe, default o aggressive? Elige el preset SVGO adecuado, optimiza tus SVG para prod y evita regresiones visuales.
Por qué importan los presets SVGO
Una exportación de Figma o Illustrator suele producir un SVG verboso: metadatos del editor, precisión decimal excesiva, IDs redundantes. El minificador SVG en línea elimina espacios y comentarios en un clic — útil para una limpieza rápida. El optimizador SVG (SVGO) va más allá con tres presets — safe, default y aggressive — que activan o desactivan plugins SVGO según el riesgo visual. Todo ocurre en el navegador en el hub de herramientas SVG. Para el panorama general, consulta también la guía completa de optimización SVG.
Impacto real en el tamaño
En un icono 24×24 con metadatos y paths sobreprecisos, los tres presets producen ganancias distintas. Las cifras exactas varían según el archivo — la herramienta muestra before/after en bytes y el porcentaje ahorrado.
Before optimization
- Tamaño de archivos
- ~4,2 KB
After optimization
- Tamaño de archivos
- safe ~3,4 KB · default ~2,1 KB · aggressive ~1,6 KB
Un SVG ya minificado a mano o pasado varias veces por SVGO puede converger: safe ≈ default ≈ aggressive. En ese caso, el minify de espacios basta — no hace falta volver a aggressive.
Buenas prácticas y trampas
SVGO aggressive puede romper workflows posteriores: animaciones SMIL/CSS basadas en IDs, scripts embebidos, filtros complejos o `<use href="#id">`. En esos casos, quédate en safe u optimiza a mano.
En producción, fija el preset en tu pipeline (svgo npm, plugin Vite/Webpack) y alinéalo con lo que validas en el navegador. Consulta también el artículo minificación en CI/CD para la automatización global.
Tabla comparativa de presets
El preset adecuado depende del tipo de asset y de tu tolerancia al riesgo visual — no solo del porcentaje mostrado.
Preset
Cuándo usarlo
Sube la presión de forma progresiva en lugar de empezar en aggressive.
Cuándo basta la herramienta del navegador
No hace falta instalar SVGO para comparar tres presets en un archivo recibido por email.
Límites: SVGO en CLI y en CI
La herramienta en línea es ideal para explorar y validar un preset. El batch sobre cientos de SVG, la integración pre-commit y la config de plugins custom siguen siendo cosa de SVGO npm o de plugins del bundler.
Una vez elegido el preset en la herramienta, reproduce la misma lógica (safe/default/aggressive) en tu `svgo.config.js` para evitar desvíos entre preview y build.
SVGO CLI y ecosistema
FastMinify expone tres presets con criterio. SVGO upstream ofrece granularidad plugin a plugin — útil cuando tienes reglas de equipo muy específicas.
svgo (npm CLI)
Referencia SVGO en línea de comandos — el mismo motor que el optimizador del navegador FastMinify.
Ventajas:
Inconvenientes:
vite-plugin-svgo / bundler plugins
Optimización en el import — práctico para componentes React/Vue.
Ventajas:
Inconvenientes:
minify-svg FastMinify
Limpieza rápida de espacios sin reestructuración SVGO profunda.
Ventajas:
Inconvenientes:
Minify SVG vs optimize SVGO
El minify rápido apunta al ruido sintáctico (espacios, comentarios, atributos evidentes). La optimización SVGO reestructura el markup: simplificación de paths, fusión de formas, limpieza de IDs — con un posible impacto visual si aprietas demasiado.
El preset safe ejecuta SVGO en una sola pasada (multipass: false) y desactiva las transformaciones estructurales: sin fusión de paths, sin conversión shape→path, sin limpieza de IDs, sin eliminación de elementos ocultos. Ideal para logos de clientes, ilustraciones con capas nombradas o SVG animados.
El preset default activa multipass: true y deja que SVGO aplique preset-default con las salvaguardas viewBox/title/desc. Es la elección cotidiana para iconos UI, pictogramas y assets de marketing tras una revisión visual.
El preset aggressive añade floatPrecision: 1, fuerza mergePaths y refuerza convertPathData. El tamaño suele bajar más, pero los detalles finos (curvas, esquinas) pueden moverse ligeramente. Resérvalo para iconos simples, sprites o SVG sin animación ni dependencia de IDs CSS/JS.
Usar el optimizador SVGO FastMinify
Pega tu SVG, elige el preset en el panel de opciones y compara la salida y las stats. La herramienta optimize SVG en línea se ejecuta enteramente en el navegador — no se envía nada al servidor.
Para una limpieza solo de espacios sin tocar los paths, el minificador SVG sigue siendo más rápido. Encadena minify y luego optimize default si quieres las dos pasadas.
Los iconos informativos deberían conservar title y desc — FastMinify los preserva en los tres presets. Para validar la estructura a11y, usa validate SVG en línea antes de entregar.
Conclusión
Los presets SVGO traducen un compromiso tamaño / riesgo visual. Empieza por safe en los assets sensibles, adopta default para el flujo cotidiano y reserva aggressive a los iconos simples donde cada byte cuenta. FastMinify te permite comparar los tres modos en local antes de fijar la config en CI.
Artículos relacionados
YAML roto, `on` o `jobs` ausentes, steps vacíos: valida la estructura de tus workflows antes del push — y deja actionlint para la CI.
Errores de sintaxis SDL, review de esquema y formateo antes del merge — complemento al beautify GraphQL existente.
Reduce la factura OpenAI/Anthropic/Gemini: estima input/output, activa batch y caching en tus cálculos — tarifas verificadas, 100 % local.