Comment animer un SVG sans aucune bibliothèque JavaScript ?

Animer un logo qui se dessine, une icône qui se transforme ou un graphique dont les barres montent à l'apparition ne demande aujourd'hui aucune bibliothèque. Le format vectoriel étant du balisage comme le reste de la page, chacun de ses éléments accepte des règles de style, et l'animation d'un SVG en CSS couvre à peu près tous les besoins éditoriaux d'un site de contenu. L'enjeu n'est pas seulement d'éviter quelques dizaines de kilooctets de code tiers, même si cela compte sur un site qui vise de bonnes mesures de performance : c'est surtout d'obtenir des animations qui restent nettes à tous les zooms, qui suivent la charte graphique par héritage, et qui continuent de fonctionner dans cinq ans sans dépendre d'un projet dont la maintenance peut s'arrêter.

Préparer un fichier vectoriel animable

La difficulté d'une animation vectorielle se joue le plus souvent avant toute ligne de style, dans la qualité du fichier de départ. Un export automatique depuis un logiciel de dessin produit un balisage abondant, avec des groupes imbriqués, des identifiants générés et parfois des dizaines de milliers de points, sur lequel toute tentative d'animation devient un exercice d'archéologie. Le nettoyage préalable relève des bonnes pratiques que nous détaillons dans la rubrique création web, et il conditionne tout ce qui suit.

Réduire le nombre de formes

Un fichier destiné à être animé doit comporter le moins d'éléments possible, chacun ayant une raison d'exister. Cela suppose de fusionner les tracés qui n'ont pas vocation à bouger séparément, de supprimer les groupes vides, les calques masqués et les métadonnées de l'éditeur, et de simplifier les courbes dont la précision dépasse largement ce que l'œil distingue. Un logo passé de quatre cents à quarante nœuds ne change pas d'apparence et devient manipulable ; le même logo laissé en l'état interdit toute animation de tracé, dont le coût de calcul devient sensible sur un appareil modeste.

Nommer ce qui doit bouger

Chaque élément destiné à recevoir une animation a besoin d'un point d'accroche stable, ce qui veut dire une classe explicite, posée à la main, et non l'identifiant généré par l'éditeur graphique. Ces identifiants changent à chaque réexport, ce qui casse silencieusement toutes les règles écrites précédemment. Une convention simple, fondée sur le rôle plutôt que sur la forme, suffit : la partie qui se dessine, la partie qui pivote, la partie qui apparaît en dernier. Cette étape prend deux minutes et fait la différence entre une animation qu'on peut reprendre et une animation qu'on refait.

Alléger le balisage avant de l'intégrer

Un vectoriel intégré directement dans le document augmente le poids de la page à chaque chargement, ce qui rend le nettoyage doublement utile. Les gains les plus nets ne viennent pas de la suppression des espaces mais de la réduction du nombre de décimales des coordonnées, souvent exportées avec six chiffres après la virgule là où deux suffisent largement à l'affichage, et de la suppression des attributs de présentation répétés sur chaque forme alors qu'ils pourraient être hérités du groupe parent. Sur un dessin éditorial ordinaire, ces deux opérations divisent le poids par trois sans aucune perte visible, et rendent au passage le balisage lisible pour celui qui devra l'animer.

Choisir entre le fichier externe et le balisage intégré

Un vectoriel appelé comme une image classique se met en cache et allège le document, mais son contenu reste inaccessible aux styles de la page : aucune règle extérieure ne peut atteindre ses formes. Une animation pilotée par le CSS de la page suppose donc un balisage intégré directement dans le document, ce qui a un coût en poids de page et empêche la mise en cache séparée. Le compromis dépend de l'usage : les icônes récurrentes gagnent à rester externes avec leurs animations embarquées dans leur propre feuille de style interne, les visuels uniques et éditoriaux gagnent à être intégrés.

Fixer la zone de dessin et le comportement responsive

Un vectoriel se redimensionne selon deux mécanismes distincts qu'il faut poser correctement dès le départ : la zone de coordonnées interne, qui définit le système dans lequel les formes sont décrites, et la manière dont cette zone se place dans l'espace disponible. Retirer les dimensions fixes du balisage et conserver la seule zone de coordonnées permet à l'image de s'adapter à son conteneur, ce qui est presque toujours le comportement souhaité. Une animation calculée sur des valeurs absolues, sans tenir compte de ce système, se décale dès que le conteneur change de taille.

Le tracé progressif, l'animation la plus utile

L'effet de dessin progressif, où un trait apparaît comme s'il était tracé à la main, est le plus demandé et l'un des plus simples à obtenir. Il repose sur un détournement élégant des pointillés : on demande au trait d'être pointillé avec un motif aussi long que le tracé lui même, puis on décale ce motif jusqu'à ce que le trait apparaisse. Aucune bibliothèque n'est nécessaire, et le résultat reste net à toutes les tailles, ce qui vaut aussi pour les contrôles visuels décrits dans notre article sur la manière d'automatiser des captures d'écran pour valider une refonte.

