Animador de iconos SVG

Añade animaciones CSS llamativas a tus iconos SVG. Elige entre 12 preajustes de animación, personaliza la sincronización y exporta archivos SVG animados listos para tu sitio web.

Suelta tu icono SVG aquí

o haga clic para explorar los archivos

Se admiten archivos SVG de hasta 2 MB
Las animaciones CSS funcionan en todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge.
Herramientas relacionadas:
SVG a PNG SVG a ICO Eliminador de BG SVG Analizador SVG Comprimir SVG

Cómo animar tus iconos SVG

  1. Sube tu SVG Arrastre y suelte o haga clic para explorar. Compatible con cualquier icono o gráfico SVG.
  2. Elige una animación - Elija entre 12 ajustes preestablecidos: Pulso, Giro, Rebote, Sacudida, Desvanecimiento, Flotación, Balanceo, Latido, Voltear, Goma, Tambaleo o Gelatina.
  3. Ajustar la sincronización - Establezca la duración (de 0.2 s a 5 s), la función de facilitación y el número de iteraciones.
  4. Opcional: aplicar un color - Anule los colores de relleno y trazo del SVG con un color personalizado.
  5. Vista previa en tiempo real - Vea su animación en vivo antes de descargarla.
  6. Descargar o copiar - Obtenga el archivo SVG animado o copie el código directamente a su proyecto.

Ejemplos de animación

Pulse Escalar hacia arriba y hacia abajo
Girar Rotación 360 °
Rebotar Saltar arriba y abajo
Agitación Un lado a otro
Desvanecer Cambio de opacidad
Flotador Suave vuelo estacionario

Consejos para obtener los mejores resultados

Utilice SVG limpios

Los archivos SVG simples y optimizados se animan con mayor fluidez. Usa nuestro Compresor SVG Primero si es necesario.

Tenga cuidado con la duración

Las animaciones sutiles (1-2 s) funcionan mejor con los elementos de la interfaz de usuario. Las animaciones más rápidas captan la atención, pero pueden distraer.

La accesibilidad importa

El CSS generado respeta prefers-reduced-motionLos usuarios que prefieran un movimiento reducido no verán animaciones.

Fácil integración

El SVG animado es autónomo con CSS integrado. Simplemente introdúcelo en tu HTML, ¡sin dependencias externas!

Preguntas Frecuentes

¡Sí! Las animaciones CSS son compatibles con todos los navegadores modernos, como Chrome, Firefox, Safari, Edge y Opera. Las animaciones se incrustan directamente en el archivo SVG, por lo que no se requiere JavaScript.

¡Por supuesto! Puedes usar SVG animados en cualquier lugar donde usarías SVG normales: <img> etiquetas, SVG en línea, imágenes de fondo CSS o en frameworks como React y Vue. Tenga en cuenta que algunos métodos (como <img>) puede no ser compatible con todos los tipos de animación.

Si visualiza el SVG en un visor de imágenes básico, es posible que no admita animaciones CSS. Intente abrirlo en un navegador web. Para una reproducción más fiable, utilice SVG integrado en su HTML.

Cambia la configuración de "Iteraciones" de "Infinitas" a "1" (o el número que prefieras). Esto hará que la animación se reproduzca el número especificado de veces y luego se detenga.

Esta herramienta anima todo el SVG. Para animar elementos individuales dentro de un SVG, deberá editar el código SVG directamente o usar una herramienta de animación más avanzada. ¡Podríamos añadir compatibilidad con animación a nivel de elemento en una próxima actualización!