Online Tool Store
SVG Animator
Animez les éléments SVG avec les keyframes CSS et transitions, définissez le timing, l'easing et boucles, exportez les fichiers SVG animés.
🔒 Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers ne sont jamais envoyés sur un serveur.
Design et Couleur
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.
Comment fonctionne l'Animateur SVG
- Ajoutez le SVG et choisissez le type d'animation.
- Définissez la durée et l'accélération — les effets de dessin se lisent mieux entre une et deux secondes.
- Gardez la protection reduced-motion, puis collez le SVG et son CSS dans votre page.
La méthode
Un effet de dessin fonctionne en définissant le motif de tiret du trait sur la longueur totale du tracé et en animant le décalage de cette longueur à zéro.
stroke-dasharray: L; stroke-dashoffset: L → 0, où L est la longueur du tracé
Se tromper sur L est la raison pour laquelle les animations de dessin commencent parfois à moitié tracées ou finissent trop tôt — le motif de tiret doit correspondre à la longueur réelle du tracé.
FAQ
Pourquoi mon animation de dessin commence-t-elle à mi-chemin?
Parce que la valeur dasharray ne correspond pas à la vraie longueur du tracé. Mesurez le tracé avec getTotalLength et utilisez ce nombre, plutôt que de l'estimer.
Le SVG doit-il être animé avec CSS ou SMIL?
CSS, pour tout ce qui est nouveau. L'animation SMIL est dépréciée dans certains moteurs et le support est incohérent; les keyframes et transformations CSS sont bien supportés et plus faciles à contrôler.
Pourquoi respecter prefers-reduced-motion?
Parce que le mouvement déclenche des nausées et des symptômes vestibulaires chez certaines personnes, et la préférence du système d'exploitation est la façon dont elles en demandent moins. La respecter est une media query de deux lignes.
Comment nous nous comparons
| Fonctionnalité | Online Tool Store | Une application de design | Un PDF de guide de style |
|---|---|---|---|
| Protection reduced-motion incluse | ✓ | ✗ | Rarement |
| CSS plutôt que SMIL | ✓ | Variable | ✓ |
| Aucun logiciel d'animation | ✓ | ✗ | ✗ |
| Le fichier reste sur votre appareil | ✓ | ✓ | ✗ |
L'Animateur SVG enveloppe chaque animation dans une requête reduced-motion par défaut, l'étape d'accessibilité que l'animation SVG écrite à la main omet presque toujours.