Lottie ou SVG : quel format pour vos animations web ?

Lottie ou SVG: quel format pour vos animations web?

Une icône qui tourne au survol et une séquence illustrative composée de dizaines de calques ne relèvent pas du même problème technique.

La question de l’animation Lottie ou SVG en performance web doit donc être posée à partir de la complexité réelle du mouvement. Le SVG est généralement plus efficace pour les micro-interactions. Lottie devient pertinent lorsque l’animation issue du motion design comporte plusieurs calques, des interpolations complexes ou des mouvements difficiles à reconstruire proprement en CSS.

Le mauvais choix produit deux types de dette. Soit une interface légère en apparence, mais ralentie par un lecteur JavaScript inutile. Soit une animation officiellement native, mais transformée en arbre SVG lourd, coûteux à manipuler et difficile à maintenir. Le format ne corrige pas une conception mal structurée.

Lottie et SVG ne répondent pas au même problème

Le SVG est un format graphique vectoriel standardisé initialement par le W3C à la fin des années 1990. Il décrit des formes, des tracés, des groupes et des attributs visuels directement interprétables par le navigateur. Ces éléments peuvent être animés par CSS, par JavaScript ou, dans certains cas, par SMIL.

Lottie fonctionne autrement. Le fichier d’animation contient des données exportées depuis un logiciel de motion design, généralement Adobe After Effects à l’aide de l’extension Bodymovin. Airbnb a publié Lottie en open source en 2017 afin de rendre ces animations lisibles en temps réel sur le Web et dans les applications.

Lottie n’est donc pas un simple fichier graphique autonome au même titre qu’un SVG. Il dépend d’un lecteur, comme lottie-web ou une solution équivalente, capable d’interpréter le fichier JSON et de générer l’animation. Cette couche d’exécution constitue un coût à intégrer dans le calcul global.

Pour une animation SVG, le navigateur dispose déjà des mécanismes nécessaires. Aucun lecteur externe n’est requis. L’animation peut être définie dans la feuille de style, dans le document SVG ou dans un script si l’interaction le justifie.

La distinction opérationnelle est nette:

• le SVG décrit directement les objets graphiques à animer;
• Lottie décrit une séquence issue d’un environnement de composition plus riche;
• le SVG s’intègre naturellement dans le DOM et dans la logique de mise en page;
• Lottie ajoute une couche d’interprétation JavaScript;
• le SVG est efficace lorsque le nombre d’éléments reste limité;
• Lottie devient intéressant lorsque la reconstruction vectorielle de l’animation serait trop longue, trop lourde ou trop fragile.

Cette opposition ne permet pas encore de choisir. Elle définit seulement le terrain.

Le poids du fichier ne suffit pas à mesurer la performance

Une erreur fréquente consiste à comparer uniquement la taille du fichier d’animation. Ce raisonnement favorise Lottie dans certains cas, parce qu’un fichier JSON de quelques dizaines de kilo-octets peut remplacer un SVG très détaillé. Mais il oublie le lecteur JavaScript chargé avant l’exécution.

L’intégration de lottie-web représente environ 50 à 60 Ko compressés avec gzip. Cette charge est commune à la page, même si l’animation elle-même ne pèse que quelques kilo-octets. À l’inverse, une petite animation SVG associée à du CSS peut tenir dans environ 1 à 2 Ko et ne demande aucun moteur externe.

Le calcul pertinent additionne donc:

1. le poids du fichier d’animation;

2. le poids du lecteur ou du script de contrôle;

3. le coût du décodage et de l’initialisation;

4. le travail effectué pendant chaque image;

5. le nombre d’animations actives sur la page;

6. l’impact sur les interactions et les appareils peu puissants.

Pour une icône animée, l’écart est souvent défavorable à Lottie. Le fichier JSON peut peser entre 4 et 8 Ko, auquel il faut ajouter le lecteur. Une animation CSS sur un SVG correctement nettoyé reste beaucoup plus compacte.

Pour une animation illustrative complexe, le rapport s’inverse. Une séquence de personnage composée de plusieurs calques peut tenir autour de 45 Ko en Lottie, alors que son équivalent en SVG et SMIL dépasserait 180 Ko ou deviendrait difficilement exploitable sous forme de SVG pur. Le nombre de tracés, les masques, les groupes et les transformations peuvent rapidement faire exploser la taille du document.

