Le site de Patrick Darcheville

Animations avec SVG

Dessins vectoriels animés

Dessins SVG animés

Bibliothèque Snap SVG

Animation SVG avec JavaScript

Ci-dessous une animation SVG via JavaScript. Cette animation pourrait s'intituler "coucher de soleil".
Le script consiste entre autres à insérer à chaque exécution d'une boucle un nouvel élément SVG dans le canevas (une nouvelle étoile dans le ciel).

Pour relancer l'animation actualisez la page !

Animation SVG avec le SMIL

Il existe une deuxième solution pour réaliser du SVG dynamique : utiliser les balises d'animation de ce langage (animate, animateMotion, etc.). Pour parler "savant" on dira que l'on utilise le SMIL (Synchronized Multimedia Integration Language). Il y a cependant un bémol ... Le SMIL n'est pas encore implémenté sur un navigateur pourtant récent. Devinez lequel ...

Ci-dessous une animation SVG basée sur le SMIL (donc ne fonctionne pas avec Edge) : la terre tournant autour du soleil.

Animation SVG via CSS3

Il y une troisième solution depuis CSS3 : animer un objet SVG via le CSS. Il suffit d'appliquer un modèle d'animation CSS ("keyframes") à des objets SVG (qui sont des noeuds du DOM).

Ci-dessous une animation SVG + CSS.

L'animation se relance automatiquement.

Animation avec Snap SVG

En ce début de l'année 2019 je viens de découvrir la librairie Snap SVG pour générer du SVG dans la page et c'est bluffant !
Non seulement on peut générer des formes statiques mais on peut aussi animer des formes.
J'ai donc rajouté quelques chapitres sur l'animation avec Snap SVG.
Ci-dessous un "drag" programmé avec Snap SVG. Vous pouvez déplacer le requin ou le plongeur avec la souris.

Quel outil utiliser ?

Donc pour résumer le problème n'est pas la pénurie d'outils mais plutôt l'abondance ...
L'avenir nous dira la technique qui sera plébiscitée par les développeurs.
Maintenant si on se souvient du succès de jQuery on peut raisonnablement penser que Snap aura un bel avenir en matière de développement SVG puisqu'on pourrait lui appliquer le même slogan qu'à jQuery : "write less, do more."

Les différents chapitres de ce tuto