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