Quand un badge de notification pulse doucement dans un coin d’interface, ou qu’une barre de progression se remplit toute seule à l’arrivée sur une page, il y a de fortes chances qu’un simple <animate> se cache dans le SVG. Cet élément permet de faire évoluer un attribut, une largeur, une opacité, une couleur, directement dans le fichier SVG, sans écrire la moindre ligne de JavaScript et sans dépendre d’une feuille de style externe.
C’est particulièrement utile quand le SVG circule comme une image autonome : inséré via une balise <img>, posé en arrière-plan CSS, ou envoyé dans un e-mail. Dans ces contextes, ni JavaScript ni une animation CSS définie ailleurs ne peuvent s’exécuter, alors qu’une animation SMIL écrite avec <animate> continue de fonctionner, puisqu’elle fait partie intégrante du fichier lui-même.
Définition
<animate> est un élément d’animation SMIL (Synchronized Multimedia Integration Language) intégré nativement au SVG. Il se place à l’intérieur de l’élément qu’il doit animer et cible un attribut précis, désigné par attributeName, pour le faire évoluer entre une valeur de départ et une valeur d’arrivée sur une durée donnée. Contrairement à une transformation géométrique, il n’anime pas la position ou l’échelle d’un élément mais la valeur brute d’un attribut de présentation, par exemple width, height, opacity, fill ou r.
Attributs principaux
Une poignée d’attributs suffit à couvrir la grande majorité des usages courants.
| Attribut | Rôle |
|---|---|
attributeName | Le nom de l’attribut ciblé, comme width, opacity ou fill. |
from / to | Valeur de départ et valeur d’arrivée de l’animation. |
values | Liste de valeurs intermédiaires séparées par des points-virgules, pour une trajectoire en plusieurs étapes. |
dur | Durée totale de l’animation, par exemple 1.2s. |
repeatCount | Nombre de répétitions, ou indefinite pour une boucle infinie. |
fill | État conservé après la fin : freeze garde la dernière valeur, remove (par défaut) revient à l’état initial. |
Exemple de rendu concret
Voici une barre de chargement construite avec un <rect> dont la largeur passe progressivement de 0 à 200 pixels, un usage typique pour signaler qu’un contenu est en cours de préparation.
<svg viewBox="0 0 220 40" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="200" height="20" rx="10" fill="#e5e7eb" />
<rect x="10" y="10" width="0" height="20" rx="10" fill="#2563eb">
<animate attributeName="width" from="0" to="200" dur="1.2s" fill="freeze" />
</rect>
</svg>Différence avec <set> et les animations CSS
<animate> a un cousin plus radical, <set>, qui change la valeur d’un attribut d’un seul coup, sans transition progressive, là où <animate> interpole en douceur entre chaque valeur de la trajectoire. Face aux animations CSS, la différence est surtout une question de portée : une animation CSS a besoin d’une feuille de style chargée dans la page, alors qu’un <animate> écrit dans le SVG fonctionne même si le fichier est ouvert seul dans un navigateur ou inséré comme simple image. Face à l’API Web Animations, la différence est plus radicale encore : cette API pilote l’animation depuis JavaScript, ce qui offre un contrôle fin comme la pause, l’inversion ou la synchronisation avec d’autres événements, mais elle exige que le SVG soit inline dans le DOM et qu’un script s’exécute, deux conditions dont un <animate> autonome n’a pas besoin. Un dernier point mérite d’être précisé : historiquement, l’attribut transform ne peut pas être animé correctement avec <animate>, il faut passer par <animateTransform>, qui sait décomposer une rotation, une translation ou une mise à l’échelle sans tout mélanger.
Piège classique
Le piège le plus fréquent tient à l’attribut fill de l’animation, à ne pas confondre avec l’attribut fill qui définit une couleur de remplissage sur une forme. Sans fill="freeze", l’animation revient à sa valeur de départ dès qu’elle se termine, ce qui donne l’impression qu’une barre de progression se vide instantanément après s’être remplie sous les yeux de l’utilisateur. Le second piège concerne le déclenchement : par défaut, begin vaut 0s, l’animation démarre donc dès le chargement du SVG, ce qui surprend les développeurs qui s’attendaient à un déclenchement au clic ou au survol.
fill="freeze", l’attribut animé revient toujours à sa valeur de départ une fois la durée écoulée, même si le résultat semblait figé à l’écran quelques instants plus tôt.Cas d’usage réel
Un badge de notification qui pulse doucement grâce à une opacité animée entre 1 et 0.4 en boucle indéfinie attire l’oeil sans agresser l’utilisateur. Une jauge de compétence sur un profil qui se remplit à l’arrivée sur la page rend un score plus vivant qu’un simple nombre affiché brut. Il est aussi possible d’animer l’attribut d d’un <path>, ce qui permet de faire naître un tracé ou un logo qui semble se dessiner tout seul, une technique fréquente sur les pages d’accueil pour capter l’attention en douceur.
<animate> fonctionne encore dans les navigateurs modernes ?Oui, l’ensemble des navigateurs actuels, Chrome, Firefox, Safari et Edge, prend en charge les animations SMIL. Google avait un temps envisagé de retirer ce support en 2016, avant de faire machine arrière face à son usage massif dans les icônes et les illustrations animées du web.
<animate> au clic plutôt qu’au chargement de la page ?Oui, l’attribut begin accepte une syntaxe événementielle comme begin="monBouton.click", ce qui démarre l’animation uniquement lorsque l’élément désigné reçoit ce clic, sans écrire la moindre ligne de JavaScript pour gérer cet écouteur.
<animate> aux animations CSS pour animer un SVG ?Cela dépend du contexte : pour un SVG utilisé comme fichier autonome, une icône ou une image d’e-mail, <animate> garantit que l’animation fonctionne sans dépendance externe. Pour un SVG inline dans une page où le CSS est déjà en place, une animation CSS reste souvent plus simple à maintenir et à synchroniser avec le reste de l’interface.