Le site de Patrick Darcheville

Animations avec SVG via JavaScript ou CSS ou SMIL

Horloge Les trois aiguilles Le cadran Animation des trois aiguilles ci-dessous

Ci-dessus un dessin vectoriel animé ; les éléments SVG sont animés via le SMIL mais il y avait d'autres solutions ...
Zoomez la page à 300% ; la qualité du cercle reste parfaite !

Animations SVG : les différentes techniques

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 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 ...

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 .
Donc elles ne peuvent être incluses dans une modèle d'animation relatif à un objet SVG.

Utiliser une librairie JavaScript

Il s'agit de générer du code SVG à partir d'un script basé sur les fonctions haut niveau de la librairie.
La plus célèbre des librairies est : Snap SVG.
Non seulement on peut générer des formes statiques mais on peut aussi animer des objets.

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 Sdu succès de jQuery on peut raisonnablement penser que Snap SVG aura un bel avenir en matière de développement SVG ; on pourrait lui appliquer le même slogan qu'à jQuery : "write less, do more."
Cependant la libraire Snap SVG est idéale pour concevoir dès le départ une image vectorielle animée. Mais si vous devez modifier un code SVG correspondant à des formes statiques il est préférable d'utiliser JavaScript ou le CSS ; Le SMIL était un bon outil mais comme les majors du Web semblent vouloir l'abandonner ...

Les différents chapitres de ce tuto