Le poids visible du fichier n’est qu’une partie de la facture. Avec Lottie, le lecteur JavaScript doit être compté avant toute comparaison.

La bonne méthode consiste à comparer des scénarios équivalents. Une icône de validation ne doit pas être mise en regard d’une illustration animée exportée depuis After Effects. Ce sont deux objets techniques différents, même si les deux sont vectoriels.

Ce que le navigateur exécute réellement

La performance dépend moins de l’étiquette SVG ou Lottie que du chemin d’exécution suivi par le navigateur.

Une animation CSS bien construite peut être prise en charge par le fil de composition du navigateur. Les transformations et l’opacité sont les cas les plus favorables. Le navigateur peut alors produire une animation fluide, parfois à 60 images par seconde, sans mobiliser en permanence le fil principal JavaScript.

Cela ne signifie pas que tout SVG animé est automatiquement performant. Si l’animation modifie de nombreux attributs géométriques, force des recalculs de mise en page ou manipule un arbre comportant trop de nœuds, le coût augmente. Un SVG composé de centaines de tracés et de masques n’est pas une micro-interaction légère sous prétexte qu’il reste vectoriel.

Lottie s’appuie généralement sur requestAnimationFrame et exécute son moteur sur le fil principal. À chaque image, le lecteur doit interpréter les données, appliquer les transformations et mettre à jour le rendu. Une animation isolée et bien calibrée ne pose pas nécessairement de problème. Plusieurs animations Lottie simultanées, en revanche, peuvent entrer en concurrence avec le JavaScript de l’interface.

Le risque apparaît surtout lorsque la page cumule:

• une animation Lottie visible dès le chargement;
• des composants interactifs pilotés par JavaScript;
• des images lourdes;
• des effets de défilement;
• des transitions de navigation;
• un appareil mobile peu performant.

Dans cette configuration, il ne faut pas attribuer mécaniquement toute dégradation à Lottie. L’impact exact sur les indicateurs comme l’INP ou le LCP dépend du site, du nombre d’instances, du mode de rendu et de la manière dont l’animation est chargée. Sans mesure sur un cas réel, une conclusion au milliseconde près serait artificielle.

La question utile est plus simple: cette animation doit-elle occuper le fil principal, et à quel moment?

Une animation décorative située sous la ligne de flottaison peut être différée. Une animation associée à un bouton critique ne doit pas retarder l’interaction. Une séquence qui se déclenche uniquement après une action utilisateur peut être chargée à la demande. Le découpage du chargement produit souvent un gain supérieur au changement de format lui-même.

SVG: le choix rationnel pour les micro-interactions

Le SVG s’impose lorsqu’il faut animer une forme simple avec un contrôle précis. Une flèche qui se déplace, un trait qui se dessine, une icône qui change d’état ou un indicateur de progression ne nécessitent pas un système de composition complet.

Dans ces cas, l’animation peut être construite autour de propriétés limitées:

• transform pour déplacer, faire pivoter ou redimensionner;
• opacity pour révéler ou masquer;
• stroke-dasharray et stroke-dashoffset pour simuler un tracé;
• des changements de couleur contrôlés par CSS;
• des groupes SVG séparés pour isoler les parties animées.

La structure du fichier compte davantage que son extension. Il faut supprimer les métadonnées inutiles, fusionner les formes redondantes, limiter les points d’ancrage et éviter les transformations empilées. Un export depuis Figma ou Illustrator doit être nettoyé avant intégration. Les identifiants générés automatiquement, les groupes imbriqués sans fonction et les styles dupliqués compliquent le contrôle sans apporter de rendu.

Intégrer une animation SVG issue de Figma

Figma permet de préparer les formes et la structure visuelle, mais il ne produit pas nécessairement une animation Web optimisée à lui seul. Le fichier exporté constitue un point de départ. Il faut ensuite vérifier:

• la présence d’un viewBox cohérent;
• l’absence de dimensions figées qui empêchent l’adaptation;
• le nombre réel de nœuds dans le document;
• la possibilité de cibler chaque partie avec une classe;
• la lisibilité des tracés après réduction;
• la compatibilité des couleurs avec les modes clair et sombre;
• le comportement lorsque le mouvement est désactivé.

