Snap SVG : découverte de ce framework pour générer du SVG

En lisant les chapitres précédents du tutoriel sur le langage SVG vous avez constaté que parfois l'encodage en SVG peut s'avérer fastidieux.

Heureusement il existe des solutions pour éviter cet encodage fastidieux.
Ainsi pour générer du code SVG dans une page web vous pouvez "faire un détour" : faire appel à un éditeur WYSIWYG de SVG (Inkscape ou Boxy SVG) pour obtenir un document SVG puis coller ce code dans la page web.
Mais il existe une autre solution : faire appel à un framework JavaScript dédié SVG ; le plus connu est Snap SVG.

Snap SVG propose de nombreuses méthodes pour créer et styliser des formes vectorielles.
On dit souvent que Snap SVG est à SVG ce que jQuery est à JavaScript : il simplifie le développement en SVG comme jQuery simplifie le développement en JavaScript.
Documentation officielle de la librairie Snap SVG

Démarrer avec Snap SVG

Vous savez que pour programmer en JS-jQuery, il faut charger la librairie jQuery dans la page. Et bien pour dessiner via Snap SVG c'est le même principe : il faut charger dans la page la librairie Snap SVG.
Comme avec jQuery, la libraire se résume à un fichier d'extension .js !
Comme en jQuery il existe une version normale et une version compressée de cette librairie.

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 enregistrée dans le dossier contenant cette page web, il suffit donc d'inclure dans la partie HEAD de ladite page l'instruction suivante :

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

Pour être assuré d'obtenir la dernière version du framework il est possible de se connecter à un CDN. Voir chapitre suivant.

Extrait de la partie HEAD de cette page web

...
<script src="snap.svg-min.js"></script>
<noscript>
	<h2>Les zones de dessin restent vides car votre navigateur a bloqué le JavaScript</h2>
</noscript>
<style>
	.forme1 {fill : none; stroke : black ; stroke-width : 4; }
</style>

...

N'oubliez pas de charger le petit fichier correspondant au framework.
Pensez que certains visiteurs désactivent le JavaScript. Dans ce cas les zones de dessin SVG resteront vierges mais le message dans le conteneur NOSCRIPT avertira le visiteur du problème.
Les scripts Snap SVG peuvent faire référence à des classes définies dans la feuille de style.

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

Maintenant nous pouvons écrire les différents scripts Snap SVG dans cette page web.

Le rendu

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

Le code correspondant de la page web

>
<svg width ="360" height ="300" id ="canevas1">
<script>
	var s = Snap("#canevas1");
	var param ={strokeWidth: 10, stroke:'gray',  fill : 'none'};
	var verre = s.circle(100,100,50);
	verre.attr(param);
	var verre2 = verre.clone().attr({cx: 250});
	var oeil = s.ellipse(100, 100, 10, 15);
	var oeil2 = oeil.clone().attr({cx: 250});
	var monture = s.path('M 150 110 q 27 -35 50 0');
	monture.attr(param);
	var yeux = s.group(oeil,oeil2);
	yeux.attr({fill :'skyblue'});
</script>
</svg>

Il ne suffit pas d'écrire le script il faut aussi une instruction HTML pour créer une zone de dessin provisoirement vierge ; à charge pour le script de la remplir ...

Comme tout script JS dans un document HTML, il doit être contenu dans la balise double SCRIPT.

Gros avantage de Snap par rapport au SVG standard : on peut manipuler des variables. Par exemple : verre.attr(param)
Sachant que la variable param contient : {strokeWidth: 10, stroke:'gray', fill : 'none'}
Il s'agit donc d'un formatage applicable à objets du canevas.
Il s'agit d'une règle de style donc n'oubliez pas les accolades.

