Online Tool Store
SVG Animator
Anima elementos SVG con fotogramas clave CSS y transiciones, establece timing, easing y conteos de bucles, luego exporta archivos SVG animados.
🔒 Esta herramienta funciona totalmente en tu navegador. Tus archivos nunca se suben a un servidor.
Diseño y Color
SVG Animator
Preview
Draw works best on stroked <path> shapes. This SVG looks fill-only, so the outline may not appear to draw — the original artwork is left intact.
Generated CSS
Everything runs in your browser. Your SVG is never uploaded to a server.
Cómo funciona el Animador de SVG
- Añade el SVG y elige el tipo de animación.
- Establece la duración y el easing — los efectos de dibujo se leen mejor entre uno y dos segundos.
- Mantén la protección de movimiento reducido, luego pega el SVG y su CSS en tu página.
El método
Un efecto de dibujo funciona estableciendo el patrón de trazo a la longitud total del trazado y animando el desplazamiento desde esa longitud hasta cero.
stroke-dasharray: L; stroke-dashoffset: L → 0, donde L es la longitud del trazado
Obtener mal L es la razón por la que las animaciones de dibujo a veces empiezan a medio dibujar o terminan antes de tiempo — el patrón de trazo debe coincidir con la longitud real del trazado.
FAQ
¿Por qué mi animación de dibujo empieza a mitad de camino?
Porque el valor de dasharray no coincide con la longitud real del trazado. Mide el trazado con getTotalLength y usa ese número, en lugar de estimarlo.
¿Debería animarse el SVG con CSS o SMIL?
CSS, para cualquier cosa nueva. La animación SMIL está obsoleta en algunos motores y su soporte es inconsistente; los keyframes y transformaciones CSS tienen buen soporte y son más fáciles de controlar.
¿Por qué respetar prefers-reduced-motion?
Porque el movimiento provoca náuseas y síntomas vestibulares en algunas personas, y la preferencia del sistema operativo es cómo piden menos de eso. Respetarla es una media query de dos líneas.
Cómo nos comparamos
| Característica | Online Tool Store | Una app de diseño | Un PDF de guía de estilo |
|---|---|---|---|
| Protección de movimiento reducido incluida | ✓ | ✗ | Raramente |
| CSS en lugar de SMIL | ✓ | Varía | ✓ |
| Sin software de animación | ✓ | ✗ | ✗ |
| El archivo permanece en tu dispositivo | ✓ | ✓ | ✗ |
El Animador de SVG envuelve cada animación en una consulta de movimiento reducido por defecto, que es el paso de accesibilidad que la animación SVG escrita a mano casi siempre omite.