Dessiner avec SVG - sommaire

Snap SVG : autres définitions

Dans le chapitre précédent j'ai évoqué les filtres.
Connaissant le SVG standard, vous savez que dans la partie DEFS on définit non seulement les filtres mais aussi les dégradés, les motifs, les découpes et les masques.
Comment générer via Snap SVG ces différentes définitions ?

Les dégradés linéaires

Le codage des dégradés via Snap est très compacte et s'inspire de la syntaxe des dégradés en CSS 3.

Exemple

Quatre rectangles remplis chacun avec un dégradé linéaire. De gauche à droite et de bas en haut :
• un dégradé trois couleurs avec un axe diagonal descendant
• un dégradé trois couleurs avec un axe vertical
• un dégradé quatre couleurs avec un axe horizontal ; le noir occupe 50% de la forme
• un dégradé quatre couleurs avec un axe diagonal montant ; le noir occupe 10% seulement de la forme

Le code correspondant

Ce premier canevas (dans le document HTML) est identifié "zone1".
Le script :

 var s = Snap("#zone1") ;
// définition de 4 dégradés linéaires 
var lineairedd = s.gradient("l(0, 0, 1, 1) black-red-pink"); // axe  : diagonale descendante
var lineairev = s.gradient("l(0, 0, 0, 1) black-orange-yellow"); // axe vertical
var lineaireh = s.gradient("l(0, 0, 1, 0) black:50-navy-blue-skyblue"); // axe horizontal
var lineairedm = s.gradient("l(0, 1, 1, 0) black:10-olive-green-lime"); // axe : diagonale montante

// utilisation des dégradés
s.rect(0, 0, 200,300).attr({fill: lineairedd});
s.rect(300,0,200,300).attr({fill: lineairev});
s.rect(0,300,200,300).attr({fill: lineaireh});
s.rect(300,300,200,300).attr({fill: lineairedm});

Analysons la syntaxe relative à la définition d'un dégradé linéaire :
• lettre "l" comme dégradé linéaire
• entre parenthèses axe du dégradé sous forme de 2 couples de chiffres 0 et 1 ;
  0,0 = coin haut gauche ; 1,1 = coin bas droit ; 0,1 = coin bas gauche ; 1,0 = coin haut droit
• liste de couleurs séparées par un tiret ; répartition égale des couleurs sauf si un "stop" est précisé ce qui est le cas pour les deux derniers dégradés où vous retrouvez la syntaxe black:50-navy-blue-skyblue. Donc ici le noir occupe la moitié de la forme et les 3 autres couleurs se partagent l'autre moitié.

Le code SVG généré par le framework

Utilisez les outils de développement du navigateur pour visualiser ce code SVG généré !
Ici Snap SVG nous a évité un encodage fastidieux.

Les dégradés radiaux

Exemple

Deux dégradés radiaux sont définis avec pour origine le centre de la forme.
Chaque dégradé radial appliqué à un cercle et à un carré.

Le code correspondant

Ce deuxième canevas (dans la page web) est identifié "zone2".
Le script :

	var s = Snap("#zone2") ;
	var radial1 = s.gradient("r(0.5, 0.5)purple-cyan-pink"); // dégradé radial trois couleurs
	var radial2 = s.gradient("r(0.5, 0.5)black-navy-blue-skyblue"); // dégradé radial quatre couleurs
	s.circle(150,150,150).attr({fill: radial1});
	s.circle(450,150,150).attr({fill: radial2});
	s.rect(0,300,300,300).attr({fill: radial1});
	s.rect(300,300,300,300).attr({fill: radial2});

Analysons la syntaxe :
• lettres "r" comme dégradé radial
• entre parenthèses : origine du dégradé ; ici le centre de la forme puisque les valeurs sont .5 et .5
• liste de couleurs séparées par un tiret ; répartition égale des couleurs sauf si un "stop" est précisé.

Les motifs avec Snap SVG

Un motif ("pattern" en anglais) est un objet destiné à remplir à l'infini un autre objet.

Motif basé sur une image

Le canevas

Notez que les images ne sont pas collées !

Le code correspondant

Le canevas est identifié "zone3".
Le script :

var paper = Snap("#zone3");
paper.attr({viewBox: "0,0,300,300", width : "50%"}); 
var motif1 = paper.image("logo.png",0,0,50,50)
   .pattern(0,0,60,60);
paper.rect(0,0,300,300).attr({fill : motif1});

Notez qu'ici les valeurs des attributs viewBox & width" de l'élément SVG sont définis dans le script.
Donc l'instruction HTML se résume à : <svg id ="zone3" >

Comme il est d'usage dans la documentation Snap, le canevas courant est référencé par la variable "paper".

Dans "motif1" 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 via la méthode "pattern".

Le motif est un ensemble de chemins

Le canevas

Le cercle et le carré sont remplis par un motif.
Celui-ci est un ensemble de trois lignes obliques vertes et orientées.
Notez que l'espacement entre chaque motif.

Le code correspondant

Le canevas identifié "zone4" avec un viewBox (0,0,400,500).
Le script :

var paper = Snap("#zone4") ;
var motif2 = paper.path("M 0,10 L 10,0 M 0,20 L 20,0 M 10,20 L 20,10")
.attr({fill: "none", stroke: "green",  strokeWidth: 5 }).pattern(0,0,24,24); 
paper.circle(200, 100, 100).attr({fill: motif2});
paper.rect(100,200, 200, 200).attr({fill :motif2});

Notez que la méthode path comprend trois fois le paramètre M ; donc il y a trois chemins et chaque chemin se résume à un segment.

Les découpes (ou détourages)

Vous voulez qu'une image apparaisse dans un ellipse ou un losange. Il faut définir une découpe et l'appliquer aux photos.

Une image détourée

L'image apparait dans une ellipse.

Le code correspondant

Le canevas est identifié "zone5".
Le script :

var paper = Snap("#zone5") ;
var decoupe = paper.ellipse(250,300,200,300).attr({fill : "none"}); 
// définition d'une découpe
paper.image("../images/jolie_fille.jpg",0,0,500,600).attr({clipPath : decoupe});
// application à l'image insérée de la découpe

La forme de détourage est définie dans la variable "decoupe". Cette forme doit être transparente !

Instruction à étudier attentivement :

	paper.image("../images/jolie_fille.jpg",0,0,500,600).attr({clipPath : decoupe});

Notez la commande clipPath

Les masques

Un masque permet de rendre des zones de l'image semi-transparentes.

Le canevas

L'image bénéficie d'une découpe mais aussi d'un masque !

Le code correspondant

Le canevas est identifié "zone6".
Le script :

var  paper= Snap("#zone6") ;
var rect1 = paper.rect(0,0,500,300).attr({fill: "white", fillOpacity : 0.4}); 
var rect2 = paper.rect(0,300,500,300).attr({fill: "white", fillOpacity : 0.2}); 
var masque = paper.group(rect1,rect2); 
// définition d'un masque comprenant deux parties avec des opacités différentes
var decoupe = paper.ellipse(250,300,200,300).attr({fill : "none"});
paper.image("../images/jolie_fille.jpg",0,0,500,600).attr({mask : masque, clipPath : decoupe});
// application à l'image insérée du masque

Je définis un masque avec deux zones :
• rectangle haut : faible transparence
• rectangle bas : forte transparence

Étudiez attentivement cette instruction :

	paper.image("../images/jolie_fille.jpg",0,0,500,600).attr({mask : masque, clipPath : decoupe});

Notez la commande mask.