Mesurer la longueur du tracé

La technique demande de connaître la longueur du chemin, information que le navigateur sait calculer mais que le CSS seul ne peut pas obtenir. Deux solutions existent sans recourir à une bibliothèque : mesurer la longueur une fois pendant le développement, avec la console du navigateur, et inscrire la valeur en dur dans la feuille de style ; ou déclarer sur l'élément une longueur de tracé arbitraire, ce qui force le navigateur à normaliser toutes les mesures sur cette valeur. La seconde méthode est nettement préférable, car elle survit à toute modification du dessin.

Écrire l'animation elle même

Une fois la longueur normalisée, l'animation se réduit à trois lignes : le motif de pointillés vaut la longueur totale, le décalage part de cette même longueur et rejoint zéro, et une durée avec une fonction de progression donne le rythme. Une progression linéaire convient à un tracé régulier ; une progression qui accélère puis ralentit donne une impression plus manuelle. Le sens du dessin dépend de l'orientation du chemin dans le fichier, et s'inverse en changeant le signe du décalage plutôt qu'en retournant le dessin.

Enchaîner plusieurs tracés

Un logo comporte rarement un seul chemin. Faire apparaître les éléments l'un après l'autre suppose de décaler le démarrage de chaque animation, ce que le CSS permet nativement. Écrire ces délais un par un devient vite pénible dès qu'il y a plus de cinq éléments, et la solution la plus lisible consiste à poser une variable de rang sur chaque élément dans le balisage, puis à calculer le délai à partir de ce rang dans la feuille de style. On obtient une cascade réglable par une seule valeur, et l'ajout d'un élément ne demande aucune réécriture.

Traiter le remplissage après le trait

Un dessin composé de surfaces pleines ne se prête pas au tracé progressif, qui ne concerne que les contours. La méthode habituelle consiste à faire d'abord apparaître le contour, puis à faire monter l'opacité du remplissage une fois le tracé terminé. Le raccord se règle par un délai égal à la durée du tracé, et gagne à ne pas être instantané : une transition d'opacité de quelques centaines de millisecondes suffit à donner l'impression que la couleur remplit la forme, sans avoir à animer autre chose.

Transformer, déformer, déplacer

Au delà du tracé, l'essentiel des animations vectorielles se ramène à des transformations géométriques, qui sont aussi les moins coûteuses à calculer parce que le navigateur peut les confier au processeur graphique. Encore faut il les écrire de manière à ce qu'il le fasse réellement, ce qui suppose de connaître deux ou trois particularités du format, dont la principale concerne le point autour duquel la transformation s'applique. Ces particularités tiennent au système de coordonnées propre au format, dont nous rappelons le principe dans notre article expliquant ce qu'est un fichier SVG.

L'origine de transformation, source de la plupart des surprises

Dans une page classique, une rotation s'applique par défaut autour du centre de l'élément. Dans un vectoriel, l'origine par défaut se situe au point zéro du système de coordonnées, c'est à dire en haut à gauche de la zone de dessin, ce qui envoie l'élément à l'autre bout de l'écran dès qu'on le fait tourner. La correction consiste à déclarer explicitement l'origine, en pourcentage du cadre de l'élément lui même, ce que les navigateurs récents interprètent correctement. C'est l'erreur numéro un des premières animations vectorielles, et elle se corrige en une ligne.

Préférer les transformations aux attributs géométriques

Il est tentant d'animer directement les attributs du format, la position d'un cercle ou la largeur d'un rectangle, ce que le CSS permet désormais dans plusieurs cas. C'est presque toujours une mauvaise idée pour la performance : modifier une géométrie oblige le navigateur à recalculer le rendu de la forme à chaque image, alors qu'une transformation équivalente est appliquée par le processeur graphique sans recalcul. Un graphique dont les barres montent gagne donc à être animé par une mise à l'échelle verticale, avec une origine posée en bas, plutôt que par une variation de hauteur.

Le changement de forme et ses conditions

L'interpolation entre deux tracés, souvent appelée morphing, fonctionne nativement à une condition stricte : les deux chemins doivent comporter le même nombre de points et les mêmes types de segments, dans le même ordre. Cette contrainte, qui semble sévère, se satisfait facilement quand les deux formes sont dessinées l'une à partir de l'autre plutôt que séparément. Quand ce n'est pas possible, la solution sans bibliothèque consiste à superposer les deux formes et à croiser leurs opacités, ce qui donne un résultat visuellement acceptable dans la grande majorité des cas éditoriaux. Le cas particulier des icônes à deux états, une croix qui devient une flèche, un menu qui devient une croix, se traite encore plus simplement par des rotations et des translations appliquées à deux ou trois traits identiques : c'est la même géométrie déplacée, jamais une forme réellement transformée, et le résultat est à la fois plus léger et plus prévisible qu'une interpolation de tracés.

