m•motiveICONS IN MOTION
← Retour aux icônes

MOTIVE · ARTICLE

Comment fonctionne une animation SVG et comment maîtriser son coût

Une cloche oscille quand un rappel est activé, une coche se dessine à la fin d’une tâche. Ces mouvements indiquent un changement d’état. Voyons comment le SVG les produit et quoi mesurer quand les icônes se multiplient.

1. Des formes et une chronologie

Le SVG décrit des formes comme path, circle et rect avec des coordonnées et des attributs. viewBox="0 0 24 24" définit le repère interne ; width et height définissent la taille affichée. La même géométrie peut donc servir à plusieurs tailles.

L’animation fait varier ces propriétés dans le temps. Une rotation de 0 degré au début, -18 au milieu et 0 à la fin fait osciller une cloche. Le navigateur interpole selon duration et easing, sans enregistrer une image distincte pour chaque trame.

2. Dessiner une coche en décalant des tirets

La coche existe déjà. stroke-dasharray crée un motif de traits et d’espaces ; stroke-dashoffset en déplace le début et fait apparaître progressivement la ligne.

L’exemple utilise pathLength="60" pour normaliser les distances, puis fait passer dashoffset de 60 à 0. Le nombre 60 ne désigne pas des pixels d’écran. Les attributs de base affichent la coche complète, même sans animation ou avec la réduction des mouvements. Collez ce code dans du HTML pour essayer.

MDN · stroke-dashoffsetMDN · pathLength

Un exemple de tracé fonctionnel

Le même SVG et son CSS figurent ci-dessous. Vous pouvez mettre la boucle en pause ; la réduction des mouvements affiche la coche complète.

<svg xmlns="http://www.w3.org/2000/svg"
     width="64" height="64" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <style>
    .motive-draw { animation: motive-draw 1.8s ease-in-out infinite; }
    @keyframes motive-draw {
      0% { stroke-dashoffset: 60; }
      60%, 100% { stroke-dashoffset: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .motive-draw { animation: none; }
    }
  </style>
  <path class="motive-draw" d="m6 12 4 4 8-8"
        pathLength="60" stroke-dasharray="60" stroke-dashoffset="0" />
</svg>

3. CSS et Web Animations API

CSS @keyframes suffit souvent pour une boucle définie ou une lecture unique. Les SVG Motive incluent leur CSS sans bibliothèque d’animation supplémentaire. Une page ne peut pas sélectionner directement les éléments internes d’un SVG dans une balise img ; envisagez le SVG en ligne pour interagir avec les formes.

La Web Animations API facilite la lecture, la pause et le déplacement temporel dans un éditeur. Motive génère les images clés de l’aperçu et le CSS exporté depuis le même modèle, sans modifier l’état React à chaque trame. Le choix CSS ou JavaScript ne détermine pas à lui seul les performances de rendu.

MDN · Web Animations API

4. Le format SVG ne garantit pas un faible coût

Le poids transféré et le coût de lecture sont distincts. Quelques formes simples peuvent être compactes ; des tracés complexes, des filtres et de nombreux éléments DOM ajoutent du travail. Le SVG n’est pas toujours plus petit que le GIF et ne garantit pas une cadence fixe.

Le navigateur réalise les calculs de style, de mise en page, de peinture et de composition nécessaires. Propriétés animées, surface et nombre d’animations comptent. Examinez d’abord transform et opacity, puis vérifiez la composition réelle dans le navigateur et la scène SVG ciblés.

4. Le format SVG ne garantit pas un faible coût
EffetPropriétés courantesCoût à examiner
Rotation, déplacement, échelle, fondutransform, opacityLa composition peut aider, sans garantie d’exécution GPU ni d’absence de peinture.
Tracé et modification de formesstroke-dashoffset, dExaminez la peinture : plusieurs tracés complexes peuvent augmenter le travail.
Flou, ombres, nombreuses formesfilter, nombre de formes et surfaceRéduisez la zone des filtres et les formes, puis comparez peinture et mémoire.

web.dev · High-performance CSS animations

5. Avant d’ajouter du mouvement

  • Déclenchez les retours de succès ou d’erreur au bon moment et vérifiez l’utilité d’une boucle continue.
  • Arrêtez les boucles hors écran avec IntersectionObserver et vérifiez les onglets masqués. Motive anime seulement les cartes visibles du catalogue.
  • Respectez prefers-reduced-motion: reduce et conservez un état statique compréhensible. Utilisez aria-hidden pour la décoration et un texte alternatif adapté pour les images informatives.
  • Réservez l’espace avec width et height. Les SVG en ligne répétés doivent avoir des identifiants distincts pour les titres, masques et dégradés.
  • N’ajoutez pas will-change partout par anticipation. Mesurez un problème, appliquez-le aux éléments nécessaires et comparez.

MDN · prefers-reduced-motion

6. Mesurer dans les mêmes conditions

  1. Fixez l’icône, la taille, le mouvement et la durée. Comparez 1, 20 et 100 animations simultanées en notant le nombre visible et le total.
  2. Utilisez une version proche de la production. Dans Network, vérifiez le transfert compressé et les requêtes. Le poids du fichier ne mesure pas à lui seul le coût de lecture.
  3. Enregistrez lecture et défilement dans Performance de DevTools. Comparez Layout, Paint et les retards de trames. À 60Hz, une trame dure environ 16,7ms pour toute la page : ne promettez pas une cadence sans mesure.
  4. Testez aussi sur un appareil mobile réel, avec réduction des mouvements, icônes hors écran, onglets masqués et répétitions finies. Notez appareil, navigateur et conditions pour rendre les résultats reproductibles.

Documentation officielle