Snap SVG : lCréer et appliquer les filtres

La définition de filtres en SVG traditionnel est un peu lourde ...
Si vous avez lu mon tutoriel sur CSS vous savez que la définition d'un filtre en CSS3 est un jeu d'enfant. Il suffit d'utiliser la propriété filter avec une commande.

Le créateur de Snap s'est inspiré des filtres CSS mais en plus il propose "shadow" (ombrage). Ce qui est assez logique en effet je rappelle que la propriété CSS box-shadow ne peut pas s'appliquer à un élément SVG.

Dans tous les exemples qui suivent le SVG de départ se résume au conteneur SVG avec les attributs widht, height,viewBox & ID. Donc je ne vous communique que le script Snap SVG.

Le floutage : blur

Exemple

Le script correspondant

	var paper = Snap("#zone1") ;
	// le canevas SVG est référencé par la variable paper
	var flou = paper.filter(Snap.filter.blur(10,10));
	// définition d'un filtre : floutage
    var rectangle = paper.rect(100, 100, 200,300).attr({fill : "red", filter: flou});
	//application du flou à un rectangle

Ici la zone de dessin SVG est référencée par la variable "paper". C'est l'usage dans la documentation officielle de Snap SVG.

Pour chaque type de filtre il y a une méthode. Pour un flou il s'agit de : Snap.filter.blur().
Il ne suffit pas de définir un filtre il faut aussi préciser qu'il s'applique au canevas : paper.filter(Snap.filter.blur())

Rotation sur le cercle chromatique : hueRotate

Exemple

Le script

	var s = Snap("#zone2") ;
	// la variable "s" référence le canevas SVG
	// définition de 5 filtres chromatiques ci-dessous
	var f45 = s.filter(Snap.filter.hueRotate(45)) ;
	var f135 = s.filter(Snap.filter.hueRotate(135)) ;
	var f225 = s.filter(Snap.filter.hueRotate(225)) ;
	var f315 = s.filter(Snap.filter.hueRotate(315)) ;
	var f360 = s.filter(Snap.filter.hueRotate(360)) ;
	
	// application des filtres à une image
	s.image("../images/jolie_fille.jpg",0,0,160,200).attr({filter: f45 });
	s.image("../images/jolie_fille.jpg",160,0,160,200).attr({filter: f135 });
	s.image("../images/jolie_fille.jpg",320,0,160,200).attr({filter: f225 });
	s.image("../images/jolie_fille.jpg",480,0,160,200).attr({filter: f315 });
	s.image("../images/jolie_fille.jpg",640,0,160,200).attr({filter: f360 });

On définit 5 filtres pour le canevas (référencé par la variable "s"). On utilise ici la méthode Snap.filter.hueRotate().

Le paramètre est une valeur comprise entre 0 degré et 360 degrés. Attention une rotation de 360° équivaut a une rotation de 0° c'est à dire l'original !

Luminosité : brigthness

Exemple

Le script

	var s = Snap("#zone3") ;
	// définition de 5 filtres de luminosité
	var f0 = s.filter(Snap.filter.brightness(0)) ;
	var f1 = s.filter(Snap.filter.brightness(.5)) ;
	var f2 = s.filter(Snap.filter.brightness(1)) ;
	var f3 = s.filter(Snap.filter.brightness(2)) ;
	var f4 = s.filter(Snap.filter.brightness(4)) ;
	
	// application des filtres à une image
	s.image("../images/jolie_fille.jpg",0,0,160,200).attr({filter: f0 });
	s.image("../images/jolie_fille.jpg",160,0,160,200).attr({filter: f1});
	s.image("../images/jolie_fille.jpg",320,0,160,200).attr({filter: f2});
	s.image("../images/jolie_fille.jpg",480,0,160,200).attr({filter: f3 });
	s.image("../images/jolie_fille.jpg",640,0,160,200).attr({filter: f4 });

La valeur de référence est 1 ; si argument inférieur à 1 alors image assombrie (avec 0 : noir absolu) ; si argument est supérieur à 1 alors image éclaircie.

Contraste : contrast