var s =Snap("#canevas1") : le canevas "canevas1" devient un objet Snap
var verre = s.circle(100,100,50) : Je dessine un cercle dans le canevas et le nomme "verre"
s.path() : je dessine un chemin dans le canevas
var oeil = s.ellipse(100, 100, 10, 15): je dessine une ellipse et la nomme "oeil"
var verre2 = verre.clone().attr({cx: 250}) : je clone l'objet "verre" et nomme la copie "verre2"
var yeux = s.group(oeil,oeil2) : je regroupe "oeil" & "oeil2" dans "yeux"
yeux.attr({fill :'skyblue'}) : je remplis un groupe de formes

Respectez la syntaxe JavaScript pour les propriétés de style :
strokeWidth (et non pas stroke-with), fillOpacity (et non pas fill-opacity), etc.
Il faut donc employer la notation "CamelCase" pour les propriétés.

Chainer les méthodes pour simplifier le script

Je peux simplifier le script. Ainsi je peux remplacer les deux instructions ci-dessous :

var monture = s.path('M 150 110 q 27 -35 50 0');
monture.attr(param);

Par une seule :

var monture = s.path('M 150 110 q 27 -35 50 0').attr(param);

Donc une seule instruction pour dessiner et styler un objet en chainant les méthodes path & attr.

Le code généré par le framework

On peut lire le code SVG généré par le framework. Il suffit d'ouvrir l'onglet "éléments" dans la console du navigateur.
Ci-dessous le code généré dans le navigateur Google Chrome : ... <desc>Created with Snap</desc> <defs></defs> <circle cx="100" cy="100" r="50" style="stroke-width: 10px;" stroke="#808080" fill="none"></circle> <circle cx="250" cy="100" r="50" style="stroke-width: 10px;" stroke="#808080" fill="none"></circle> <path d="M 150 110 q 27 -35 50 0" style="stroke-width: 10px;" stroke="#808080" fill="none"></path> <g style="" fill="#87ceeb"> <ellipse cx="100" cy="100" rx="10" ry="15"></ellipse> <ellipse cx="250" cy="100" rx="10" ry="15"></ellipse> </g> </svg>

Exemple 2 : mélanger encodage standard et script Snap

Ci-dessous je dessine certains objets via un script Snap puis je reviens à l'encodage en SVG natif.

Le code dans la page web

<svg  width="80%" viewBox ="0 0 400 400" id ="canevas2">
	<script>
		var s = Snap("#canevas2") ;
		s.rect(0, 0, 400,400).attr({fill: 'skyblue'});
		s.rect(150,150,100,100).attr({fill: 'navy'});
	</script>
	<rect x="300" y="300" width="100" height="100" fill = "red" />
	<rect x="0" y="0" width="100" height="100" fill = "none" stroke ="white" stroke-width ="5" />
</svg>

Via un script Snap je dessine deux rectangles.

À l'extérieur du script donc en SVG natif, je dessine deux petits rectangles.

Le rendu

Notez bien l'imbrication des conteneurs (balises doubles).
Je ferme le conteneur script alors que je n'ai pas encore fermé le conteneur svg donc je peux toujours écrire des instructions en SVG natif.

Récupération de la librairie à partir d'un CDN (Content Delivrery Network)

Comme tout framework et pour avoir la dernière version, mais à condition d'avoir une connection internet, il est préférable de charger le fichier à partir d'un site proposant les versions les plus récentes des outils web.

Extrait de la partie HEAD de cette page :
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js" > < /script >

Méthodes after() & before()

Le rendu

Notez que la ligne noire est au dessus de l'ellipse et que l'ensemble est penché.

Le code dans le document HTML

Instruction HTML :
< svg viewBox ="0 0 800 400" width ="80%" id ="canevas3" >

Le script à la suite :

	var s = Snap("#canevas3") ;
	var rx = 100; var ry = 150; 
	// dimensions futures de l'ellipse
	var ligne = s.line(100,200,300,200).attr({stroke: 'black', strokeWidth : 30}) ;
	// dessiner ligne
	var ellipse = s.ellipse(200, 200, rx, ry).attr({fill: 'blue'}).after(ligne);
	// dessiner ellipse sous ligne 
	var groupe = s.group(ellipse,ligne);
	// grouper les deux formes en un objet
	groupe.attr({transform : 't400r45'}); 
	// translater et incliner l'objet

