Accueil

Traduction

Dessiner avec SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 un peu le SVG tradtionnel : 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 :

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">

Notez que la zone de dessin est identifiée "zone" et n'est pas 'responsive' (largeur du canevas exprimé en pixels). Mais comme la largeur ne dépasse pas 360 pixels, l'affichage sur un mobile sera quand même correct.

Voyons maintenant le script snap SVG qui permet de dessiner dans le canevas.

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

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

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"

Pour observez ce code SVG génére il faut produire la commande : "outils / plus d'outils / outils de développement / Elements"
Pensez à cliquer sur les triangles noirs pour développer le code.

Exemple 2 : partir d'un code SVG existant

On peut très bien encoder d'abord en SVG conventionnel puis compléter 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) :

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

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.