Cómo usar: Optimizador SVG
- Pega el código SVG o abre un archivo
.svg. - Mantén la configuración por defecto para el mayor ahorro, o baja la precisión para trazados aún más pequeños.
- Compara las vistas previas original y optimizada para asegurarte de que nada se ha desplazado.
- Copia el código optimizado o descarga el
.svg.
¿Por qué optimizar archivos SVG?
Los SVG exportados desde herramientas de diseño arrastran mucho peso: metadatos del editor, comentarios, capas ocultas, valores de atributo por defecto, grupos vacíos y coordenadas con seis decimales. Nada de eso afecta al aspecto de la imagen, pero puede hacer que el archivo pese entre dos y cinco veces más de lo necesario. Los iconos SVG insertados en línea repiten ese exceso en cada página.
Qué hace SVGO
SVGO es el optimizador de SVG estándar que usan la mayoría de las herramientas de compilación. Ejecuta un conjunto de plugins seguros:
- Elimina la declaración XML, los comentarios,
<metadata>, los espacios de nombres de editores (Illustrator, Inkscape, Sketch) y los elementos ocultos. - Colapsa grupos inútiles, une trazados cuando es posible y convierte formas en datos de trazado más cortos.
- Redondea los números a la precisión elegida y reescribe los comandos de trazado en su forma más corta.
- Minifica los estilos y colores en línea (
#FFFFFF→#fff) y elimina los valores por defecto. - Acorta los IDs y elimina los que nada referencia.
Esta herramienta siempre conserva el viewBox, necesario para que los SVG escalen correctamente.
Cómo elegir la precisión
| Precisión | Ideal para |
|---|---|
| 1 | Iconos sencillos dibujados sobre una cuadrícula de píxeles |
| 2–3 | La mayoría de iconos, logotipos e ilustraciones (por defecto 3) |
| 4–5 | Ilustraciones detalladas, mapas y gráficos con curvas finas |
Una precisión menor significa menos dígitos y archivos más pequeños, pero las curvas pueden desplazarse ligeramente. Para eso sirve la vista previa.
Width, height y viewBox
Eliminar width y height permite que el SVG se adapte a su contenedor con CSS, que es lo habitual en iconos y SVG en línea. Consérvalos cuando el SVG se use en una <img> sin dimensiones explícitas.
Próximos pasos: convierte el SVG optimizado en un fondo CSS, un componente React o un elemento de Webflow.
También se busca como: optimizar svg online, comprimir svg, minificar svg, minificador svg, reducir tamaño svg, compresor svg, svgo online, optimizador svg gratis.
Herramientas que combinan con: Optimizador SVG
- Escalador de ViewBox SVG — Normaliza iconos a un nuevo viewBox (por ejemplo, 24×24) reescalando las coordenadas reales dentro de cada path, circle, rect y polygon, sin trucos con transform="scale()".
- Compresor de imágenes — Reduce el tamaño de las fotos y los gráficos entre un 50 % y un 90 % sin que se note ninguna pérdida de calidad.
- Gzip Comprimir y Descomprimir — Comprime texto o cualquier archivo con gzip, zlib o deflate sin cabecera.
- Comprimir y descomprimir Brotli — Comprime texto o archivos con Brotli con cualquier calidad de 0 a 11, descomprime datos .br y compara el resultado con gzip.