¿Por qué SVG necesita optimización?
SVG exportado desde Figma, Illustrator o Inkscape suele ser 5-10x más grande de lo necesario. Añaden pilas de metadata (`<metadata>`, `<title>`, el editor que produjo el fichero), nombres de clase largos, atributos por defecto (`fill="black"` aunque sea el default), coordenadas con 15 decimales (`d="M12.345678901234567,5.987654321"`) y comentarios del editor.
El optimizador quita todo lo innecesario manteniendo idéntico el renderizado. Un fichero de 12 KB se convierte en 2 KB. Menos para descargar, FCP más rápido, bundle más pequeño.
Pega tu SVG, elige las opciones (qué quitar, a cuántos decimales redondear), inspecciona la visualización side-by-side para confirmar que nada se rompió, copia o descarga el resultado. Todo corre en tu navegador: el fichero nunca sale.
Cómo usar
- Pega código SVG en el panel izquierdo o pulsa "Subir fichero" para cargar desde disco.
- A la derecha ves la versión optimizada. Debajo: una comparación visual antes/después: deberían verse idénticas.
- En la sección opciones: marca lo que quieras quitar. Los defaults son agresivos (máximo ahorro).
- El slider de precisión controla los decimales para paths. 2 está bien para la mayoría de iconos, 4 para gráficos de precisión.
- Pulsa "Copiar" para copiar el resultado al portapapeles o "Descargar" para guardar como fichero.
Cuándo ayuda
Situaciones típicas en las que limpiar SVG vale la pena:
- Iconos en una app. Exportas 50 iconos de Figma, cada uno son 3 KB; tras optimizar, 400 bytes. Eso son 150 KB menos en tu bundle.
- Logo en la home. Un export de Illustrator a menudo tiene 30-50 KB de metadata. Tras limpiar son 3 KB, mejor performance.
- Fondos SVG. Un pattern de hero section tiene que ser ligero porque bloquea el renderizado above-the-fold.
- SVG inline dentro de un componente React. Menos código, más fácil de leer. Optimiza antes de pegar en un componente.
- Sprite SVG. Cientos de iconos en un fichero: cada byte cuenta.
- Email. SVG en emails (donde se soporta) gana mucho con minificación.
- CSS-in-JS. SVG inline como string en un fichero TypeScript debe quedarse corto.
A continuación, convierte tu SVG a un componente React con SVG a componente. Para edición de imágenes raster mira compresor de imágenes.