Le site de Patrick Darcheville

Animer les objets SVG (avec JavaScript ou le SMIL ou CSS)

Animations SVG

Animer avec SVG

Dessins animés en SVG

Orthographe : guide de survie

Par un ancien cancre en orthographe : l'auteur du site.

Ci-dessus une image SVG animée (emploi du 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 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 ...

En ce début de l'année 2017 il semble cependant encore raisonnable de priviligier la solution JavaScript pour des sites grand public en particulier à cause des navigateurs MicroSoft (IE et Edge) car non seulement le SMIL n'est pas implémenté chez ces navigateurs mais de plus la propriété CSS animation ne fonctionne plus lorsqu'il s'agit d'animer des objets SVG ...

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