Mcatorce Suite
← Volver a herramientas

Optimizador de SVG

Minifica archivos SVG con SVGO directamente en tu navegador y compara el resultado con el original.

Resultado Total: 786 B a 345 B
pasted.svg 786 B a 345 B (56% menos)
OriginalOriginal
OptimizadoOptimizado
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><title>Smile</title><circle cx="60" cy="60" r="50" fill="#FC0" stroke="#000" stroke-width="2"/><circle cx="42" cy="48" r="6"/><circle cx="78" cy="48" r="6"/><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="4" d="M35 72q25 26 50 0"/></svg>

¿Qué hace un optimizador de SVG?

Los archivos SVG exportados desde herramientas de diseño llevan muchos datos que un navegador nunca necesita: metadatos del editor, comentarios, grupos vacíos, valores por defecto y números con muchos decimales. SVGO es el optimizador de código abierto estándar que elimina este desorden y reescribe trazados y transformaciones en una forma más corta, normalmente sin ningún cambio visible.

Los SVG más pequeños se descargan más rápido y es más barato incrustarlos en HTML. Todo se ejecuta en tu navegador, así que tu arte nunca se sube. Reduce la precisión numérica para ahorrar más y conserva el viewBox para que la imagen siga escalando bien.

Cómo optimizar un SVG

  1. Pega el código SVG o sube uno o varios archivos .svg.
  2. Ajusta las opciones. Conserva el viewBox y el título salvo que estés seguro de no necesitarlos.
  3. Compara las vistas previas del original y del optimizado, y luego copia el código o descarga el resultado.

Casos de uso comunes

  • Sitios más rápidos - reduce iconos e ilustraciones antes de añadirlos a una página.
  • Iconos en línea - limpia el código SVG antes de pegarlo en HTML o en un componente.
  • Entrega de diseño - elimina los restos del editor de los archivos exportados desde herramientas de diseño.