Le viewBox doit être défini à partir des coordonnées utiles, pas à partir d’une zone de travail trop grande. Une marge invisible de plusieurs centaines d’unités fausse le dimensionnement et oblige ensuite à compenser avec des transformations.

Le crénage n’est pas le seul problème de lisibilité dans une interface animée. La vitesse, l’amplitude et le contraste déterminent aussi la perception du symbole. Une icône trop fine, réduite à 16 pixels, perdra son dessin avant même que son animation ne commence. La graisse du trait doit être évaluée dans sa taille d’affichage réelle.

Pour une interface de marque, cette précision est décisive. Un système d’icônes SVG animé conserve une géométrie stable, des états identifiables et une logique de transition homogène. L’animation ne remplace pas la hiérarchie visuelle. Elle la rend plus explicite ou la perturbe.

Une micro-interaction n’a pas besoin d’un moteur de motion design. Elle a besoin d’un tracé propre, d’une durée maîtrisée et d’un état lisible.

Le CSS offre également un contrôle direct sur les préférences de mouvement. La règle prefers-reduced-motion permet de réduire ou de supprimer les transitions pour les utilisateurs qui le demandent. Cette logique doit être définie dès la conception, pas ajoutée après l’export.

Lottie: un avantage net dès que la composition devient complexe

Lottie trouve sa justification lorsque l’animation ne peut plus être décrite proprement par quelques transitions CSS. Une séquence avec plusieurs personnages, des éléments qui se déforment, des mouvements synchronisés et des changements de visibilité complexes peut être exportée depuis After Effects sans être reconstruite manuellement dans le code.

Le gain porte d’abord sur la fidélité du mouvement. Le fichier conserve une partie de la logique de composition: durée, interpolation, position des calques et séquençage. Pour une équipe qui travaille déjà avec un flux de motion design, Lottie réduit la traduction entre le fichier source et l’interface.

Il faut toutefois réduire la composition avant l’export. Les fonctions d’After Effects ne sont pas toutes transposables de manière fiable. Les effets raster, les expressions complexes, certaines déformations, les flous et les modes de fusion peuvent produire des résultats variables selon le lecteur ou le mode de rendu.

Une animation Lottie destinée au Web doit être préparée comme un composant d’interface, non comme une vidéo vectorielle miniature. Les points suivants déterminent sa robustesse:

1. Limiter le nombre de calques. Chaque calque supplémentaire augmente la complexité du fichier et du calcul à chaque image. Les éléments invisibles ou décoratifs doivent être supprimés du projet d’export.

2. Réduire les images clés. Une interpolation inutilement dense alourdit les données sans améliorer la perception du mouvement.

3. Éviter les effets non indispensables. Une ombre ou une déformation qui ne se voit pas sur mobile ne doit pas être conservée par principe.

4. Tester la transparence et les masques. Ils peuvent modifier fortement le coût de rendu, surtout lorsque plusieurs instances sont affichées.

5. Prévoir le chargement différé. Une séquence située en bas de page n’a pas besoin d’être initialisée au premier affichage.

6. Définir un état de remplacement. Tant que le lecteur n’est pas chargé, l’interface doit conserver une image, une forme fixe ou un état fonctionnel.

7. Conserver le fichier source. Le JSON exporté n’est pas un document de conception. Sans le projet After Effects et les règles d’export, la maintenance devient rapidement opaque.

Lottie est particulièrement utile pour des illustrations explicatives, des transitions de produit ou des animations de marque qui doivent conserver un mouvement élaboré. Il est moins rationnel pour une simple icône de menu ou un indicateur de chargement.

Le format ne doit pas non plus être choisi parce qu’il est facile à exporter. Une exportation en un clic déplace parfois la difficulté vers le navigateur. Le travail de production n’est pas terminé lorsque le JSON est généré.

La question du rendu: DOM SVG, toile ou intégration hybride

Lottie peut utiliser différents modes de rendu selon le lecteur et l’environnement. Le rendu sous forme de SVG conserve une structure vectorielle manipulable, tandis qu’un rendu sur toile réduit l’exposition directe des éléments graphiques dans le DOM. Le choix modifie la capacité à cibler les formes, à inspecter l’animation et à traiter certains besoins d’accessibilité.

