Les filtres de couleur

La primitive matrice de couleur permet de recalculer la valeur de chaque pixel de l’image (comme pour la matrice de convolution)
La nouvelle valeur du pixel est calculée par rapport aux quatre composantes: rouge, vert, bleu, canal alpha (transparence).
La primitive feColorMatrix a deux attributs type et values.
L'attribut type peut prendre les valeurs matrix, saturate, hueRotate, luminanceToAlpha.

Valeur de l'attribut type est hueRotate

Commençons par le type hueRotate car c'est le plus simple.

Le code SVG correspondant (extraits)

<svg width ="100%" height ="100%" viewBox ="0 0 800 200" > <defs> <filter id="rotation0"> <feColorMatrix type= "hueRotate" values ="0" /> </filter> <filter id="rotation90"> <feColorMatrix type= "hueRotate" values ="90" /> </filter> <filter id="rotation180"> <feColorMatrix type= "hueRotate" values ="180" /> </filter> <filter id="rotation270"> <feColorMatrix type= "hueRotate" values ="270" /> </filter> <filter id="rotation360"> <feColorMatrix type= "hueRotate" values ="360" /> </filter> </defs> <image xlink:href ="../images/jolie_fille.jpg" width="160" height="200" x="0" y ="0" filter ="url(#rotation0)"/> <image ... filter ="url(#rotation90)"/> <image ... filter ="url(#rotation180)"/> <image ... filter ="url(#rotation270)"/> <image ... filter="url(#rotation360)"/> </svg>

Commentaire

On définit différents filtres SVG de type hueRotate.
Notez que les valeurs de l'attribut values sont comprises entre 0 et 360 (degrés).
Il s’agit d’une rotation sur le cercle chromatique. Attention une rotation de 360° équivaut à une rotation de 0°.
Une rotation de 90 verdit l'image, une rotation de 180 bleuit la photo et une rotation de 270 rougit l'image.
Une rotation de 360 équivaut à une rotation de 0 et donc n'a indicidence sur l'image.

On applique ces différents filtres à chacune des insertions de la même image matricielle.

Valeur de l'attribut type est saturate

Un filtre de couleur avec l'attribut type valant saturate est aussi très simple.

Le code SVG correspondant

<svg width ="100%" height ="100%" viewBox ="0 0 900 200"> <defs> <filter id="saturation0"> <feColorMatrix type= "saturate" values ="0" /> </filter> <filter id="saturation2"> <feColorMatrix type= "saturate" values ="2" /> </filter> <filter id="saturation1"> <feColorMatrix type= "saturate" values ="1" /> </filter> <filter id="saturation4"> <feColorMatrix type= "saturate" values ="4" /> </filter> <filter id="saturation6"> <feColorMatrix type= "saturate" values ="6" /> </filter> </defs> <image xlink:href ="../images/jolie_fille.jpg" width="160" height="200" x="0" y ="0" filter ="url(#saturation0)"/> <image ... filter ="url(#saturation2)"/> <image ... filter ="url(#saturation1)"/> <image ... filter ="url(#saturation4)"/> <image ... filter ="url(#saturation6)"/> </svg>

Commentaire

On définit différents filtres de type saturate.

La saturation permet d’abaisser ou augmenter l’intensité des couleurs d’une image.
Si l'attribut type vaut saturate alors l'attribut values prend comme valeur un entier positif.
Si la valeur est 0 alors l'image est en nuances de gris et si la valeur est 1 alors l'image filtrée est identique à l'original. Si la valeur est supérieure à 1 il y a saturation.

On applique ces différents filtres aux différentes insertions dans le canevas SVG de la même photo.

Valeur de l'attribut type est Matrix

On arrive à des choses un peu plus compliquées car il faut créer une matrice 4 * 5 !

Le code correspondant

<svg width ="100%" height ="100%" viewBox ="0 0 900 200"> <defs> <filter id="moins_rouge"> <feColorMatrix type= "Matrix" values = "1 0 0 0 -0.3 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <filter id="moins_vert"> <feColorMatrix type= "Matrix" values = "1 0 0 0 0 0 1 0 0 -0.3 0 0 1 0 0 0 0 0 1 0" /> </filter> <filter id="moins_bleu"> <feColorMatrix type= "Matrix" values = "1 0 0 0 0 0 1 0 0 0 0 0 1 0 -0.3 0 0 0 1 0" /> </filter> </defs> <image xlink:href ="../images/jolie_fille.jpg" width="160" height="200" x="0" y ="0" filter ="url(#moins_rouge)"/> <image ... filter ="url(#moins_vert)"/> <image ... filter ="url(#moins_bleu)"/> </svg>

Commentaire

Trois filtres définis :

Retour menu