SVG es un formato de texto, así que cada atributo y cada decimal extra cuesta bytes. Los archivos exportados desde Illustrator, Figma, Inkscape o Sketch suelen incluir mucho que el navegador nunca necesita. Un optimizador lo elimina sin cambiar el aspecto de la imagen.
Qué infla un SVG
- Metadatos del editor: declaraciones XML, comentarios del generador, bloques
<metadata>y espacios de nombres propios del editor. - Valores por defecto: atributos que repiten lo que el navegador haría de todos modos.
- Elementos vacíos o inútiles: grupos vacíos, capas ocultas y definiciones sin usar.
- Exceso de precisión: coordenadas como
60.000000o12.3456789cuando dos decimales se ven igual en pantalla. - Trazados y transformaciones verbosos: comandos que pueden escribirse más cortos o fusionarse.
- Ids largos: nombres de capa como
Layer_1_copy_2a los que nada hace referencia.
Qué hace SVGO
SVGO, el optimizador de código abierto estándar, aplica un conjunto de plugins que eliminan o reescriben cada uno de estos elementos. Redondea los números a la precisión elegida, acorta los datos de los trazados, fusiona trazados y estilos cuando es seguro, limpia los ids y quita los comentarios. Con el modo multipaso activado se repite hasta que nada cambia, porque una limpieza suele hacer posible otra.
¿Cuánto se puede ahorrar?
Depende del archivo. El ejemplo de la herramienta, una pequeña carita sonriente exportada con el desorden típico de un editor, pasa de 786 bytes a 345, cerca de un 56 por ciento. Los iconos reales suelen reducirse entre un 30 y un 70 por ciento, mientras que un archivo ya optimizado a mano puede ahorrar muy poco. Los archivos con imágenes rasterizadas incrustadas (PNG en base64 dentro del SVG) no se reducen mucho, porque los datos dominan.
Revisa el resultado
Compara las vistas previas del original y del optimizado en la herramienta. Deben verse idénticas. Si algo cambia, reduce la pérdida de precisión subiendo el número de decimales, o desactiva la opción que eliminó un elemento que necesitabas.
Preguntas frecuentes
¿Optimizar reduce la calidad? No de forma visible con una precisión razonable. SVG es vectorial, así que no hay calidad de píxeles que perder, solo redondeo de coordenadas.
¿Se sube mi archivo? No. SVGO se ejecuta en tu navegador.