Bien sûr ce code JS-Snap doit être contenu dans la balise double SCRIPT.

Il faut ensuite fermer l'élément SVG :
< /svg >

Je vous rappelle que si vous voulez des canevas "responsives" la valeur de l'attribut width de l'élément SVG doit être exprimé en pourcentage et par ailleurs il faut impérativement utiliser l'attribut viewBox avec une suite de quatre valeurs.

L'instruction qui dessine l'ellipse est exécutée après celle qui dessine la ligne ; donc l'ellipse devrait être normalement au dessus de la ligne or c'est l'inverse ...
En effet j'ai utilisé la méthode after(élément). Il existe aussi la méthode before(élément).

Ces deux méthodes sont pratiques car elles permettent de modifier l'ordre d'empilement des objets sans que vous ayez à bouleverser l'ordre des instructions JS dans le script.
Dans ce script j'utilise la méthode transform(). J'y reviendrai.

Le code SVG généré

...
<desc>Created with Snap</desc>
<defs></defs>
<g transform="matrix(0.7071,0.7071,-0.7071,0.7071,600,-82.8427)">
	<ellipse cx="200" cy="200" rx="100" ry="150" style="" fill="#0000ff"></ellipse>
	<line x1="100" x2="300" y1="200" y2="200" style="stroke-width: 30px;" stroke="#000000"></line>
</g>
...

Générer beaucoup d'objets dans le canevas avec un minimum de code

Grâce à l'emploi d'une boucle dans le cadre d'un script Snap SVG on peut générer beaucoup de code SVG avec un script minimaliste.

Le rendu

Le code correspondant

...
<svg viewBox ="0 0 800 400"  width ="80%"  id ="canevas4">
	<script>
	var s = Snap("#canevas4") ;
	var pos_x = 50, pos_y = 50, w =100, h =100;
	var carre = s.rect(pos_x,pos_y,w,h).attr({stroke : "red", fill : "none"}); 
	for(var vcompteur = 1; vcompteur < 15 ; vcompteur++)
	{
	 
		pos_x = pos_x + 20; pos_y = pos_y + 20; 
		carre.clone().attr({x: pos_x, y:pos_y});
	}
	</script> 
</svg>

Le script est très concis.

Le code SVG généré

...
<desc>Created with Snap</desc>
<defs></defs>
	<rect x="50" y="50" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="330" y="330" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="310" y="310" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="290" y="290" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="270" y="270" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="250" y="250" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="230" y="230" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="210" y="210" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="190" y="190" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="170" y="170" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="150" y="150" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="130" y="130" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="110" y="110" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="90" y="90" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect>
	<rect x="70" y="70" width="100" height="100" style="" stroke="#ff0000" fill="none"></rect> 
</svg>

Remarquez que systématiquement les balises sont doubles même lorsque ce n'est pas nécessaire.
Cette fois on apprécie vraiment le framework car il évite un encodage fastidieux ...

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins vectoriels statiques

Dessins vectoriels animés

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Snap SVG : découverte de ce framework pour générer du SVG

Démarrer avec Snap SVG

Extrait de la partie HEAD de cette page web

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

Le rendu

Le code correspondant de la page web

Chainer les méthodes pour simplifier le script

Le code généré par le framework

Exemple 2 : mélanger encodage standard et script Snap

Le code dans la page web

Le rendu

Récupération de la librairie à partir d'un CDN (Content Delivrery Network)

Méthodes after() & before()

Le rendu

Le code dans le document HTML

Le code SVG généré

Générer beaucoup d'objets dans le canevas avec un minimum de code

Le rendu

Le code correspondant

Le code SVG généré