Le site de Patrick Darcheville

Animations SVG

Animations SVG

Animer avec SVG

Dessins animés en SVG

Dessins vectoriels animés

Dessins SVG animés

Ci-dessus une image SVG animée. Pour réaliser cette animation vectorielle j'ai d'abord utilisé Boxy SVG (extension de Chrome pour dessin vectoriel) pour dessiner les objets puis j'ai rajouté du code d'animation en CSS (mais j'aurais pu utiliser le SMIL).

Si vous avez fait un peu de JavaScript vous avez entendu parler du DOM (Document Object Model). Or les objets graphiques définis par le code SVG sont des "noeuds" du DOM (comme les éléments HTML).
Donc nous pouvons manipuler les objets SVG avec JavaScript (JavaScript traditionnel ou JavaScript-jQuery).

Mais il existe une autre solution pour réaliser du SVG dynamique : utiliser les balises d'animation de ce format (animate, animateMotion, animateTransform, animateColor, set). 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. Devinez lequel ...

Il y a une troisième solution (la plus récente) : animer un objet SVG via le CSS. Oui vous avez bien lu via le CSS.
En effet les nouvelles propriétés d'animation CSS transform, transition, animation sont désormais bien implémentées chez la plupart des navigateurs. Rien n'interdit de les appliquer à des objets SVG. Cette solution est d'ailleurs préconisée par beaucoup d'experts puisqu'elle devrait être compatible avec tous les navigateurs ...
On peut donc raisonnablement penser que l'animation en CSS va s'imposer. De plus l'animation fonctionnera quand même même si JavaScript est désactivé par le navigateur ...

Les différents chapitres de ce tuto

Dans chaque page des extraits de code figurent dans des encadrés roses. Sur les mobiles, seules les premières lignes apparaissent. Il suffit de toucher l'encart pour le déplier