Découverte de Snap SVG

Snap SVG c'est l'équivalent pour SVG de ce que jQuery est pour JavaSCript.
Vous savez que pour programmer en JS-jQuery dans une page il faut charger la librairie jQuery dans la page.
Et bien pour dessiner via Snap SVG il faut charger la version minimaliste de cette librairie dans la page.

Démarrer avec Snap

Allez sur le site http://snapsvg.io et cliquez sur le bouton download pour récupérer un fichier zip.
Décompressez le fichier. Après décompression vous obtenez un dossier "snap.SVG 0.51".
Ouvrez ce dossier et plus précisément le sous-dossier "dist". C'est dans dossier que vous trouvez les deux librairies proprement dites : la version détaillée (snap.svg.js) et la version minimaliste (snap.svg-min.js).

En supposant que la version minimaliste de la librairie soit installée dans le dossier contenant vos pages, il suffit donc d'inclure dans chaque page l'instruction suivante pour charger la librairie Snap SVG :

<head> ... <script src="snap.svg-min.js"></script> ... </head>

Cette instruction doit se trouver dans la partie HEAD de la page.

Premier exemple : création d'un canevas et dessin dans ce dernier

Le canevas SVG

Le code correspondant

Il se réduit à un script !

var s = Snap(400,300); // création d'un canevas SVG de 400 par 400 var param ={strokeWidth: 10, stroke:'gray', fill : 'none'}; // ci-dessus définition de paramètres de remplissage pour certaines formes var verre = s.circle(100,100,50); // dessiner le verre de lunette verre.attr(param); // colorier verre var oeil = s.ellipse(100, 100, 10, 15); // dessiner oeil derrière le verre : rempli de noir (couleur par défaut) var monture = s.path('M 150 110 q 27 -35 50 0'); // dessiner monture de lunettes monture.attr(param); // colorier monture var verre2 = verre.clone().attr({cx: 250}); // cloner verre pour obtenir deuxième verre var yeux = s.group(oeil,oeil.clone().attr({cx: 250})); // cloner oeil pour obtenir deuxième oeil puis groupage des deux yeux. var lunettes = s.group(verre,verre2, yeux); // groupage de toutes les formes dessinées en un seul objet

Donc comme avec Canvas, pour dessiner dans la page Web il suffit d'écrire un script.
Mais il s'agit ici de dessin vectoriel mais d'un dessin matriciel !
L'emploi de variables (qu'on ne peut utiliser en SVG traditionnel) permet de faire beaucoup de choses en quelques lignes de code ! Dans l'exemple les attributs communs à plusieurs éléments sont stockés dans la variable "param". Il suffit ensuite d'argumenter la méthode "attr()" avec cette variable.

Ici c'est le script qui crée une zone SVG de 400 pixels par 400.
Dans l'exemple la zone de dessin vectoriel est référencée par la variable "s". J'aurais pu l'appeler autrement.

Attention dans la documentation officielle de Snap SVG il est d'usage de référencer la zone SVG par la variable "paper". Donc pour y trouver des informations sur les méthodes citées plus haut il faut rechercher : paper.circle(), paper.path(), paper.ellipse(), etc.
Vous verrez dans la documentation officielle que la méthode paper.rect() admet 6 paramètres dont 4 obligatoires.

Quant à la méthode attr() elle s'applique à un élément du canevas (un cercle, un rectangle, une ellipse, etc. ).
Syntaxe : élément.attr( {attribut : valeur, attribut : valeur, ...}) OU élément.attr(variable)

Respectez la syntaxe JS pour les attributs de formatage : strokeWidth (et non pas stroke-with), fillOpacity (et non pas fill-opacity), etc.
Dans l'exemple le chemin correspond à une courbe quadratique. Pour comprendre le paramétrage de cette commande je vous renvoie à la page sur les chemins dans le même tuto ; le chemin est noté ici en relatif.

Exemple 2 : partir d'un code SVG existant

Le code existant

... <script src="snap.svg-min.js"></script> <style> .forme1 {fill : none; stroke : black ; stroke-width : 4; } ... </head> <body> ... <svg viewBox ="0 0 900 600" width ="80%" height ="auto" id ="zone" style ="background : skyblue;"> <defs> <radialGradient id="radial" > <stop offset="0%" stop-color = 'olive' stop-opacity ="1"/> <stop offset="25%" stop-color = 'olive' stop-opacity ="0.8" /> <stop offset="50%" stop-color = 'olive' stop-opacity ="0.6"/> <stop offset="75%" stop-color = 'olive' stop-opacity ="0.4"/> <stop offset="100%" stop-color = 'olive' stop-opacity ="0.2"/> </radialGradient> </defs> </svg>

N'oubliez pas le script qui charge la librairie !
On a définit une classe .forme1 qui peut s'appliquer à des objets SVG (emploi de propriétés CSS propres aux éléments SVG : fill, stroke, etc.).
La zone de dessin SVG existe déjà et de plus elle est "responsive" et a une couleur de fond bleu ciel et est identifiée "zone" !
Dans le code SVG traditionnel j'ai aussi défini un dégradé radial.

Le script

Un script Snap SVG permet de remplir la zone de différentes formes.

var s = Snap("#zone"); // utilisation du canevas SVG existant var cercle = s.circle(100,100,50); cercle.attr({class : "forme1"}); var carre =s.rect(600,50,100,100); carre.attr({class : "forme1"}); var hippodrome =s.rect(100,170,600,200,100); hippodrome.attr({class : "forme1"}); var ellipse =s.ellipse(450,500,200,100); ellipse.attr({fill : 'url(#radial)' }); var ligne = s.line(50,50,850,550); ligne.attr({strokeWidth : 6, stroke : "black"});

Toutes les formes sont coloriées via la classe "forme1" sauf l'ellipse qui est remplie avec le dégradé radial.
C'est l'occasion de rappeler que "fill : none" rend la forme transparente (et non pas remplie de blanc comme certains pensent).

Nouvelles méthodes abordées : rect(x,y, width, height,radius), line(x1,y1,x2,y2) .
Pour la méthode rect() le cinquième argument est facultatif : pour arrondir les angles.

Le rendu

Prolongements

Ce qui est intéressant avec cette librairie JS c'est la souplesse.
Dans ce deuxième exemple je vous montre que l'on peut partir d'un code SVG existant et le compléter avec un script en Snap SVG.
Dans la page suivante vous découvrirez d'autres méthodes mais toujours dans le cadre du dessin statique. Pour les animations un peu de patience ...

Passons au chapitre suivant suite !
Retour menu