Exemple

Le script

	var s = Snap("#zone4") ;
	// définition de 5 filtres de contraste
	var f0 = s.filter(Snap.filter.contrast(0));
	var f1 = s.filter(Snap.filter.contrast(.5));
	var f2 = s.filter(Snap.filter.contrast(1)) ;
	var f3 = s.filter(Snap.filter.contrast(2)) ;
	var f4 = s.filter(Snap.filter.contrast(3)) ;
	
	// application des filtres à une image
	s.image("../images/jolie_fille.jpg",0,0,160,200).attr({filter: f0 });
	s.image("../images/jolie_fille.jpg",160,0,160,200).attr({filter: f1});
	s.image("../images/jolie_fille.jpg",320,0,160,200).attr({filter: f2});
	s.image("../images/jolie_fille.jpg",480,0,160,200).attr({filter: f3 });
	s.image("../images/jolie_fille.jpg",640,0,160,200).attr({filter: f4 });

La valeur de référence est 1 ; si argument supérieur à 1 alors image plus contrastée ; si argument est égal à 0 alors affichage d'une zone grisée. Si le paramètre compris entre 1 et 0 alors perte de contraste.

Commandes : sepia, invert, grayscale

Exemple

Le script

	var s = Snap("#zone5") ;
	// 2 filtres avec  commande sepia, 2 avec commande invert et 2 avec comme grayscale (nuance de gris).
	var f0 = s.filter(Snap.filter.sepia(0));
	var f1 = s.filter(Snap.filter.sepia(1));
	var f2 = s.filter(Snap.filter.invert(0)) ;
	var f3 = s.filter(Snap.filter.invert(1)) ;
	var f4 = s.filter(Snap.filter.grayscale(1)) ;
	var f5 = s.filter(Snap.filter.grayscale(0.5)) ;
	// application des filtres à une image
	s.image("../images/jolie_fille.jpg",0,0,160,200).attr({filter: f0 });
	s.image("../images/jolie_fille.jpg",160,0,160,200).attr({filter: f1});
	s.image("../images/jolie_fille.jpg",320,0,160,200).attr({filter: f2});
	s.image("../images/jolie_fille.jpg",480,0,160,200).attr({filter: f3 });
	s.image("../images/jolie_fille.jpg",640,0,160,200).attr({filter: f4 });
	s.image("../images/jolie_fille.jpg",800,0,160,200).attr({filter: f5 });

Effet sépia : si paramètre vaut 1 alors sépia total ; si paramètre vaut 0 alors l'image filtrée correspond à celle d'origine.

Effet invert : l'argument ne peut prendre que deux valeurs : 1(négatif) ou 0 (image d'origine).

Effet grayscale (nuance de gris) : si le paramètre est 1 alors image en noir et blanc ; si paramètre vaut 0 alors aucun effet.

Ombrage d'une forme : shadow

Exemple

Remarquez que le canevas SVG est ombré ainsi que le cercle. Par contre le carré ne l'est pas.

Code CSS & HTML

.ombrage {box-shadow : 5px 5px 5px gray ; } ... <svg viewBox ="0 0 600 400" width ="80%" height ="auto" id ="zone6" class ="ombrage"> </svg> ...

Le script

	var s = Snap("#zone6") ;
	var f = s.filter(Snap.filter.shadow(10, 10, .5));
	// définition d'un filtre SVG : ombrage
	var carre = s.rect(0,0,100,100).attr({fill : "olive", class : "ombrage"}); 
    var cercle = s.circle(300, 200, 100).attr({fill : "navy", filter: f  });

On applique la propriété box-shadow (via la classe "ombrage") à la balise SVG et à une forme SVG (le carré).
On applique le filtre SVG identifié "f" à une autre forme SVG (le cercle).
Or si la balise SVG est bien ombrée ce n'est pas le cas du carré et c'est logique. La propriété box-shadow ne peut s'appliquer qu'à un élément HTML (comme la balise SVG) et jamais à un objet SVG d'où l'intérêt de la commande shadow

Passons au chapitre suivantSuite !
Retour menu