Snap SVG : découverte du framework SVG

Snap SVG est un framework SVG.
Via un script utilisant les fonctions haut niveau de cette librairie vous créez dans la page un canevas SVG (image vectorielle) et des formes.
Gros avantage par rapport à Inkscape il s'agit d'un générateur de code SVG interne (dans la page) alors qu'Inkscape (ou Boxy SVG) créent des fichiers d'images vectorielles au format SVG.
De plus via Snap SVG le dessin est non seulement interne mais peut être animé.
Inconvénient : il faut saisir un script, utiliser les méthodes du framework qui correspondent aux balises du langage SVG. Donc il faut connaitre la syntaxe SVG !
Mais pour le moment intéressons nous à la production d'un dessin statique dans la page.

Démarrer avec Snap SVG

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 cette librairie dans la page.

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 SVG et dessin dans ce dernier

Le canevas SVG

Zoomer à 300% le canevas ; les ronds sont toujours aussi nets. Il s'agit bien d'une image vectorielle !

Le code correspondant

Il se réduit à un script. Il n'y a même pas d'instruction HTML car la zone de dessin SVG est produite également via le script !

		var s = Snap(400,300);
		// création d'un canevas SVG de 400 par 300
		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 un verre de lunette
		verre.attr(param);
		// colorier ce 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});
		// obtention deuxième verre à partir du premier : clonage
		var yeux = s.group(oeil,oeil.clone().attr({cx: 250}));
		// beaucoup de choses en une seule instruction : clonage puis groupage !
		var lunettes = s.group(verre,verre2, yeux);
		// groupage de toutes les formes dessinées en un seul objet

Comme tout script interne il doit être contenu dans la balise double SCRIPT.

Gros avantage par rapport au SVG traditionnel : on peut utiliser des variables !
L'emploi de variables 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.

Les balises SVG deviennent des méthodes dans le framework.

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

Le code généré par le framework

Grâce aux outils de développement du navigateur on peut voir le code SVG généré par le script.

Exemple 2 : partir d'un code SVG existant

On peut très bien démarrer le codage en SVG traditionnel puis poursuivre à un script Snap.

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>

On a bien sûr chargé le framework.
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" (largeur d'affichage exprimeée en %). Il ne faut pas alors oublier l'attribut viewBox pour dimensionner et positionner les formes contenues.
Le canevas a une couleur de fond bleu ciel et a obligatoirement un identifiant, ici "zone".
Dans le code SVG traditionnel j'ai aussi défini un dégradé radial.

Le script

Un script Snap SVG prend la suite et permet de remplir de différentes formes la zone de dessin SVG.

...
		var s = Snap("#zone");
		// une variable référence le 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"}); 
...

Il s'agit d'un extrait du code ; les balises ouvrante et fermante SCRIPT ne sont pas mentionnées.

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

Le rendu

Allons plus loin

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 ... chapitre suivant !
Retour menu