Herramientas
Optimizar SVG
Limpia y reduce el peso de tus archivos SVG eliminando código innecesario.
Suelta aquí un archivo SVG
o haz clic para elegirlo, o pega el código SVG más abajo
Sobre esta herramienta
Los SVG exportados desde Illustrator, Figma o Inkscape suelen llevar metadatos, comentarios, grupos vacíos y decimales de más que no aportan nada al dibujo. Al limpiarlos, el archivo pesa menos, la web carga antes y el código se lee mejor si lo incrustas en HTML o en un componente. Es útil para iconos, logotipos e ilustraciones antes de subirlos a una web o a un repositorio.
Suelta un archivo .svg en el recuadro, haz clic para elegirlo o pega directamente el código en «SVG de entrada». La optimización es automática: verás el peso original, el optimizado, lo que te ahorras y el porcentaje de reducción. Debajo aparecen el código resultante y una vista previa para comprobar que el dibujo no ha cambiado. Después, pulsa «Descargar SVG optimizado» o «Copiar código SVG».
El proceso usa SVGO, una librería de código abierto, y se ejecuta entero en tu navegador: el archivo no sale de tu equipo. Aplica varias pasadas con la configuración estándar, elimina los atributos width y height (conservando el viewBox) y los atributos data-*. No convierte imágenes PNG o JPG a SVG ni vectoriza mapas de bits; si el SVG trae una imagen incrustada, esa parte apenas se reduce.
Preguntas frecuentes
¿Cuánto se reduce el peso de un SVG al optimizarlo?
Depende de su origen. Un SVG exportado desde un programa de diseño suele bajar entre un 20 % y un 60 %; uno escrito a mano o ya optimizado apenas cambiará. La herramienta te muestra el ahorro exacto en cada archivo.
¿Optimizar un SVG cambia cómo se ve?
No debería: SVGO solo quita información que no afecta al dibujo y redondea coordenadas con una precisión que no se aprecia. Aun así, revisa la vista previa, sobre todo si el SVG usa filtros, máscaras o animaciones complejas.
¿Por qué mi SVG optimizado ocupa todo el ancho de la página?
Porque se eliminan los atributos width y height y se conserva el viewBox, de modo que el SVG se adapta a su contenedor. Dale el tamaño con CSS o vuelve a añadir width y height en el código si los necesitas.
¿Se conservan los id y las clases del SVG?
Las clases se mantienen, pero la configuración estándar de SVGO puede acortar o quitar id que no se usan dentro del propio SVG. Si tu CSS o tu JavaScript dependen de un id concreto, compruébalo en el código resultante.