El minimizador SVG procesa tus archivos a traves del motor SVGO para eliminar metadatos del editor, comentarios y atributos redundantes, reduciendo el tamano del archivo entre un 30 y un 70 % sin alterar el resultado visual. Es especialmente util para limpiar archivos exportados desde herramientas de diseno como Illustrator, Figma o Inkscape antes de desplegarlos en un proyecto web.
De donde vienen los ahorros de tamano
El software de diseno exporta una gran cantidad de datos que el navegador nunca usa: nombres de capas, definiciones de estilo no utilizadas, espacios de nombres XML especificos del editor y coordenadas de punto flotante con seis o mas decimales como 23.456789. Eliminarlos no produce ningun efecto visual. El ahorro exacto depende de la herramienta de origen: los exports de Illustrator suelen estar llenos de declaraciones de espacio de nombres, mientras que los de Figma suelen ser mas compactos.
Procesamiento multiple
Activar el procesamiento multiple hace que SVGO repita el ciclo de optimizacion hasta que el tamano del archivo deje de reducirse. En archivos con agrupaciones <g> muy anidadas, el procesamiento multiple suele ahorrar entre un 3 y un 10 % adicional respecto a un solo paso. Para iconos simples y planos la diferencia es inapreciable. El procesamiento se ejecuta en el navegador y termina en menos de un segundo incluso con varios pases.
Embellecer frente a minimizar
"Embellecer codigo" reformatea la salida como XML indentado y legible, util cuando quieres inspeccionar o editar el SVG a mano despues. Si tu objetivo es el archivo mas pequeno posible para produccion, no actives esta opcion: los dos objetivos son opuestos y embellecer volvera a anadir los espacios en blanco que la minificacion acaba de eliminar.
Opciones que pueden romper tu SVG
Las opciones predeterminadas son seguras para iconos estandar. Estas requieren precaucion:
- Limpiar IDs — renombra y elimina los IDs que parecen no estar en uso. Si un CSS o JavaScript externo selecciona elementos SVG por ID para animar, desactiva esta opcion para que los selectores sigan funcionando.
- Eliminar elementos script / Eliminar elementos style — si el SVG contiene animaciones o comportamiento interactivo en
<script>o<style>, activar estas opciones elimina la animacion por completo. - Eliminar viewBox — sin
viewBox, el SVG no puede escalar de forma responsiva. Solo es seguro cuando el archivo tiene atributoswidthyheightfijos y no necesita escalar.
Todo el procesamiento se ejecuta localmente en el navegador; ningun archivo se envía a ningun servidor.