Dessiner avec SVG - sommaire

Snap SVG : chemins, masques, découpes, motifs. textes

Avec Snap SVG un chemin peut être noté en relatif (comme en SVG standard).
Pour réduire les lignes de code il ne faut pas hésiter à grouper les formes car la méthode attr() peut s'appliquer à un groupe !
Le clonage doit aussi être utilisé sans aucune modération.

Les outils masques, découpes, motifs sont aussi disponibles sous Snap SVG et encore une fois le code est beaucoup moins verbeux.

Les chemins avec Snap SVG

Objectif : dessiner un sapin de Noël. Il est préférable de réaliser d'abord un croquis sur une feuille à petit carreaux. Ce n'est pas une perte de temps bien au contraire ...

Ci-dessous le croquis

Grâce à ce schéma je détermine facilement les arguments du chemin.
Je vois que si je code le chemin en relatif, je vais avoir des couples 'l 50 50' et des couples 'h-25' puis des couples 'l 50 -50' ...

Le code correspondant

CSS & HTML

Une classe "ligne" pour colorier certains chemins.

Le script

Notez le chemin exprimé en relatif pour dessiner le branchage. Pas de virgules entre les x et y !
Si vous ne comprenez rien dans ce code vous devez visiter la page sur les chemins dans ce même tuto.
Les deux filtres (floutage, ombrage) sont appliqués à "sapin" qui est un groupe de formes (branches + tronc).
Emploi de la méthode polyline() pour dessiner la guirlande. A la différence de polygone le chemin n'est pas fermé. J'aurais pu utiliser path().
Je ne dessine qu'une boule ; les autres sont des clones de la première.

Le rendu

Le sapin est légèrement flouté et ombré.
Il comporte une guirlande et des boules.

Masque et découpe avec Snap SVG

Une image découpée et bénéficiant d'un masque

L'image apparait dans une ellipse avec deux zones plus ou moins transparentes.

Le script correspondant

Il y a bien sûr une instruction HTML pour créer le canevas 'responsive' identifié "zone1". var s1 = Snap("#zone1") ; var rect1 = s1.rect(0,0,500,300).attr({fill: "white", fillOpacity : 0.4}); var rect2 = s1.rect(0,300,500,300).attr({fill: "white", fillOpacity : 0.2}); var masque = s1.group(rect1,rect2); // définition d'un masque comprenant deux parties avec des opacités différentes var decoupe = s1.ellipse(250,300,200,300).attr({fill : "none"}); // définition d'une découpe s1.image("../images/jolie_fille.jpg",0,0,500,600).attr({mask : masque, clipPath : decoupe}); // application à l'image insérée du masque et la découpe

Notez les commandes "mask" et "clipPath" dans la méthode attr().

Les motifs (pattern) avec Snap SVG

Motif basé sur une image

Le rendu

Les images ne sont pas collées !

Le code

Notez qu'ici le "viewbox" est défini dans le script. Donc l'instruction HTML se résume à peu de chose ...
Dans "motif" les images ne seront pas collées car elles font 50 par 50 mais sont répétées tous les 60px tant en largeur qu'en hauteur.

Le motif est un ensemble de chemins

Élaboration du motif

Le code correspondant : ... <svg width ="30%" viewBox ="0 0 20 20" id ="zone6"></svg> <script> var s6 = Snap("#zone6") ; var p = s6.path("M 0,10 L 10,0 M 0,20 L 20,0 M 10,20 L 20,10").attr({ fill: "none", stroke: "#bada55", strokeWidth: 5 }); ...

Trois chemins définis dans la variable p.

Canevas avec application du motif précédemment élaboré

Maintenant que nous sommes satisfait du motif conçu, nous allons l'appliquer à des formes dans le cadre d'un canevas.

Le rendu :

Notez que les groupes de chemins sont espacés.

Le script :
Le canevas SVG est identifié "zone9". ... var s9 = Snap("#zone9") ; var p = s9.path("M 0, 10 L 10,0 M 0,20 L 20,0 M 10,20 L 20,10").attr({ fill: "none", stroke: "#bada55", strokeWidth: 5 }); var motif = p.pattern(0, 0, 24, 24); var rond = s9.circle(200, 200, 100).attr({fill: motif}); var carre =s9.rect(100,320, 200, 200).attr({fill :motif}); ...

On définit dans p un ensemble de 3 chemins dessinés dans un carré de 20 par 20.
Dans "motif" on définit un pattern basé sur p dans un carré de 24 par 24.
On remplit les deux formes avec le motif "motif".

Une bannière avec Snap SVG

Nous allons traiter dans cet exemple de la méthode text().

Le rendu

Le code correspondant

CSS & HTML

On ne peut pas appliquer la propriété box-shadow à un élément SVG. Par contre la propriété text-shadow est compatible !
Je rappelle que la propriété CSS text-anchor spécifique au texte SVG aligne le texte horizontalement ; si sa valeur est "middle" alors disposition du texte autour du point X.
La balise SVG étant un élément HTML, on peut lui appliquer un dégradé défini par le CSS.

Le script

Le script est des plus succinct.