Accueil

Animations avec SVG

Ci-dessous une animation produite en SVG & SMIL. Horloge Les trois aiguilles Le cadran Animation des trois aiguilles ci-dessous

Animations SVG : les différentes techniques

Les éléments SVG peuvent être animées via JavaScript ou via le SMIL ou encore via CSS (version 3).
Il existe aussi des bibliothèques JavaScript qui permettent de générer directement du SVG dynamique.

Animation SVG avec JavaScript

Les éléments SVG sont des noeuds du DOM. Ils peuvent donc être manipulés avec JavaScript de base voire avec JS-jQuery.

Animation SVG avec le SMIL

Il existe une deuxième solution pour réaliser du SVG dynamique : utiliser les balises d'animation (animate, animateMotion, etc.). Pour parler "savant" on dira que l'on utilise le SMIL (Synchronized Multimedia Integration Language) qui est un langage XML.
Bonne nouvelle : SMIL est désormais implémenté dans la dernière version de MS Edge.

Animation SVG via CSS3

Il y une troisième solution, depuis la version 3 de CSS : animer un objet SVG via des règles de style. Il suffit d'appliquer un modèle d'animation CSS ("keyframes") à des éléments SVG (qui sont des éléments du DOM).

Attention certaines propriétés CSS ne peuvent s'appliquer à des éléments SVG telles background, border, position, top, left, etc .

Utiliser un framework SVG

Il s'agit de générer du code SVG à partir d'un script basé sur les fonctions haut niveau du framework.
La plus célèbre des framework SVG est : Snap SVG. Cet outil permet de générer du SVG correspondant à une animation.

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 le framework Snap SVG aura un bel avenir en matière de développement SVG.
Quant au SMIL il est soit pas implémenté par certains navigateurs et considéré comme obsolète par d'autres (Chrome). Donc la messe est dite ...
Pensez aussi au CSS3 ...

Sommaire de ce tuto