Optimizador SVG

Cómo usar el optimizador SVG

1. Pega el código SVG en el panel izquierdo o carga un archivo .svg.
2. Elige las optimizaciones a aplicar.
3. Haz clic en Mejorar: el SVG limpio aparece a la derecha con un informe de ahorro.
4. Copia el resultado o descarga el archivo .svg mejorado.

Qué elimina cada opción

• Comentarios: bloques <!-- ... --> que dejan herramientas de diseño como Illustrator, Figma o Sketch. No contribuyen al resultado visual.
• Metadatos: etiquetas <metadata> y espacios de nombres específicos del editor (xmlns:inkscape, xmlns:sodipodi).
• Elementos ocultos: nodos con display:none o visibility:hidden.
• Colapsar espacios: espacios, tabulaciones y saltos de línea superfluos entre etiquetas.
• Minificar estilos inline: compacta los valores de atributos style.

¿Por qué mejorar SVGs?

Los SVGs exportados desde Illustrator o Inkscape contienen mucho marcado útil para editar pero innecesario para mostrar. Un icono SVG típico puede reducirse un 30-70 % eliminando estos metadatos.

Para uso en producción

Esta herramienta es un optimizador ligero del lado del cliente. Para un pipeline de build, considera SVGO o un plugin de bundler (Vite, Webpack).

Privacidad

Todas las optimizaciones se realizan en el navegador. No se envía ningún código SVG a ningún servidor.