Suivre un tracé

Faire circuler un élément le long d'un chemin, pour une flèche qui suit un parcours ou un point qui progresse sur une courbe, s'obtient avec la propriété de décalage sur chemin, désormais bien prise en charge. Le chemin s'exprime dans les mêmes coordonnées que le dessin, et la progression s'anime de zéro à cent pour cent. La prudence commande de prévoir un comportement acceptable si la propriété n'est pas comprise, ce qui se fait en plaçant l'élément à une position statique correcte dans le balisage : sans animation, il reste simplement immobile au bon endroit.

Déclencher, doser et rendre l'animation acceptable

Une animation techniquement réussie peut rester une mauvaise animation, parce qu'elle se déclenche au mauvais moment, se rejoue en boucle sans raison ou s'impose à quelqu'un qui ne la supporte pas. Ces questions se règlent aussi sans bibliothèque, et elles comptent au moins autant que la technique de dessin.

Déclencher à l'apparition, pas au chargement

Une animation lancée au chargement de la page est déjà terminée quand le lecteur arrive à hauteur du visuel. Le déclenchement à l'entrée dans le champ de vision se fait avec l'observateur d'intersection, une vingtaine de lignes de code natif qui ajoutent une classe quand l'élément devient visible, la feuille de style faisant le reste. Le point d'attention est le seuil de déclenchement, exprimé en proportion de la surface de l'élément : un seuil de vingt pour cent ne se produira jamais pour un élément plus haut que la fenêtre, cas fréquent sur les infographies verticales.

Ne jouer qu'une fois

Une animation qui se rejoue à chaque passage devant l'élément devient rapidement pénible, surtout sur une page longue que le lecteur remonte. La règle générale est de cesser d'observer l'élément dès la première apparition, ce qui garantit un déclenchement unique par chargement de page. Les seules animations qui gagnent à boucler sont celles qui portent une information continue, un indicateur de chargement par exemple, et elles doivent alors être discrètes au point de se faire oublier.

Respecter la préférence de mouvement réduit

Les systèmes d'exploitation exposent une préférence par laquelle un utilisateur signale qu'il ne souhaite pas d'animation, souvent pour des raisons de gêne vestibulaire, et les navigateurs la transmettent aux pages. La respecter n'est pas une option de confort : c'est un critère d'accessibilité. En pratique, il s'agit d'envelopper les animations dans une requête de média correspondante, ou de neutraliser globalement les durées quand la préférence est active. L'élément doit alors se présenter directement dans son état final, jamais dans son état de départ, faute de quoi un tracé reste invisible.

Prévoir le cas où l'animation ne se joue pas

Une animation vectorielle doit toujours être conçue de telle sorte que son absence ne laisse pas un trou. Cela concerne le mouvement réduit, mais aussi l'impression, l'affichage dans un lecteur de flux, la capture par un outil de prévisualisation ou tout simplement l'échec du script de déclenchement. La règle qui règle tous ces cas d'un coup est de dessiner l'état final dans le balisage, puis de faire jouer l'animation depuis un état de départ posé uniquement par la feuille de style. Ainsi, tout ce qui ne comprend pas l'animation affiche le visuel abouti, ce qui est exactement le comportement attendu, alors que le réflexe inverse produit des logos invisibles à l'impression.

Vérifier le coût réel sur un appareil modeste

Le dernier contrôle est une mesure, pas une impression. Les outils de développement des navigateurs affichent le nombre d'images par seconde et le temps passé à recalculer le rendu, et suffisent à repérer une animation qui fait tomber la page sous les trente images par seconde. Trois causes reviennent : une animation de propriétés géométriques plutôt que de transformations, un filtre appliqué à une grande surface, et un nombre d'éléments animés simultanément trop élevé. Tester sur un ordinateur récent ne prouve rien, tester sur un téléphone d'entrée de gamme de trois ans prouve beaucoup. Il reste une contrainte que la mesure ne montre pas et qu'il faut vérifier à l'œil, celle du décalage de mise en page : un visuel animé dont les dimensions ne sont pas réservées avant son affichage pousse le texte qui le suit au moment où il apparaît, ce qui dégrade la stabilité visuelle mesurée par les indicateurs de performance et, plus concrètement, fait perdre sa ligne au lecteur. La réservation se fait par un rapport d'aspect posé sur le conteneur, jamais par une hauteur fixe, qui reviendrait à sacrifier l'adaptation aux petits écrans.