Optimizador de SVG
-
Tamaño Original
-
Tamaño Optimizado
-
Ahorro
¿Por qué Optimizar Archivos SVG?
Los archivos SVG exportados desde Illustrator, Figma o Inkscape contienen grandes cantidades de datos innecesarios: comentarios, metadatos del editor, atributos redundantes, números decimales demasiado precisos y contenedores vacíos. Estos inflan el tamaño de los archivos entre un 30% y un 70% sin ningún beneficio visual. Los SVG optimizados se cargan más rápido, consumen menos ancho de banda y pueden incrustarse (inline) de forma más limpia en el HTML.
8 Estrategias de Optimización
Alterne pases de optimización individuales para un control detallado sobre lo que se elimina
Estadísticas de Reducción de Tamaño
Vea el tamaño original, el tamaño optimizado y el porcentaje de ahorro después de cada ejecución de optimización
Optimización Segura
Todas las optimizaciones preservan la apariencia visual de su SVG — solo se eliminan los metadatos y el ruido
Cómo Optimizar SVG en 3 Pasos
Pegue el Código SVG
Copie el código fuente SVG de su herramienta de diseño o archivo y péguelo en el área de entrada
Seleccione Optimizaciones
Marque las opciones de optimización que desea aplicar — o utilice las predeterminadas para obtener la máxima reducción
Copiar y Desplegar (Deploy)
Copie el SVG optimizado y reemplace su archivo original, o incrustelo directamente en el HTML
Casos de Uso de Optimización de SVG
Bibliotecas de Iconos
Optimice conjuntos de iconos exportados desde Figma o Illustrator antes de empaquetarlos en una biblioteca de iconos
Activos de Logotipos
Limpie los SVG de logotipos exportados para usarlos en encabezados de sitios web, favicons y activos de marca
SVG Animados
Reduzca el tamaño base del archivo de los SVG animados, que ya son más grandes debido a los datos de animación
PWA y Móviles
Los SVG más pequeños reducen el uso de datos para los usuarios de móviles y mejoran las puntuaciones de rendimiento de Lighthouse
Mejores Prácticas para Optimizar SVG
✓ Tenga Cuidado al Eliminar IDs para Animaciones CSS
Si su SVG utiliza animaciones CSS o JavaScript dirigidas a IDs de elementos, mantenga desmarcada la opción 'Eliminar IDs' para evitar romper las animaciones.
✓ Mantenga el viewBox, Elimine width/height
Eliminar los atributos de ancho/alto (width/height) y mantener viewBox permite que los SVG se escalen de forma responsiva a través de CSS — el mejor enfoque para el diseño responsivo.
✓ Redondear Números a 2 Decimales
Las coordenadas de la ruta (path) con más de 5 decimales son invisibles e imperceptibles. Redondear a 2 decimales reduce significativamente el tamaño del archivo con cero diferencia visual.
✓ Automatizar con SVGO en CI/CD
Para proyectos grandes, integre SVGO en su canal (pipeline) de compilación para optimizar automáticamente todos los SVG durante el commit. Utilice esta herramienta para comprobaciones manuales rápidas.
❓ Preguntas Frecuentes
¿Cuánto puede reducir el tamaño del archivo la optimización de SVG?
Normalmente, una reducción del 30% al 70% dependiendo de la fuente. Los SVG de Illustrator a menudo tienen el mayor ahorro. Las exportaciones de Figma ya son relativamente limpias. Las mayores ganancias provienen de eliminar los metadatos del editor, los comentarios y redondear la precisión decimal.
¿La optimización cambiará el aspecto de mi SVG?
No — todas las optimizaciones en esta herramienta solo eliminan datos invisibles (comentarios, metadatos, atributos redundantes) o redondean números a una precisión imperceptible. La salida visual es idéntica a la original.
¿Por qué debería eliminar los atributos de ancho y alto (width y height)?
El ancho/alto codificados (hardcoded) evitan que los SVG se escalen de forma responsiva a través de CSS. Al eliminarlos y mantener solo el viewBox, puede controlar las dimensiones del SVG por completo a través de las propiedades de ancho/alto de CSS.
¿Cuál es la diferencia entre esto y SVGO?
SVGO es una herramienta de línea de comandos de Node.js y el estándar de la industria para la optimización de SVG. Esta herramienta proporciona una cómoda interfaz basada en el navegador para las optimizaciones más comunes sin requerir la instalación de Node.js.