Le rendu SVG est plus simple à observer dans les outils du navigateur. Il peut toutefois produire un arbre conséquent lorsque l’animation comporte de nombreux calques. Le rendu sur toile peut limiter cette complexité visible, mais il rend les éléments moins accessibles individuellement et complique la sélection ou la lecture par les technologies d’assistance.

Pour une animation purement décorative, la question est relativement directe: elle doit être masquée aux lecteurs d’écran et ne pas perturber la navigation au clavier. Pour une animation porteuse d’information, il faut fournir un texte ou une structure alternative. Le mouvement ne peut pas constituer le seul signal d’un changement d’état.

Le SVG intégré en ligne facilite le contrôle de la couleur, de la graisse et des états d’interaction. Un SVG utilisé comme image externe ne permet pas le même niveau de manipulation CSS. Cette différence est souvent oubliée lors de la conception de la maquette web. Le même fichier peut donc être performant dans un contexte et inutilisable dans un autre, simplement parce qu’il n’est pas intégré de la même manière.

L’animation doit aussi survivre à plusieurs contraintes d’affichage:

• largeur réduite sur mobile;
• écran haute densité;
• thème sombre;
• zoom du navigateur;
• absence de chargement JavaScript;
• connexion lente;
• désactivation du mouvement;
• affichage dans une zone défilante.

Un logo animé qui devient illisible à 320 pixels de large n’est pas corrigé par un export Lottie. Il faut revoir la hiérarchie, la silhouette et la durée du mouvement. Le format reste secondaire face à la construction graphique.

Comment décider sans choisir au hasard

Le choix peut être structuré en quelques questions techniques. Il ne s’agit pas de remplir une grille abstraite, mais de déterminer la fonction réelle de l’animation.

1. Quelle est la nature du mouvement?

Si l’animation transforme une icône, déplace un élément ou révèle un tracé, le SVG et le CSS sont le premier choix à examiner. Si elle raconte une séquence composée de nombreux calques, Lottie possède un avantage de production évident.

2. L’animation est-elle fonctionnelle ou décorative?

Une transition de bouton doit répondre immédiatement à l’action. Une illustration décorative peut être différée ou remplacée par une image fixe. La tolérance au délai n’est pas la même.

3. Combien d’instances seront visibles?

Un seul Lottie complexe dans une page éditoriale peut rester acceptable. Dix animations chargées au même moment changent complètement le bilan. Le nombre d’instances doit être évalué dans la maquette, pas découvert après intégration.

4. Quelle équipe assurera la maintenance?

Un SVG simple peut être repris par une équipe front-end qui maîtrise le CSS et le DOM. Une animation Lottie dépend davantage du fichier source, des conventions d’export et de la connaissance du lecteur. Si personne ne peut modifier la composition originale, la souplesse promise disparaît.

5. Quelle précision graphique est nécessaire?

Pour un symbole géométrique, le SVG permet de contrôler le crénage visuel, l’alignement, les proportions et la graisse. Pour une illustration animée, Lottie conserve plus efficacement les relations entre les calques et les interpolations.

6. Quel est le budget de chargement?

Il faut intégrer le lecteur Lottie dans le budget, puis mesurer l’effet de l’initialisation. Un petit fichier ne justifie pas à lui seul le choix. Le coût total doit être comparé à celui d’un SVG optimisé, script compris.

7. Que se passe-t-il si le mouvement est désactivé?

L’interface doit rester compréhensible sans animation. Un état final, une image de remplacement ou un simple changement de couleur suffit souvent. Cette contrainte améliore aussi la robustesse lorsque le script échoue.

Cette méthode évite le faux duel entre technologies. On ne choisit pas Lottie ou SVG pour toute une identité numérique. On choisit un mode de production et de rendu pour chaque famille d’animation.

Les erreurs d’intégration les plus courantes

La première erreur consiste à exporter toute une planche graphique en Lottie. Le fichier contient alors des éléments hors cadre, des calques masqués, des variantes inutilisées et des effets hérités du document de travail. Le poids augmente, le débogage devient imprécis et le rendu n’apporte aucun bénéfice.

La deuxième consiste à transformer une illustration complexe en SVG animé parce que le format est présenté comme plus léger. Le nombre de nœuds, les masques et les modifications géométriques peuvent produire l’effet inverse. Un SVG très détaillé est parfois plus difficile à animer et plus coûteux à recalculer qu’un Lottie compact.

