Archivos SVG más pequeños que se ven exactamente igual
Los SVG exportados desde Illustrator, Figma, Inkscape o Sketch cargan mucho peso que el navegador nunca dibuja: metadatos del editor, comentarios, capas ocultas, números con ocho decimales, grupos dentro de grupos. Este optimizador ejecuta SVGO —la herramienta estándar de optimización de SVG— en tu navegador para eliminarlo, y muestra el resultado junto al original para que veas que solo ha cambiado el tamaño.
Cómo optimizar un SVG
- 1Suelta uno o varios archivos SVG, elígelos o pega código SVG.
- 2Revisa la vista previa de antes y después, y el tamaño ahorrado en cada archivo.
- 3Baja la Precisión para archivos más pequeños; súbela si las curvas empiezan a verse mal.
- 4Activa o desactiva plugins de SVGO uno a uno; por ejemplo, quita width y height para que el SVG se escale con CSS.
- 5Descarga el SVG optimizado, copia el código o descarga todos los archivos a la vez en un ZIP.
Qué se elimina
- Datos del editor
- Metadatos, comentarios, la declaración XML y el doctype, y los espacios de nombres y atributos que Inkscape, Illustrator y Sketch añaden para su propio uso.
- Código redundante
- Grupos y atributos vacíos, valores por defecto, elementos ocultos, definiciones e ID sin usar, y grupos que envuelven un solo elemento.
- Geometría innecesariamente larga
- Los datos de los trazados se reescriben con comandos relativos y menos dígitos, las formas pasan a ser trazados más cortos y las transformaciones se integran en las coordenadas cuando es posible.
Valores por defecto seguros, opciones más agresivas
El conjunto por defecto es el propio preset de SVGO, pensado para no alterar la imagen. Las opciones extra van más allá, pero cambian algo más que el tamaño: quitar width y height hace que el SVG llene su contenedor, quitar el título oculta su nombre a los lectores de pantalla, y quitar xmlns solo sirve para SVG pegado directamente dentro de HTML.
Para convertir primero un mapa de bits en SVG, usa el conversor de imágenes, que puede enviar su SVG directamente aquí; para incrustar el resultado, usa imagen a Base64.
Preguntas frecuentes
- ¿Es lo mismo que SVGO o SVGOMG?
- Ejecuta el propio SVGO, el mismo motor que usa SVGOMG, con su preset por defecto y los mismos plugins como interruptores. Todo se ejecuta en tu navegador.
- ¿Optimizar cambiará el aspecto de mi SVG?
- No con los ajustes por defecto. Una precisión muy baja puede deformar curvas finas, y algunas opciones extra cambian el tamaño o la accesibilidad; la vista previa de antes y después muestra la diferencia al instante.
- ¿Puedo optimizar varios archivos SVG a la vez?
- Sí. Suelta todos los que quieras, cambia los ajustes una sola vez para todos y descárgalos juntos en un ZIP.
- ¿Por qué se muestra el tamaño con gzip?
- Los servidores web suelen enviar los SVG comprimidos con gzip, así que se acerca más a lo que los visitantes descargan realmente.
- ¿Se suben mis archivos?
- No. SVGO se ejecuta en tu navegador y los archivos nunca salen de tu dispositivo.