Prueba la herramienta gratuita abajo. Funciona en tu navegador, sin registro y sin descarga.
Por qué los archivos SVG pesan más de lo necesario
Los archivos SVG son imágenes escritas como código, y las herramientas de diseño suelen exportarlas con comentarios extra, números decimales largos, capas ocultas y datos que no necesitas. Ese peso extra hace que las páginas carguen más lento, sobre todo cuando un SVG se usa como icono o logotipo que aparece en cada página. Este optimizador reduce el código con SVGO, el optimizador estándar de SVG, funcionando por completo en tu navegador.
Pega tu código SVG, pulsa Optimizar y la herramienta devuelve un archivo más pequeño con la misma imagen. Muestra el tamaño antes y después, con el porcentaje ahorrado, y una vista previa del resultado para confirmar que la imagen sigue viéndose bien.
Cómo se usa
Pega código SVG en el cuadro, o pulsa el botón de ejemplo para probar un caso pequeño. Pulsa Optimizar. La herramienta ejecuta SVGO con varias pasadas, que limpia comentarios, redondea números largos, quita datos ocultos y convierte formas básicas en rutas más cortas cuando eso es seguro.
Revisa la vista previa y los tamaños. Si el resultado se ve bien, copia el código optimizado o descárgalo como un archivo .svg y úsalo en lugar del original.
Qué se quita
SVGO quita comentarios, datos del editor y valores por defecto que no cambian nada en la imagen. Acorta los números a una precisión razonable, elimina grupos vacíos y combina formas simples. Mantiene el dibujo en sí: las rutas, los rellenos y los tamaños que forman la imagen.
La mayoría de los SVG optimizados son entre un 20 y un 60 por ciento más pequeños que el original. Los archivos de herramientas de diseño, que suelen llevar muchos datos del editor, son los que más ahorran. Los SVG escritos a mano y ya ordenados ahorran menos, porque hay menos desperdicio que quitar.
Cuándo conviene optimizar
Optimiza iconos, logotipos e ilustraciones antes de ponerlos en una web. Los archivos más pequeños cargan más rápido, gastan menos datos móviles y hacen que las páginas se sientan más ágiles. Optimiza también antes de guardar SVG en un proyecto, porque un archivo ordenado se lee y se edita mejor después.
Guarda una copia del original si piensas editar la imagen otra vez en una herramienta de diseño. La versión optimizada es mejor para publicar, mientras que la original es mejor para editar.
Preguntas frecuentes
¿Mi SVG se envía a un servidor? No. SVGO se ejecuta en tu navegador y tu código queda en tu dispositivo.
¿La optimización cambia la imagen? En imágenes normales, no. Revisa la vista previa y guarda tu original si la imagen es compleja.
¿De verdad usa SVGO? Sí. La herramienta carga la versión oficial de SVGO para navegador y ejecuta su función de optimización sobre tu código.
¿Puedo optimizar muchos archivos a la vez? Esta herramienta optimiza un SVG cada vez. Repite los pasos para cada archivo.
Optimizar iconos para todo un sitio
Un icono solo rara vez importa por sí mismo, pero un sitio suele cargar docenas de ellos y su peso se suma. Toma un conjunto de veinte iconos de cinco kilobytes cada uno: son cien kilobytes de imágenes antes de que cargue cualquier otro contenido. Recortar cada icono un cuarenta por ciento ahorra cuarenta kilobytes en cada visita a una página, algo notable en conexiones móviles lentas y en páginas que deben sentirse instantáneas. El flujo de trabajo es sencillo: exporta los iconos, pasa cada uno por el optimizador, revisa las vistas previas y sustituye los originales por las versiones optimizadas en tu proyecto. Guarda los originales en una carpeta aparte, bien etiquetada, para que un diseñador pueda editarlos después sin perder calidad. Pon a los archivos optimizados el mismo nombre que a los originales, para que no haga falta cambiar código más allá de sustituir los archivos. Repite el proceso cada vez que se añada un icono nuevo, y el hábito mantiene todo el conjunto ligero con el tiempo, en lugar de dejar que el peso vuelva con cada nueva ronda de diseño.
Para logotipos, ten un cuidado extra con la vista previa. Un logotipo es un activo de marca, y hasta un cambio visual mínimo importa más que unos cientos de bytes ahorrados. Si la vista previa difiere en algo del original, conserva el logotipo original y optimiza solo los iconos.
También en inglés
Esta herramienta también está disponible en inglés: SVG Optimizer – Optimize SVG Files Online Free.