§ COMPARATIVA TÉCNICA
aGo SVG Purge vs SVGOMG: ¿cuál usar para optimizar SVG?
SVGOMG es la interfaz oficial sobre el motor SVGO con control fino por regla, muy usada por quien optimiza assets pieza por pieza. aGo SVG Purge apunta a un flujo más rápido: tres presets bien afinados (mínimo, balanceado, agresivo), diff visual de qué se eliminó y export directo a componente React, Vue o Astro. Esta comparativa describe cuándo conviene cada uno, con datos al 2026-05-24.
Resumen rápido
Elige aGo SVG Purge si quieres optimizar rápido con presets confiables, ver visualmente qué se eliminó antes de aceptar el cambio y exportar el resultado como componente para tu framework.
Elige SVGOMG si necesitas control quirúrgico sobre cada regla de SVGO, optimizar SVGs con casos límite (referencias internas complejas, filtros, máscaras) o auditar tu output con la precisión que la herramienta oficial te da.
Ambas comparten motor conceptual (SVGO). La diferencia es la curva de uso: presets confiables vs sliders Lighthouse-grade.
Tabla de criterios
| Criterio | aGo SVG Purge | SVGOMG |
|---|---|---|
| Privacidad | Cliente puro, cero servidor | Cliente puro, cero servidor |
| Motor base | Port del motor SVGO + DOMParser nativo | SVGO oficial corriendo en navegador |
| Modo de control | 3 presets (mínimo, balanceado, agresivo) | Slider por cada regla SVGO |
| Diff visual | Sí, muestra elementos eliminados | Comparación lado a lado de SVG original vs optimizado |
| Preservación de IDs referenciados | Automática | Configurable por regla |
| Export multi-formato | SVG, React JSX, Vue, Astro | SVG limpio |
| Batch (múltiples archivos) | Sí, ZIP con todos | Una pieza a la vez |
| Reducción típica (icono Figma) | 70% a 85% | 70% a 90% según configuración |
| Curva de aprendizaje | Baja | Media (entender qué hace cada regla) |
| Open source | Privado, gratis | Open source (parte de SVGO) |
| Mantenedor | aGo lab | Comunidad SVGO (Jake Archibald y colaboradores) |
| Precio | Gratis | Gratis |
Datos al 2026-05-24. Verifica antes de tomar decisiones de software, especialmente si el costo de equivocarte es alto.
Cuándo elegir aGo SVG Purge
SVG Purge resuelve el caso de "exporté 40 íconos de Figma y necesito limpiarlos ya". Arrastras la carpeta, eliges preset (balanceado suele alcanzar) y descargas el ZIP con todos optimizados. El diff visual muestra qué se eliminó (metadatos, elementos vacíos, atributos editor) para que valides en un golpe de vista que no se rompió nada importante.
En proyectos de aGo lab usamos SVG Purge cuando integramos sets de íconos en una librería de componentes. El export directo a Astro (con tipado de props y attrs auto-spread) ahorra el paso manual de envolver cada SVG en un componente y convertir atributos. El ahorro de peso del bundle final, en proyectos con muchos íconos, suele estar entre 30% y 50% comparado contra los SVGs sin optimizar.
También conviene cuando tu equipo no es experto en SVGO y prefieres confiar en presets validados antes que en una configuración manual donde una regla mal entendida rompe el SVG.
Cuándo elegir SVGOMG
SVGOMG sigue siendo el referente cuando necesitas auditar regla por regla qué le hace el optimizador a tu SVG. Cada slider corresponde a un plugin de SVGO documentado, con descripción y enlace al repo. Si tu SVG tiene casos límite (referencias internas con url(#id), filtros, máscaras, gradientes definidos en defs), el control fino de SVGOMG te permite desactivar plugins específicos que romperían esas referencias.
Para quien optimiza un asset crítico (el logo principal de la marca, el ícono del producto que aparece en miles de páginas), el control quirúrgico paga. Puedes mover precisión decimal entre 1 y 6, decidir si conservar IDs originales o renombrarlos, y ver el SVG resultante actualizarse en tiempo real. Es la herramienta de referencia para auditoría Lighthouse de assets vectoriales.
Es proyecto open source mantenido por la comunidad SVGO con historial de muchos años. Si necesitas auditar el código o ejecutarlo en tu propia infraestructura, está disponible en GitHub.
Diferencias técnicas relevantes
SVGO es el motor canónico de optimización SVG: una colección de plugins en Node.js que cada uno aplica una transformación específica (cleanupIds, removeDimensions, collapseGroups, etc.). SVGOMG es su interfaz web oficial que ejecuta el motor en navegador a través de un bundle compilado. aGo SVG Purge adopta el mismo modelo conceptual pero lo encapsula en presets validados, con DOMParser nativo del navegador para el parseo inicial (más rápido que el parser de SVGO en navegador) y luego aplica las transformaciones equivalentes.
La diferencia práctica está en el target del usuario. SVGOMG asume que conoces SVGO; sus sliders son los plugins literales del motor. SVG Purge asume que conoces el resultado deseado y empaqueta combinaciones probadas. Para 90% de los SVGs que vienen desde Figma, Illustrator o Sketch, los presets de Purge dan output equivalente o mejor (con preservación automática de IDs referenciados) que una configuración manual de SVGOMG mal afinada.
El export como componente React, Vue o Astro requiere un paso de transformación adicional: convertir nombres de atributos kebab-case a camelCase para JSX (stroke-width pasa a strokeWidth), escapar caracteres reservados, y envolver el SVG en una declaración de componente que acepte className/style/props. SVG Purge hace esto automáticamente. SVGOMG da SVG limpio; el paso a componente lo haces tú con SVGR (React), unplugin-icons o tu propio script.
El diff visual de elementos eliminados (Purge) ayuda a entender qué cambió sin tener que comparar dos bloques de XML. Es útil cuando importas un SVG con muchos paths superpuestos: el preset agresivo puede fusionar paths que comparten color y transformación, y ver gráficamente el cambio confirma que no se rompió la composición.
Preguntas frecuentes
¿Qué metadatos limpia exactamente una optimización SVG?
Una optimización típica de SVG remueve: comentarios XML, declaraciones de DOCTYPE, atributos editor-specific (sodipodi, inkscape, Adobe Illustrator), espacios en blanco entre tags, IDs no referenciados desde otros elementos del SVG, metadatos como title, desc y metadata no esenciales, y atributos default de SVG que no aportan información. aGo SVG Purge aplica estos pasos con presets: el modo mínimo conserva títulos y descripciones (útil para accesibilidad); balanceado los descarta si no se usan; agresivo elimina todo lo no estrictamente necesario para renderizar.
¿Se pierde calidad visual al optimizar un SVG?
No, si la optimización se hace bien. SVG es vectorial: limpiar metadatos, redondear coordenadas a una precisión razonable y simplificar paths con tolerancia mínima no degrada la imagen percibida en pantalla. El riesgo aparece con configuraciones agresivas que reducen precisión decimal por debajo de lo necesario, fusionan paths que comparten transformaciones distintas, o eliminan atributos viewBox por error. aGo SVG Purge usa por defecto precisión de 3 decimales, que es invisible en pantalla pero recorta peso. Si trabajas con SVGs científicos o de ingeniería donde cada decimal importa, conviene el preset mínimo o configurar SVGOMG con cuidado.
¿Funciona con SVG animados?
Sí, con cuidado. SVG admite animación de tres formas: SMIL (animate, animateMotion), CSS (transitions, keyframes sobre selectores) y JavaScript (manipulación de atributos). La optimización agresiva puede romper animaciones si elimina IDs referenciados desde el CSS o JS externo, o si reordena elementos que el SMIL apuntaba por orden. aGo SVG Purge detecta IDs referenciados internamente y los preserva. Si tu animación vive en CSS externo o JS que apunta por ID o clase, conviene usar el preset mínimo o marcar manualmente los atributos a conservar. SVGOMG ofrece slider para preservar IDs específicos con control fino.
¿Exporta a componente React, Vue o Astro?
aGo SVG Purge incluye export como componente React (JSX con camelCase en atributos, props para className y style), Vue (template con kebab-case nativo de Vue) y Astro (componente .astro con tipado de props). Esto evita el paso manual de convertir stroke-width a strokeWidth, escapar caracteres especiales y agregar el wrapper de componente. SVGOMG exporta SVG limpio: pasar a componente lo haces con tu propia herramienta de build o con SVGR si trabajas en React.
¿Cuánto reduce un SVG típico exportado desde Figma?
Depende del archivo, pero los rangos típicos están bien establecidos. Un ícono simple de Figma exporta cerca de 4-8 KB con metadatos editor; tras optimización balanceada queda entre 800 B y 2 KB. Una ilustración mediana de Figma exporta entre 30 y 80 KB; optimizada baja al rango 8-20 KB. Logos complejos pueden ahorrar más del 70% si Figma incluyó muchos paths superpuestos que el optimizador puede simplificar. aGo SVG Purge muestra delta de peso y diff visual de elementos eliminados antes de descargar.
¿Por qué a veces conviene controlar regla por regla en SVGOMG?
Algunos SVGs tienen casos límite donde un preset general rompe algo específico. Por ejemplo, un SVG con filter que referencia un fragmento por URL fragment (url(#mi-filter)) puede romperse si el optimizador renombra IDs sin mantener la referencia. SVGOMG permite desactivar cleanupIds, mantener viewBox, conservar attributesToKeep, etc., con sliders y toggles individuales. Para esos casos, su control quirúrgico es difícil de superar. aGo SVG Purge cubre el 90% de los casos con tres presets bien afinados; el restante 10% donde necesitas controlar reglas atómicas, SVGOMG sigue siendo la referencia.
¿Quieres probar aGo SVG Purge? Abrir aGo SVG Purge
¿Necesitas un sistema a medida con assets vectoriales optimizados y librería de componentes coherente? aGo lab construye software para empresas. Conversemos.