Cómo optimizar un SVG
- Suelta tu archivo SVG (o un lote de ellos) en el recuadro de arriba, o haz clic en Elegir archivos.
- Ajusta opcionalmente la Precisión decimal, valores más bajos (0-2) exprimen más bytes; el valor por defecto de 3 es un equilibrio seguro que la mayoría de los iconos nunca necesitan cambiar.
- Pulsa Optimizar SVG y espera a que termine la barra de progreso, esto es casi instantáneo ya que los archivos SVG son texto plano.
- Descarga cada archivo limpio. Los tamaños antes/después se muestran para que veas exactamente cuánto ahorraste, y tu archivo original queda intacto.
Por qué optimizar un SVG
SVG es un formato vectorial basado en texto y legible por humanos, precisamente por eso tiende a acumular hinchazón que nadie nota. Un logo exportado de Illustrator o Figma lleva habitualmente comentarios generados, un bloque <metadata> entero describiendo la sesión de edición, grupos <defs> y capas sin usar, y coordenadas de ruta especificadas con más de 10 decimales cuando 2 o 3 renderizarían idénticamente en cualquier pantalla. Nada de eso cambia el aspecto de la imagen, solo hace el archivo más grande de descargar y más lento de analizar.
Para un solo icono este desperdicio son unos pocos cientos de bytes y a nadie le importa. Pero un sitio que envía docenas de iconos SVG inline, o un sistema de diseño que sirve la misma hoja de sprites a cada visitante, paga ese impuesto en cada carga de página. Eliminar la suciedad del editor y redondear la precisión de coordenadas suele reducir una exportación en bruto un 30-70% sin diferencia visible, lo cual es una victoria sencilla y segura para el peso de página y las Core Web Vitals.
Elegir una precisión, con números reales
La opción de precisión es la única decisión de criterio. Para hacerla concreta, estas son cifras reales de la muestra que usa la propia suite de tests de esta herramienta: una exportación de 484 bytes al estilo de Illustrator que lleva una declaración XML, un comentario de generador, un bloque <metadata>, un <title>, un <desc>, una regla de estilo sin usar, un <rect> y un <path> con coordenadas escritas a seis decimales. Cada fila es ese archivo pasado por la configuración exacta de SVGO que esta herramienta lleva.
| Precisión | Salida | Cambio |
|---|---|---|
| 6 | 273 bytes | 43,6% más pequeño |
| 3 (por defecto) | 246 bytes | 49,2% más pequeño |
| 2 | 234 bytes | 51,7% más pequeño |
| 1 | 226 bytes | 53,3% más pequeño |
| 0 | 210 bytes | 56,6% más pequeño |
Destacan dos cosas. La mayor parte del ahorro ya está embolsada antes de que la precisión entre en escena, porque borrar la declaración, el comentario, los metadatos y la regla de estilo muerta es el grueso de la victoria. Y la curva de 3 a 0 es plana: los 36 bytes que las separan rara vez compensan introducir un redondeo sobre el que después tienes que razonar. Esa misma tanda muestra también las otras reescrituras ocurriendo en la misma pasada, ya que el <rect> vuelve como <path> y stroke="blue" vuelve como stroke="#00f", mientras que el <title> y el <desc> siguen ahí intactos.
El valor por defecto de 3 es el propio valor por defecto de SVGO y la respuesta correcta para iconos y gráficos de interfaz. Baja a 1 o 2 para ilustraciones grandes con miles de puntos de trazado, donde el ahorro por número se multiplica hasta ser algo real. Sube a 5 o 6 cuando las coordenadas tienen significado más allá de la visualización, como un mapa, un dibujo técnico o un archivo que acabará siendo una trayectoria de máquina.
Leer el comentario de estadísticas
La primera línea de cada salida es un comentario como este:
<!-- svg-optimizer: 1000 -> 500 bytes (50.0% smaller); gzip estimate ~300 bytes -->La cifra de gzip no es un multiplicador aproximado de andar por casa. Se produce comprimiendo de verdad el marcado optimizado con la API de compresión nativa del navegador, tomada prestada del Minificador de CSS, que comparte este formato de informe. Ese número es el que importa si sirves el archivo por HTTP con compresión activada, y explica un resultado que sorprende: la repetición abundante en los datos de trazado se comprime extremadamente bien, así que un archivo que encoge un 40 por ciento en crudo puede encoger solo un 15 por ciento por el cable.
Lo que esto no va a hacer por ti
SVGO es un optimizador de texto, así que sus límites se siguen de ahí. No rasteriza (usa Convertir SVG a PNG cuando una plataforma rechace vectores), no vectoriza un mapa de bits (eso es Convertir PNG a SVG), y no recomprime una imagen ráster en base64 incrustada dentro del marcado, que es la razón más común de que un SVG siga siendo obstinadamente grande. No fusiona varios archivos en una hoja de sprites, no reduce subconjuntos de fuentes incrustadas, y no puede convertir elementos de texto en contornos.
También es estricto donde un minificador de CSS es indulgente. Dale marcado roto y se detiene con un error claro de Invalid SVG file en lugar de escribir algo de apariencia plausible y corrupto, que es el comportamiento que quieres de una herramienta cuya salida estás a punto de commitear. Un archivo vacío es la única excepción y se maneja en silencio.
Tu SVG nunca sale de tu dispositivo
Los archivos SVG pueden llevar más que una forma, el bloque <metadata> que escriben algunos editores puede referenciar la ruta original del archivo, la aplicación de edición y su versión, o un perfil de color incrustado. Los típicos “minificadores de SVG online gratis” suben el archivo a un servidor para ejecutar exactamente la misma limpieza de código abierto que tú mismo podrías ejecutar, lo que significa confiar a un tercero archivos que pueden incluir branding aún no publicado, logos de clientes, o iconos de un proyecto bajo NDA.
Esta herramienta ejecuta SVGO (el optimizador de SVG de código abierto más usado) compilado para ejecutarse directamente en tu pestaña del navegador. El archivo se lee, limpia y prepara para descarga enteramente en tu dispositivo, sin ninguna petición de red para el archivo en sí, sin cuenta, y sin nada que quede una vez cierras la pestaña.
Usos habituales
- Reducir un lote de iconos exportados antes de añadirlos a un sistema de diseño o hoja de sprites de iconos.
- Limpiar una exportación SVG de Illustrator o Figma antes de incrustarla inline en HTML o un componente.
- Eliminar metadatos y comentarios del editor de un logo antes de compartirlo públicamente.
- Reducir la precisión de datos de ruta en ilustraciones complejas para reducir el peso de página sin pérdida visible.
- Obtener una comparación rápida de tamaño antes/después para decidir si un SVG merece más optimización.
- Reducir también otros recursos web de una página, consulta el compañero Conversor de TTF a WOFF2 para una fuente web personalizada que podría beneficiarse del mismo tratamiento.
