Javascript : bibliothèque Snap SVG

Vous savez que SVG est un format d'image vectorielle. Il s'agit d'un langage XML donc d'un langage de balisage comme le HTML.
On ne peut pas générer du SVG dans une page avec JavaScript de base mais il existe des bibliothèques à cet effet.
La plus célèbre de ces librairies est Snap SVG. Snap SVG est une bibliothèque JavaScript open source d’Adobe.
Cette librairie a été écrite par Dmitry Baranovskiy qui avait écrit auparavant Raphael. Snap SVG est donc la suite de Raphael.

Ci-dessous trois exemples d'animations SVG avec Snap SVG.
Ces animations ne sont exécutées qu'une fois et ne durent que quelques secondes. Aussi n'hésitez pas à actualiser la page pour les relancer.

Exemple 1 : animation de cercles

Le canevas SVG contenant l'animation

Actualisez la page pour relancer l'animation !

Le code correspondant

Il se résume à un script car c'est dans celui-ci que le canevas est créé !

// chargement de la librairie <script src="snap.svg-min.js"></script> </head> ... <script> // le script qui dessine et remplit la zone de dessin SVG var s = Snap(600,300); // création d'un zone de dessin SVG var grand = s.circle(300,200,100); // dessiner un grand cercle dans s grand.attr({fill: "green", stroke: "black", strokeWidth: 5}); // colorier le cercle var petit = s.circle(200,200,70); // dessiner un petit cercle dans s var petit2 = s.circle(400,200,70); // dessiner un autre petit cercle dans s var groupe = s.group(petit, petit2); // regroupement des deux petits cercles en un seul groupe groupe.attr({fill : "none",stroke :"yellow", strokeWidth :4}); // colorier le groupe de formes petit.animate({r: 30, cx :150}, 6000); // animer petit cercle de gauche petit2.animate({cx: 300, r:100}, 6000); // animer petit cercle de droite </script>

Comme pour jQuery il faut charger une librairie (un fichier JS) pour pouvoir utiliser des fonctions haut niveau de cette bibliothèque.

Examinons maintenant attentivement certaines instructions du script.
var s = Snap(600,300) : création avec la méthode Snap d'un canevas SVG de 600 par 400 pixels.
Cet objet sera référencé ici par la variable objet "s".
Ici on dessine un grand cercle puis deux petis cercles ; on anime chaque petit cercle durant 6 secondes : variations du rayon et de l’abscisse du centre.

Exemple 2 : fusion de deux carrés

Le canevas SVG contenant l'animation

Actualisez la page pour relancer l'animation !

Le script correspondant

var s = Snap(400,200); // création d'un canevas SVG dans la page var carre1 = s.rect(20,20,30,30).attr({ fill: 'red' }); // premier carré rempli de vert var carre2 = s.rect(150,20,30,30).attr({ fill: 'blue'}); // deuxième carré rempli de bleu var anim_modele = Snap.animation({width: 80, height: 80, fill: 'purple', x: 60, y: 50 }, 4000); // définition d'un modèle d'animation carre1.animate(anim_modele); carre2.animate(anim_modele); // application du modèle d'animation aux deux carrés qui vont donc fusionner en un seul à la fin de l'animation

Notez que la syntaxe fait penser à du jQuery ; ainsi on retrouve le "chainage" qui permet ici en une seule instruction de dessiner et de colorier une forme.

Grâce à la méthode Snap.animation() on peut définir un modèle d'animation puis appliquer ensuite ce modèle à plusieurs formes. En effet dans ce modèle on ne fait référence à aucun élément ; il s'agit donc bien d'une animation générique.

Attention les deux animations sont ici simultanées ! C'est dans la page suivante que j'explique comment enchainer les animations ...

Exemple 3 : transformation de carrés sur clic

Le rendu

Cliquez sur l'un des carrés pour l'animer !
Actualisez la page pour repositionner les carrés.

Ici l'animation de l'élément est déclenchée sur un l'événement clic.

Le script correspondant

var s = Snap(400,200); var carre = s.rect( 50,50,40,40 ).attr({ fill: 'red'}); var carre2 =carre.clone().attr({y: 150, fill :"green"}); var transformation = Snap.animation({transform: 't200s2r45'},4000); // l'animation consiste en un transformation complexe : translation, changement d'échelle et rotation // création d'une fonction générique function animer() {this.animate(transformation);} // appel fonction générique carre.click(animer); carre2.click(animer);

Le modèle d'animation "transformation" est ici une transformation avec translation, changement d'échelle et rotation.
transform: 't200s2r90' : "t" comme "translate", "s" comme "scale" et "r" comme "rotate". Donc l'élément concerné se déplace, grossit et tourne sur lui même.
Ce modèle d'animation est ensuite intégré dans une fonction générique "animer" (car emploi dans cette fonction du mot "this" en guise d'élément).
Il suffit ensuite d'appeler cette fonction "animer" lors d'un clic sur "carre" OU sur "carre2" !

Aller plus loin avec Snap SVG

Attention cette page n'est pas un tuto sur Snap SVG mais simplement une "mise en bouche" (lol) ; vous donner envie d'utiliser cet outil pour développer des dessins vectoriels animés rapidement. Je rappelle que des logiciels tels Inkscape ne peuvent générer que du SVG correspondant à des dessins statiques.

Pour en savoir plus sur Snap SVG : decouverte de Snap SVG
Retour menu