SVG Optimizer: el svgo de verdad, en tu navegador
Reduce archivos SVG con los 45 plugins de svgo, activa o desactiva cada uno tú mismo, y consulta el tamaño con gzip que realmente se envía. Se ejecuta en un worker en segundo plano en tu propio equipo: sin subidas, sin colas, sin registro.
Cómo funciona
Tres pasos, y el del medio es tuyo.
- 1
Suelta el archivo
Arrastra un .svg o .svgz, pega el código, o envíalo desde otra herramienta. Todavía no se ejecuta nada: el archivo solo espera.
- 2
Decide qué hace
Elige un perfil, o abre los controles y ajusta tú mismo los 45 plugins. Cada uno indica si puede cambiar lo que ves.
- 3
Llévatelo
Descárgalo, cópialo como SVG, como componente de React o como data URI de CSS, o mándalo directo a la siguiente herramienta sin pasar por la carpeta de descargas.
Qué hace
El svgo de verdad, los 45 plugins
El mismo motor con el que construye toda la industria, ejecutándose en tu navegador en vez de en tu terminal. El perfil Equilibrado coincide exactamente con `npx svgo`, así que lo que ves aquí es lo que producirá tu build.
Abre archivos que otros rechazan
Los editores exportan XML inválido constantemente: un prefijo inkscape: sin declarar, un ampersand suelto, una marca BOM. Los parsers estrictos rechazan el documento entero. Este repara el defecto, optimiza el archivo y te dice exactamente qué ha tenido que arreglar.
Precisión que se ve
Amplía al 4000 %, muévete por el lienzo y mantén Alt para volver al original con el mismo aumento. El daño del redondeo se ve como una ondulación mucho antes de notarse en un porcentaje.
El tamaño que se envía de verdad
Bytes en bruto y bytes con gzip, uno al lado del otro. Cuentan historias distintas: quitar espacios en blanco luce espectacular en bruto y no cambia casi nada tras comprimir, porque gzip ya se ocupaba de eso.
Nada sale de tu equipo
El optimizador se ejecuta en un worker en segundo plano dentro de tu navegador; ningún archivo se sube. La vista previa va más allá y elimina scripts, manejadores de eventos y referencias remotas, así que un SVG hostil no puede ejecutar código ni llamar a casa mientras lo miras.
Directo a la siguiente herramienta
Envía el archivo optimizado al generador de favicons, al conversor de formatos, al creador de QR o al compresor sin descargarlo y volver a subirlo.
Preguntas Frecuentes
¿Se sube mi SVG a algún sitio?
No. svgo se ejecuta en un hilo worker dentro de tu navegador y el archivo nunca sale de tu equipo. La vista previa va un paso más allá: los scripts, los manejadores de eventos y las referencias a archivos remotos se eliminan antes de dibujar nada, así que abrir un archivo que te han enviado es seguro.
¿Por qué otras herramientas rechazan mi archivo y aquí funciona?
Porque los editores exportan XML inválido constantemente. El culpable habitual es un prefijo de namespace usado sin declarar: un <g inkscape:groupmode="layer"> sin su xmlns:inkscape correspondiente. Los parsers estrictos, incluidos svgo y tu propio navegador, rechazan el documento entero. Esta herramienta lo repara (junto con marcas BOM, ampersands sueltos y subconjuntos de DOCTYPE) antes de optimizar, y te dice exactamente qué ha arreglado.
¿Hasta dónde puedo bajar la precisión?
Depende del dibujo, y conviene mirarlo en vez de suponerlo. Bajar la precisión redondea las coordenadas, y en una ilustración grande o muy detallada ese redondeo se nota como una ondulación en las curvas bastante antes de que el archivo encoja de forma apreciable. Amplía y mantén Alt para alternar entre el resultado y el original con el mismo aumento.
¿Por qué los porcentajes en bruto y con gzip son tan distintos?
Porque miden cosas distintas. Quitar espacios en blanco y acortar nombres de atributos resulta espectacular en bytes en bruto, pero gzip ya colapsaba esas repeticiones, así que el tamaño comprimido apenas se mueve. Los cambios de geometría —convertPathData por encima de todos— reducen ambos. Si tu servidor envía respuestas comprimidas, y casi todos lo hacen, la cifra que importa es la de gzip.
¿Coincidirá el resultado con el svgo de mi build?
Con el perfil Equilibrado, sí: es el propio preset-default de svgo, con el mismo orden de plugins y los mismos valores por defecto. En cuanto cambies un interruptor te habrás apartado de eso, y la etiqueta Manual te lo indica.
¿Qué significa «cambia el comportamiento» en algunos plugins?
Que el plugin no solo hace el archivo más pequeño, sino que altera lo que el archivo hace. removeViewBox impide que el SVG escale. removeDimensions hace que llene su contenedor en vez de usar su propio tamaño. removeTitle borra el nombre accesible que anuncian los lectores de pantalla. Todos están desactivados por defecto y el botón Activar todo no enciende ninguno.