Le site de Patrick Darcheville

Animations avec SVG

Dessins vectoriels animés

Dessins SVG animés

Bibliothèque Snap SVG

Actualité

Je viens de découvrir la librairie JS 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é dans ce tuto quelques pages sur l'image vectorielle animée avec Snap SVG.

Animations SVG : autres techniques

Si vous n'utilisez pas la librairie Snap SVG (parce que vous devez animer un dessin vectoriel initialement statique) vous pouvez alors utiliser JavaScript ou SMIL voire CSS3.

Animation SVG avec JavaScript

Les éléments SVG sont des noeuds du DOM. Ils peuvent donc être manipulés avec JS 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 ...
SMIL est désormais déprécié par Chrome et son utilisation va provoquer des avertissements dans la console ...
Quid de l'avenir du SMIL ?

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

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