La troisième est de charger toutes les animations au démarrage. Même une solution correctement choisie devient pénalisante si chaque composant initialise son moteur dès la première seconde. Il faut observer la visibilité, la priorité et le déclencheur de chaque animation.

La quatrième est de confondre animation et retour d’état. Une icône de validation doit confirmer une action, pas simplement produire un mouvement. Si la couleur, le texte ou la forme ne permettent pas de comprendre l’état final, la séquence ne remplit pas sa fonction.

La cinquième est de tester uniquement sur un poste de conception. Les performances observées sur un ordinateur récent ne décrivent pas l’expérience d’un téléphone d’entrée de gamme. Les animations doivent être vérifiées avec plusieurs instances, une fenêtre réduite et une connexion ralentie.

La sixième est de considérer l’export Figma ou After Effects comme une livraison finale. Il faut inspecter le fichier, mesurer son poids, contrôler le rendu sur les tailles cibles et vérifier le comportement lorsque JavaScript est retardé ou indisponible.

Un arbitrage différent selon le type d’animation

Pour rendre la décision plus concrète, on peut distinguer plusieurs familles de cas.

Icône d’interface. Le SVG animé par CSS reste le choix le plus cohérent. Il limite la dépendance, autorise un contrôle fin des états et s’intègre au système de composants.

Logo animé. Le SVG convient si le mouvement repose sur des transformations simples. Lottie peut être justifié pour une séquence de révélation élaborée, à condition de prévoir une version statique nette et une réduction du mouvement.

Illustration de page d’accueil. Lottie peut apporter une meilleure fidélité lorsque l’illustration comporte plusieurs calques et une temporalité précise. Le chargement doit être différé si l’illustration n’est pas immédiatement nécessaire.

Indicateur de chargement. Un SVG très léger ou une animation CSS suffit. Lottie introduit ici une dépendance disproportionnée.

Démonstration de produit. Lottie est possible pour une séquence autonome, mais il ne faut pas lui confier une interaction qui exige un contrôle image par image précis sans vérifier les limites du lecteur. Pour une interface interactive, plusieurs états SVG ou HTML peuvent être plus faciles à synchroniser.

Animation éditoriale. Le choix dépend du nombre de séquences et de leur position dans la page. Une illustration Lottie unique, chargée au moment opportun, peut être plus rationnelle qu’un ensemble de SVG complexes.

Les statistiques d’outils de production vont dans le même sens, avec une réserve indispensable. Selon des données publiées par SVGator en 2024 et 2025, 60 à 70 % de ses utilisateurs exportent en SVG animé, contre 5 à 7 % en Lottie. Ces chiffres décrivent l’usage de cette plateforme, pas l’ensemble du Web. Ils signalent néanmoins une pratique: le SVG domine les animations courtes et directement intégrées, tandis que Lottie reste un format plus spécialisé.

Le bon format est celui qui limite le coût total sans dégrader le contrôle, la lisibilité ni la maintenance. La taille du fichier n’est qu’un indicateur parmi d’autres.

Verdict: SVG par défaut, Lottie par nécessité

Pour une animation web simple, le SVG animé par CSS doit être le point de départ. Il ne demande pas de lecteur externe, reste léger lorsqu’il est correctement optimisé et s’insère dans la logique du design system. Il permet de structurer les états, d’aligner les formes et de contrôler précisément la hiérarchie visuelle.

Lottie devient pertinent lorsque la complexité du motion design justifie sa couche d’exécution. Une animation à plusieurs calques, issue d’After Effects et difficile à reconstruire proprement, peut être plus compacte et plus fidèle en Lottie qu’en SVG pur. Ce choix doit alors inclure le poids du lecteur, le chargement différé, le nombre d’instances et la solution de remplacement.

La décision finale ne se prend donc pas au nom de la modernité du format. Elle se prend après réduction de la composition, comparaison du coût total et test sur les tailles et appareils réellement visés.

En pratique, la règle reste froide et simple: SVG pour les gestes courts de l’interface; Lottie pour les compositions complexes qui ont besoin d’un moteur de lecture dédié. Tout le reste relève d’une mauvaise estimation du problème.