Snap SVG : les filtres

Comme vous l'avez vu dans une page précédente, la définition de filtres en SVG est un peu lourde ... Avec Snap SVG c'est beaucoup plus simple, aussi simple qu'en CSS3.

blur: floutage
sepia : jaunissement pour vieillir une image
grayscale : nuance de gris (image en noir et blanc)
saturate : saturation des couleurs
huerotate : rotation dans le cercle chromatique
invert : inversion des couleurs (pour obtenir un "négatif")
contrast: augmenter ou diminuer le contraste
brigtness : luminosité
shadow : ombrage

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

Dans tous les exemples qui suivent le code HTML se résume à la balise SVG. Instruction qui ne présente aucune difficulté. Donc je ne vous communique que le script (sans les balises début & fin SCRIPT).

Le floutage : commande 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 : commande 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é : commande 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 : commande 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.

Autres 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

Le canevas SVG ainsi que les deux éléments SVG sont ombrés.

Code HTML

	...
	<svg viewBox ="0 0 600 400"  width ="80%" id ="zone6" 
		style ="box-shadow : 5px 5px 5px gray ;" > </svg>
	...

Le script

var s = Snap("#zone6") ;
var ombre = 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", filter : ombre}); 
var cercle = s.circle(300, 200, 100).attr({fill : "navy", filter: ombre });

Le canevas SVG (élément HTML est ombré via la propriété box-shadow) tandis que les éléments SVG sont ombrés via un filtre défini par Snap SVG.
Trois paramètres pour la propriété shadow : dx, dy, opacity.

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Snap SVG : les filtres

Le floutage : commande blur

Exemple

Le script correspondant

Rotation sur le cercle chromatique : commande hueRotate

Exemple

Le script

Luminosité : commande brigthness

Exemple

Le script

Contraste : commande contrast

Exemple

Le script

Autres commandes : sepia, invert, grayscale

Exemple

Le script

Ombrage d'une forme : shadow

Exemple

Code HTML

Le script