Optimizador de SVG

Qué le sobra a un SVG recién exportado

Un archivo SVG es texto, y como todo texto puede decir lo mismo con menos palabras. Los editores gráficos son generosos: guardan el nombre del programa, la versión, capas que quedaron vacías, identificadores que nadie referencia y coordenadas como 10.000000 donde bastaba 10. Nada de eso cambia un solo píxel de lo que ve tu visitante, pero todo eso viaja por la red en cada visita.

En iconos y logos exportados desde Illustrator o Figma es habitual recortar entre un 30 % y un 70 % del peso sin ninguna pérdida visual. En ilustraciones con trazados complejos el ahorro suele ser aún mayor, porque ahí es donde los decimales se multiplican.

Cómo usar esta herramienta

1. Arrastra tu archivo, pégalo como código o pulsa «Probar con un ejemplo».
2. Compara las dos vistas previas. Si el resultado se ve idéntico, el ahorro es gratis en el sentido literal: no perdiste nada.
3. Baja la precisión decimal hasta el punto justo antes de que las curvas empiecen a deformarse. Ahí está el mayor ahorro de todos.
4. Descarga el archivo, copia el código, o cópialo como data URI para incrustarlo sin alojarlo en ninguna parte.

Las optimizaciones opcionales, con cuidado

Las que vienen activadas por defecto son seguras: limpian sin cambiar el dibujo. Las opcionales pueden ser justo lo que necesitas o romperte el archivo, según el caso. Dos ejemplos de manual:

• removeViewBox quita el viewBox. Ahorra bytes, pero tu SVG deja de escalar: en la práctica casi nunca conviene activarla.
• removeDimensions hace lo contrario, quita width y height conservando el viewBox. Es la que sí quieres si vas a controlar el tamaño desde CSS.

Por eso la vista previa está siempre a la vista: activa, mira y decide. Si algo se rompe, lo verás al instante.

Y después, ¿dónde lo uso?

Un SVG ligero es la base de varias cosas que ya puedes hacer aquí mismo. Si buscas un icono para tu pestaña, la galería de favicons SVG tiene más de cincuenta listos para copiar y pegar, y esta herramienta te deja preparar el tuyo propio como data URI. Si quieres entender el formato por dentro, la guía completa para crear un favicon SVG explica los data URI, el modo oscuro y la compatibilidad entre navegadores.

Y si estás armando una identidad visual completa, el generador de paletas te da las escalas de color para pintar esos SVG con criterio. Todas las herramientas están en el índice de herramientas.

Preguntas frecuentes

¿Se suben mis archivos a algún servidor?

No. Toda la optimización ocurre dentro de tu navegador, en tu propio equipo. El archivo nunca viaja por la red, así que puedes optimizar material confidencial de clientes sin ningún riesgo. De hecho, la herramienta sigue funcionando si te quedas sin conexión después de cargar la página.

¿Por qué mi SVG exportado de Illustrator o Figma pesa tanto?

Los editores guardan mucha información que el navegador no necesita: metadatos del programa, comentarios, identificadores, capas vacías, estilos sin usar y coordenadas con hasta diez decimales. Todo eso ocupa espacio sin cambiar ni un píxel de lo que se ve. Limpiarlo suele recortar entre un 30 % y un 70 % del peso.

¿Qué es la precisión decimal y cuánto conviene bajarla?

Es la cantidad de decimales que se conservan en las coordenadas. Un valor de 2 o 3 es suficiente para casi cualquier icono o ilustración y ahorra muchos bytes. Si bajas demasiado verás las curvas deformarse en la vista previa: ahí es donde conviene subir un punto. Las ilustraciones muy detalladas o de gran tamaño pueden necesitar 4.

¿Puedo usar el SVG optimizado como favicon?

Sí, y es un uso muy recomendable. Con el botón «Copiar como data URI» obtienes el archivo listo para pegar directamente en una etiqueta link, sin necesidad de alojarlo. Cuanto más ligero sea el SVG, más corto será el data URI resultante.

¿Por qué a veces el archivo optimizado pesa más que el original?

Suele pasar cuando el archivo ya venía optimizado y activas la opción de formato legible, que añade saltos de línea y sangrías. También puede ocurrir si activas complementos opcionales que añaden atributos o prefijos. Desactiva el formato legible para publicar y compara de nuevo.