Compresor de animaciones SVG

• Compresión de animaciones SVG instantánea en tu navegador: comprime animaciones SVG al instante en tu navegador, sin subidas a servidores, sin procesamiento en la nube y sin esperas. El compresor de animaciones SVG elimina metadatos del editor, quita animaciones SMIL sin efecto y optimiza los datos de trazado en milisegundos, todo en tu dispositivo.
• Compresor de animaciones SVG online seguro: tu SVG nunca sale de tu dispositivo. El compresor de animaciones SVG se ejecuta por completo en tu navegador: sin subidas a servidores, sin transmisión de datos y 100 % privado. Seguro para animaciones de interfaz propietarias, recursos de marca y archivos SVG de producción.
• 9 opciones de compresión configurables: el compresor de animaciones SVG ofrece nueve optimizaciones que se pueden activar individualmente, desde eliminar datos de editor de Inkscape/Illustrator hasta quitar animaciones SMIL sin efecto y optimizar la precisión de las coordenadas de trazado. Activa solo las transformaciones que necesites.
• 100 % gratis para siempre: el compresor de animaciones SVG es totalmente gratis, sin registro, sin plan premium, sin límites de tamaño de archivo y sin anuncios. Comprime animaciones SVG ilimitadas sin coste alguno, para siempre.

• Optimización del rendimiento web: comprime las animaciones SVG exportadas desde Inkscape, Illustrator o Figma antes de incrustarlas en páginas web: los SVG exportados por editores contienen kilobytes de metadatos invisibles para los usuarios que inflan el tamaño del archivo. El compresor de animaciones SVG suele lograr una reducción del 40-70 % en SVG animados exportados por editores.
• Optimización de componentes SVG en React y Next.js: comprime las animaciones SVG antes de convertirlas en componentes React con SVGR: los SVG más pequeños producen componentes React más pequeños y reducen el tamaño del bundle de JavaScript. El compresor de animaciones SVG elimina los espacios de nombres del editor que causan problemas de análisis a SVGR.
• Optimización de animaciones para web móvil: reduce el tamaño de las animaciones SVG para su entrega en web móvil: los SVG más pequeños se analizan más rápido en CPUs móviles y reducen el consumo de datos en redes 3G/4G. El compresor de animaciones SVG elimina las animaciones SMIL sin efecto que consumen CPU sin producir efectos visibles.
• Preparación de animaciones para Lottie y GSAP: comprime los archivos SVG de origen antes de importarlos en flujos de animación de Lottie o GSAP: los SVG más limpios con datos de trazado optimizados producen importaciones de animación más precisas y archivos de salida más pequeños. El compresor de animaciones SVG elimina los artefactos del editor que confunden a las herramientas de animación.
• Optimización de recursos SVG de sistemas de diseño: comprime iconos e ilustraciones SVG animados antes de publicarlos en un sistema de diseño o paquete npm: el compresor de animaciones SVG elimina los metadatos de Figma, Sketch e Illustrator que inflan el tamaño de los archivos SVG sin afectar al renderizado.
• Optimización de Core Web Vitals y PageSpeed: reduce el tamaño de las animaciones SVG para mejorar las puntuaciones de Largest Contentful Paint (LCP) y Total Blocking Time (TBT): los SVG en línea grandes retrasan el renderizado. El compresor de animaciones SVG te ayuda a cumplir la recomendación «Codifica las imágenes de forma eficiente» de Google PageSpeed para recursos SVG.

Los archivos SVG (Scalable Vector Graphics) exportados desde herramientas de diseño como Inkscape, Adobe Illustrator y Figma contienen gran cantidad de metadatos del editor (declaraciones de espacio de nombres, propiedades del documento, nombres de capas y atributos específicos de la herramienta) que son invisibles para los usuarios, pero inflan notablemente el tamaño del archivo. Los SVG con animaciones SMIL (que usan <animate>, <animateTransform> y <animateMotion>) suelen contener keyframes redundantes en los que los valores from y to son idénticos: no producen ninguna animación visible, pero consumen bytes y CPU. Nuestro compresor de animaciones SVG aplica nueve optimizaciones configurables para reducir el tamaño del archivo SVG conservando todas las animaciones visibles y el renderizado.

1. 1. Pega tu código SVG: introduce tu SVG en el panel de entrada o haz clic en «Subir .svg» para cargar un archivo. Usa «Cargar ejemplo» para probar el compresor con un SVG animado realista exportado desde Inkscape.
2. 2. Elige las opciones de compresión y haz clic en «Comprimir SVG»: las nueve optimizaciones están activadas por defecto. El compresor aplica cada transformación en secuencia y muestra los comentarios eliminados, los elementos eliminados y los trazados optimizados. El procesamiento se ejecuta por completo en tu navegador: tu SVG nunca sale de tu dispositivo.
3. 3. Copia o descarga el SVG comprimido: el panel de salida muestra el código SVG comprimido. Cópialo al portapapeles o descárgalo como archivo .svg. Sustituye el SVG original en tu proyecto: la salida comprimida se renderiza igual en todos los navegadores.

• Metadatos del editor: se eliminan los atributos de espacio de nombres de Inkscape (inkscape:*, sodipodi:*), los atributos de Illustrator (i:*) y los de Sketch (sketch:*): pueden representar entre el 20 y el 50 % del tamaño de un SVG exportado.
• Animaciones SMIL sin efecto: los elementos <animate> en los que from es igual a to no producen ninguna animación visible: se eliminan por completo. Suelen aparecer en SVG exportados por herramientas que añaden stubs de animación a todos los elementos.
• Precisión de coordenadas de trazado: las coordenadas de los datos de trazado con más de 2 decimales se redondean, por ejemplo, M 10.123456789 20.987654321 pasa a ser M 10.12 20.99. La precisión subpíxel más allá de 2 decimales es imperceptible en cualquier tamaño de pantalla.
• Valores de atributos predeterminados: atributos como opacity="1", stroke="none", fill-opacity="1" y display="inline" son valores predeterminados de SVG y se eliminan: añaden bytes sin cambiar el renderizado.

El compresor de animaciones SVG aplica transformaciones seguras y conservadoras mediante procesamiento basado en expresiones regulares. No analiza el DOM del SVG, por lo que las estructuras anidadas complejas pueden no optimizarse por completo. Para obtener la máxima compresión, usa el compresor de animaciones SVG como primera pasada y luego pasa la salida por SVGO (un optimizador de SVG basado en Node.js) para lograr un ahorro adicional. Verifica siempre que el SVG comprimido se renderiza correctamente en tus navegadores objetivo antes de desplegarlo en producción, sobre todo en animaciones SMIL complejas con interacciones CSS.