Les graphiques vectoriels prennent désormais le contrôle du Web et même des applications mobiles. Les icônes, les boutons et les éléments des pages Web ou des applications mobiles sont désormais de plus en plus basés sur les vecteurs, supprimant les bitmaps en raison de la nécessité d'être rendus sur toutes sortes de résolutions d'écran, dpi, ratios, etc. et parce que la capacité utile de "zoomer" pour une meilleure lecture des pages sur les navigateurs mobiles rendait les actifs bitmaps moches et inutilisables.

Il est donc temps de commencer à créer des icônes, des arrière-plans et des contrôles animés en SVG, mais comment animez-vous les fichiers SVG?

Une grande partie de cette réponse est également publiée dans cette question connexe sur la façon d'animer des illustrations pour le Web.

Évitez les animations SMIL

Sara Soueidan, probablement la meilleure animatrice de SVG sur le Web, a écrit: "Je sais que j'ai écrit le guide des animations SMIL mais, vu leur avenir, je ne les utilise plus personnellement." Vous ne devriez pas non plus.

Les animations SMIL ne fonctionnent dans aucun IE, Edge, certains navigateurs mobiles et sont progressivement abandonnées par Chrome / Opera (bien que, plus récemment, l'équipe Chrome ait déclaré que cette dépréciation est temporairement suspendue ). Vous devez éviter de les utiliser 99% du temps.

Utilisez CSS pour des animations très simples

SVG peut être largement animé en utilisant du CSS pur (y compris en utilisant les :hoverétats, transforms, transitions et animations). Il est prévu d'obtenir une prise en charge complète des animations CSS, mais actuellement, seuls certains sont pris en charge et peuvent être bogués avec des problèmes de navigateur.

Sara Soueidan dit que CSS est idéal pour animer des SVG mais préfère JS car il aide à résoudre ces problèmes entre navigateurs. En tant que tel, utilisez-le lorsque vous le pouvez, mais revenez à JS lorsque les animations sont plus complexes ou ne fonctionnent pas entre les navigateurs.

Utilisez des animations JavaScript si CSS ne fonctionne pas

La plupart du temps, les SVG peuvent être animés en utilisant un peu de JavaScript sans avoir besoin d'une bibliothèque d'animation JavaScript. L'animation dans JS prend en charge beaucoup plus de navigateurs et est assez facile à utiliser avec une compréhension de base.

Pour les animations complexes qui nécessitent l'utilisation d'une chronologie ou quelque chose de similaire, l'utilisation d'une bibliothèque comme GSAP peut être très utile. Il existe d'innombrables autres bibliothèques d'animation SVG, Snap.svg est une autre grande, mais la plupart ne gèrent pas les animations presque aussi facilement ou aussi performantes que GSAP.

Pour certains types d'animation, l'utilisation d'un plugin JS particulier comme MorphSVG de GSAP peut vous faire économiser un peu de temps car ils s'occupent des problèmes de navigateur et de tous les calculs. Cependant, la plupart des animations ne nécessitent pas de plugins comme celui-ci. Voir «Un guide des alternatives aux fonctionnalités SMIL» pour plus d'informations.

Il est également acceptable d'utiliser des polyfills pour SMIL, mais je suis fatigué de le faire car ils ne sont pas très largement utilisés / testés. Cela étant dit, Eric Willigers et FakeSmile sont les deux plus courants.

Outillage

Le seul logiciel que j'ai rencontré qui exporte vers SVG + JS est un plugin Adobe After Effects appelé Lottie (anciennement Bodymovin), une extension Flash appelée Flash 2 SVG et un petit outil en ligne appelé SVG Circus . En dehors de cela, les animateurs logiciels comme Adobe Edge Animate, Adobe Animate CC ou Animatron exportent vers des animations SMIL qui ne devraient pas être utilisées. En tant que tel, il est préférable qu'un développeur crée des animations SVG + CSS ou SVG + JS en utilisant des SVG exportés à partir d'un éditeur . Inkscape possède une excellente ressource reliant des didacticiels et des exemples sur la façon de procéder.

Je suis sûr qu'à l'avenir, plus de logiciels d'animation prendront en charge l'exportation vers SVG + JS.

Quelques autres notes importantes

• Il est important de garder à l'esprit les performances . Sara Drasner a créé des repères de performances pour SVG qui montrent que vous devriez opter pour des animations CSS accélérées matériellement dans la mesure du possible mais recourir à une bonne approche JavaScript lorsque cela n'est pas possible.

• Il est préférable d'utiliser des SVG dans une <object>balise ou intégrés directement dans un <svg>élément XML s'il est interactif et comme image d'arrière-plan s'il n'est pas interactif, mais il existe d' autres façons de le faire également.

Pour une vue plus complète des animations Web, lisez le post de Rachel Nabor sur A List Part . Pour quelques suggestions supplémentaires dans l'outillage, ce message est très utile, bien que je ne sois pas d'accord avec tous les sentiments, en particulier avec la façon dont il présente les animations SMIL.

J'ai toujours trouvé que compter sur autre chose que les bibliothèques JS était un énorme support / maintenance WRT.

Je l' ai toujours utilisé d3.js . Il a été initialement créé pour créer des éléments SVG / DOM interactifs à partir d'ensembles de données. Cependant, vous pouvez le modifier pour SVG / DOM qui est inclus dans une page, tant que JS y a accès.

J'ai utilisé dans une variété de projets pour créer / animer SVG / DOM. certains exemples incluent des tableaux de bord en temps réel, des visualisations de carte, des transformations DOM et la création de fichiers SVG à inclure dans des fichiers PDF. Je l'ai également vu sur le Web. Le site Web contient de nombreux exemples et des liens vers des pages qui l'ont utilisé.

Je le recommande car il est assez compatible avec tous les navigateurs, a une communauté active et est facile à apprendre. Jetez un oeil à la page Web et faites attention aux utilisations du monde réel pour voir un petit échantillon de ce que vous pouvez en faire.

Voici les façons possibles d'animer un svg:

SVG SMIL ANIMATIONS

Le SVG peut être animé via son puissant langage de balisage natif, appelé SMIL, exporté directement à partir d'outils d'animation comme le plugin Adobe Animate CC + flash2svg.

Pour animer un SVG avec SMIL même sur des navigateurs ne prenant pas en charge, il vous suffit d'utiliser un polyfill SMIL.

Un polyfill est un morceau de code javascript spécial qui prend en charge les fonctionnalités manquantes d'un navigateur, traduisant l'encodage d'origine en un que le navigateur peut comprendre.

Le polyfill SMIL créé par Eric Willigers fait exactement cela: il traduit SMIL en API Web Animations que même le navigateur Microsoft prend en charge. Il est si efficace que les développeurs de Google Chrome ont décidé d'abandonner le support natif de SMIL et de se concentrer sur les animations Web, laissant au polyfill Eric Willigers la tâche de lire les fichiers SMIL dans Chrome.

Quelqu'un a mal interprété cela comme une dépréciation de SMIL par Chrome, et a critiqué les développeurs pour ce choix. Mais ce n'était pas une véritable dépréciation, juste une délocalisation du travail d'interprétation de SMIL au niveau du polyfill.

En fait, les développeurs Chrome eux-mêmes ont cité le polyfill Willigers dans l'annonce très officielle de leur intention de déprécier SMIL.

Donc, si vous lisez sur le Web la fin de SMIL, ne vous inquiétez pas. La «mort» de SMIL a été grandement exagérée. Cela ressemble plus à une renaissance.

Pour utiliser SMIL sur tous les navigateurs, y compris IE et EDGE, il vous suffit d'ajouter ce polyfill javascript à votre page Web:

https://github.com/ericwilligers/svg-animation

Voici une page de démonstration utilisant le polyfill fabriqué par Tom Byrne, l'auteur du populaire exportateur flash2svg:

la page sans le polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

et la même page avec le polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Si vous regardez la source, elle est à peu près explicite.

De plus, les performances avec le polyfill sont souvent meilleures que le SMIL d'origine, car sur de nombreux navigateurs Web Animations est accéléré matériellement, alors que SMIL ne l'est généralement pas.

ANIMATIONS D'EXPORTATION DANS SVG SMIL

La façon la plus simple de créer des animations SVG consiste à utiliser des outils comme Adobe Animate CC pour les dessiner et des plugins comme Flash2svg ( https://github.com/TomByrne/Flash2Svg ) pour les exporter en SVG. Avec lui, vous pouvez exporter presque toutes les animations + sons en un seul fichier SVG, comme cet épisode de dessin animé:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

BIBLIOTHÈQUES SVG ANIMATION JS

La manière javascript est plus compliquée. Tout d'abord, vous devez être un programmeur javascript. Ensuite, vous devez choisir entre de nombreuses bibliothèques. Les plus populaires sont:

• SnapSVG http://snapsvg.io
  Cette bibliothèque est le successeur de l'ancienne et populaire bibliothèque d'animation Raphael réalisée par le même auteur. Très stable, mais il convertit SVG dans un format interne au moment de l'exécution pour l'animer. Les options de morphing sont également très basiques, juste une interpolation linéaire. (REMARQUE: il existe également un plugin snap.svg pour Adobe Animate CC, mais les fichiers exportés sont gonflés. L'exportateur produit une commande snap svg pour chaque image de l'animation, pas chaque image clé, produisant un fichier svg de 18 Ko avec plus de 1000 lignes de code, juste pour faire pivoter un simple rectangle de 360 ​​degrés. Le plugin Flash2svg est beaucoup plus efficace, juste une commande et quelques octets pour faire le même travail).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  Une bibliothèque de morphing complète qui permet d'animer facilement SVG, et sans avoir besoin de les convertir dans un format interne. Il vous suffit de créer 3 à 4 images clés svg dans Inkscape et la bibliothèque Greenock SVGMorphing interpolera automatiquement entre les images et créera toutes les images intermédiaires pour une lecture fluide. Voici un exemple:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Si vous souhaitez animer en 3D cette bibliothèque est très puissante.
  Seen.js rend les maillages des fichiers .obj 3D en SVG et les anime très facilement.

ÉDITEURS D'IMAGES SVG

Quant aux outils, vous pouvez créer les images clés d'animation principalement avec trois logiciels:

• Inkscape: open source, a des tonnes de fonctionnalités, c'est un package d'édition vectorielle avancé créé par des personnes participant au groupe de travail SVG. La référence pour le format SVG. Pas facile à apprendre.

• Adobe Illustrator: logiciel de dessin vectoriel commercial très puissant, il offre de nombreuses fonctionnalités non encore prises en charge par SVG, mais il a également la pire compatibilité avec le format. Vous devrez souvent modifier manuellement le fichier SVG exporté pour corriger le désordre de l'illustrateur. Mais il est très populaire dans les écoles d'art, et tous les graphistes savent comment l'utiliser.

• Affinity Designer: il s'agit d'un logiciel commercial comme Illustrator, mais avec une excellente compatibilité SVG, presque au niveau d'Inkscape. L'interface utilisateur est beaucoup plus conviviale et devient maintenant très populaire parmi les artistes SVG.

ÉDITEURS D'ANIMATION SVG

Actuellement, le seul éditeur d'animation SVG est le suivant:

• Adobe Animate CC: l'ancien Adobe Flash Pro a été entièrement réécrit par Adobe pour migrer des animations flash désormais obsolètes vers les animations SVG modernes. Vous pouvez exporter les animations SVG résultantes avec une bibliothèque javascript personnalisée, ou choisir d'enregistrer en SVG + SMIL en utilisant des plugins comme "flash2svg". Cette dernière option est très efficace, je l'utilise toujours à la place de l'exportateur natif gonflé.

Vous pouvez télécharger le plugin gratuit ici: https://github.com/TomByrne/Flash2Svg

Ou installez-le à partir du panneau Adobe Plugins: https://creative.adobe.com/addons/products/7232

Malheureusement, Adobe Animate CC est commercial. Il existe des applications d'animation alternatives open source gratuites, mais je les ai toutes essayées et elles sont toujours nulles à mon humble avis. Espérons pour l'avenir.

Références:
Mon article de blog plus exhaustif sur le sujet: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

L'affaire référencée sur snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files