Dessiner avec SVG - sommaire

Snap SVG : découverte du framework SVG

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.

Snap SVG est un framework SVG (librairie JavaScript qui simplifie l'encodage en SVG). Via un script utilisant les fonctions haut niveau de cette librairie vous créez dans la page un canevas SVG et y dessinez des formes (simples et chemins).
Avantage du framework : il devient très facile de créer des animations SVG avec cette API. La définition de filtres et dégradés en Snap SVG est très simple.
Apprentissage : il faut saisir un script, utiliser les méthodes de la librairie qui correspondent aux balises du langage SVG. Il est donc conseillé de connaitre le SVG tradtionnel car une balise SVG devient en Snap SVG une méthode.

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 il faut charger la librairie correspondante dans la page.
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 la 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 installée dans le dossier contenant vos pages, il suffit donc d'inclure dans la partie HEAD de chaque page, l'instruction suivante pour charger la librairie Snap SVG : ... <script src="snap.svg-min.js"></script></b> ...

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 à une instruction HTML et un script.
L'instruction HTML :
<svg width ="360" height ="300" id ="zone">

Voyons maintenant le script snap SVG qui permet de dessiner dans le canevas. <script> var s = Snap("#zone"); // la variable s référence le premier canevas via la méthode Snap 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 </script>

Comme tout script JS interne à la page il doit être dans le conteneur SCRIPT.

Gros avantage de Snap par rapport au SVG conventionnel : on peut manipuler des variables !

Dans le script j'ai utilisé de nombreuses méthodes du framework :
• var s =Snap("#zone") : je crée un objet de type Snap qui est nommé "s".
• s.circle(cx,cy,r) : Je dessine un cercle dans "s" (le canevas)
• s.path() : je dessine un chemin
• s.ellipse(cx,cy,rx,ry): je dessine une ellipse
• verre.clone() : je cloner l'élément "verre"
• s.group(élément, élément, ...) : je regroupe en un seul objet plusieurs formes

Remarquez la notation pointée caractéristique de la POO.
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 propriétés de formatage : strokeWidth (et non pas stroke-with), fillOpacity (et non pas fill-opacity), etc. Il faut donc employer la notation "CamelCase".
Pour dessiner la monture, 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 (voir sommaire). Le chemin est noté ici en relatif.

Le code généré par le framework

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

Ci-dessous j'affiche le code généré dans le navigateur Google Chrome. J'aurais pu utiliser Firefox.
Remarquez le commentaire généré : "created width Snap"

Rappel : pour accéder aux outils de développement du navigateur, il suffit de faire un clic droit et de sélectionnez l'item "inspecter".

Exemple 2 : partir d'un code SVG existant

On peut très bien encoder d'abord en SVG conventionnel puis terminer avec un script Snap

Le code existant

On a définit une classe .forme1 qui peut s'appliquer à des objets SVG (emploi de propriétés CSS spécifiques aux éléments SVG : fill, stroke, etc.).
La zone de dessin identifiée "zone2" est "responsive" (largeur d'affichage exprimeée en %) et a un fond bleu ciel.
Je définis en SVG traditionnel un dégradé radial identfié "radial". Vous verrez un peu plus loin que l'on aussi définir des dégradés via Snap SVG.

Le script

Il faut bien sûr charger la librairie Snap SVG.
Ce script prend la suite du codage traditionnel et permet de remplir de différentes formes du canevas.

Extrait du script (tout le code sauf les balises SCRIPT début et fin) : ... var s2 = Snap("#zone2"); // création d'un objet Snap qui correspond au deuxième canevas de la page var cercle = s2.circle(100,100,50); cercle.attr({class : "forme1"}); var carre =s2.rect(600,50,100,100); carre.attr({fill : 'url(#radial)'}); var hippodrome =s2.rect(100,170,600,200,100); hippodrome.attr({class : "forme1"}); var ellipse =s2.ellipse(450,500,200,100); ellipse.attr({fill : 'url(#radial)' }); var ligne = s2.line(50,50,850,550); ligne.attr({strokeWidth : 6, stroke : "black"}); ...

Le script dessine dans le canevas :
• un cercle
• un carre
• un rectangle avec angles arrondis (5 paramètres)
• une ellipse remplie avec le dégradé radial défini
• un segment

Toutes les formes sont remplies via la classe "forme1" ou via le dégradé "radial".
C'est l'occasion de rappeler que fill : none rend la forme transparente (et non pas remplie de blanc ...)

Nouvelles méthodes abordées :
• rect(x,y, width, height,radius) : pour dessiner un rectangle, le 5ième paramètre est facultatif
• line(x1,y1,x2,y2) : pour dessiner un segment

Le rendu

J'admets, c'est pas terrible comme dessin. Mais l'important n'est pas là.
Le code est très succinct. Il pourrait l'être encore plus si j'avais défini le dégradé dans le script donc avec la syntaxe Snap SVG.