Dans la troisième partie de la série, vous apprendrez comment fonctionne feComponentTransfer et comment vous pouvez postériser des images à l'aide de ce puissant filtre SVG primitif.

La série d'articles proposée, "SVG Filtering Effects", par Sara Soueidan, développeur d'interface UI / UX indépendant et auteur de nombreux articles techniques basés au Liban, se concentre sur le travail des filtres SVG et se compose des articles suivants:

Effets de filtrage SVG

1. Effets de filtrage SVG. Partie 1. Filtres SVG 101
2. Effets de filtrage SVG. Partie 2. Décrire le texte avec feMorphology
3. Effets de filtrage SVG. Partie 3. Effet de postérisation d'image à l'aide de feComponentTransfer
4. Effets de filtre SVG: Images bichromiques avec feComponentTransfer .
5. Effets de filtre SVG: conformité du texte à la texture de la surface avec feDisplacementMap

Cet article suppose que vous connaissez déjà les bases des filtres SVG ou que vous avez lu le premier article de cette série - "Filtres SVG 101". Si vous ne l'avez pas encore fait, n'hésitez pas à consacrer quelques minutes à remplir votre base de connaissances.

feComponentTransfer est l' une des primitives de filtre SVG les plus puissantes. Cela nous donne le contrôle sur les canaux RGBA individuels de notre source graphique, nous permettant de créer des effets comme Photoshop en SVG. Dans cet article, qui est la première partie de l'article sur feComponentTransfer , nous allons nous familiariser avec cette primitive et voir comment elle peut être utilisée pour postériser des images.

La postérisation ou le grossissement d'une image implique la conversion d'une transition de couleur continue en plusieurs gammes de moins de couleurs, avec des transitions nettes d'une couleur à l'autre. Cela a été initialement fait en utilisant des processus photographiques pour créer des affiches. - Wikipédia .

La postérisation se produit dans toute l'image, mais est plus évidente dans le domaine d'un changement de couleur subtil.

Fig_1. Exemple de photographie au format JPEG (couleur 24 bits ou 16,7 millions de couleurs) avant postérisation, contrastant avec le résultat de son économie au format GIF (256 couleurs). (Source: Wikipedia)

Dans cet article, nous utiliserons feComponentTransfer pour réduire le nombre de couleurs dans l'image, ce qui, à son tour, créera un bel effet d'affiche, similaire à ce que nous voyons dans les conceptions d'affiches commerciales ou graphiques.

Fig_2. L'application de l'effet de postérisation à l'image de gauche avec feComponentTransfer réduit le nombre de couleurs de cette image (à droite).

Mais d'abord, considérez les bases techniques ...

FeComponentTransfer en un coup d'œil

La primitive feComponentTransfer vous permet de modifier chacun des composants R , G , B et A présents dans un pixel. En d'autres termes, feComponentTransfer vous permet de manipuler indépendamment chaque canal de couleur de la même manière que le canal alpha à l'entrée graphique. Il vous permet de contrôler avec précision le réglage de la luminosité, le réglage du contraste, la balance des couleurs ou le réglage du seuil.

Les composants RGBA sont modifiés en exécutant les fonctions de transfert de ces composants. Pour cela, chaque composant a son propre élément appelé élément de fonction de transfert . Tout au long de l'article, je ferai référence à ces éléments comme des « éléments composants » - c'est-à-dire Éléments liés aux composants RGBA individuels. Ces éléments sont imbriqués dans feComponentTransfer . Donc feComponentTransfer ne fait que placer des éléments de composants RVB individuels. Les éléments du composant RGBA sont: feFuncR , feFuncG , feFuncB et feFuncA .

L'attribut type est utilisé dans l'élément composant pour déterminer le type de fonction que vous souhaitez utiliser pour modifier ce composant. Il existe actuellement cinq types de fonctions: identité , table , discrète , linéaire et gamma . Ces types de fonctions sont utilisés pour modifier les composants de la source graphique R / G / B / A. Nous allons examiner la plupart d'entre eux dans cette série et voir comment ils peuvent être utilisés.

<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>"> 

Pour chaque type de fonction, il existe un ou plusieurs attributs qui vous permettent de spécifier des informations supplémentaires sur la fonction utilisée. Par exemple, une fonction linéaire a l'attribut pente , qui est utilisé pour indiquer la pente de la fonction linéaire qui sera utilisée pour changer le composant auquel elle est appliquée.

Vous pouvez modifier un ou plusieurs composants en même temps . Cela signifie que feComponentTransfer peut contenir un, deux, trois ou tous les éléments composants en même temps. Vous pouvez également modifier les canaux indépendamment les uns des autres, en appliquant différentes fonctions à chaque élément composant.

La possibilité d'utiliser diverses fonctions sur différents éléments du composant signifie que vous avez un très grand contrôle sur les couleurs de la source graphique au niveau de pixel le plus bas. Par exemple, vous pouvez modifier les canaux rouge et bleu en les associant à deux nouvelles couleurs, et laisser le vert inchangé ou seulement augmenter son intensité. Cette gestion des composants de bas niveau signifie que vous pouvez appliquer des fonctionnalités telles que Photoshop aux images de votre navigateur à l'aide de quelques lignes de code. Je ne sais pas pour vous, mais le designer (novice) en moi pense que c'est super intéressant!

Exemple: utilisation d'un composant alpha pour réduire l'opacité d'un objet

Un exemple simple et concret est l'utilisation de l'élément composant feFuncA pour réduire l'opacité de la source graphique. Dans le premier article de cette série, nous avons vu comment feColorMatrix peut être utilisé pour réduire l'opacité d'un élément en modifiant la valeur du canal alpha dans la matrice de couleur. Personnellement, je préfère utiliser feComponentTransfer pour ce genre de travail.

L'application du filtre suivant à une source réduit l'opacité de cette source à 0,5:

 <filter id="redOp"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5"></feFuncA> </feComponentTransfer> </filter> 

Nous avons mentionné ci-dessus que nous avons cinq fonctions différentes que nous pouvons utiliser pour contrôler les composants RGBA. Le type de la fonction table fonctionne en faisant correspondre les valeurs du composant, qui est le canal alpha dans notre exemple, avec la série de valeurs fournies par l'attribut tableValues .

Alors qu'est-ce que cela signifie?

Le canal alpha d'un élément se situe généralement dans la plage [0, 1]. En utilisant la fonction de table et en fournissant deux valeurs: 0 et 0,5, nous demandons essentiellement au navigateur de mapper la plage alpha [0, 1] à la nouvelle plage: [0, 0,5]. Dans ce cas, l'opacité est réduite de moitié.

Nous considérerons un exemple plus détaillé de la fonction de table dans le prochain article. Maintenant, je veux faire la lumière sur le type de fonction discrète . Voyons donc comment cela fonctionne et ce que nous pouvons en faire.

Effet de postérisation d'image: réduction du nombre de couleurs dans une image à l'aide de la fonction discrète

La fonction discrète est utilisée pour réduire le nombre de couleurs dans une image ou un composant si un seul composant est utilisé. La réduction du nombre de couleurs dans l'image signifie qu'au lieu d'un changement de couleur linéaire et lisse, vous verrez des transitions de couleurs plus nettes qui donnent à l'image des rayures ou des grappes de couleurs, ce qui conduit à un effet qui ressemble à une affiche.

Fig_3. L'image de droite est une copie de l'image de gauche, à laquelle une fonction discrète a été appliquée pour réduire le nombre de couleurs qu'elle contient à 5 par composant.

Dans la figure ci-dessus, vous pouvez voir qu'au lieu de transitions douces, les couleurs changent considérablement, créant des barres de couleur et des grappes, et l'image semble plus «postérisée».

Personnellement, la fonction discrète me rappelle la fonction de synchronisation steps () en CSS. Par rapport à une fonction linéaire, une fonction pas à pas se déplace d'une valeur à une autre, plutôt que de se déplacer linéairement entre elles.

Comme la fonction table , la fonction discrète prend une série de valeurs comme spécifié dans l'attribut tableValues . La fonction discrète diffère du tableau par la façon dont elle utilise ces valeurs.

En utilisant tableValues , vous fournissez au navigateur une liste finie de valeurs avec lesquelles il doit mapper le composant couleur. Et puisque vous fournissez une liste finie de valeurs, vous obtenez un nombre fini de couleurs, créant ainsi des barres de couleur et des grappes qui seraient autrement des transitions de couleurs linéaires.

Cette fonction est déterminée par les étapes de fonction spécifiées dans l'attribut tableValues , qui fournit une liste de n valeurs pour identifier la fonction d' étape de n étapes. - Spécification des filtres SVG

Voyons ce que cela signifie en termes simples. Supposons que nous ayons le fragment de code suivant:

 <svg width="500" height="335" viewBox="0 0 500 335"> <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 .5 1" /> </feComponentTransfer> </filter> <image xlink:href="..."cwidth="100%" height="100%" x="0" y="0" filter="url(#posterize)"></image> </svg> 

Dans le fragment de code ci-dessus, nous utilisons une fonction discrète pour changer le canal rouge dans la source d'image. Nous fournissons 3 valeurs différentes auxquelles le navigateur doit correspondre aux valeurs rouges. Dans le filtre SVG, les valeurs des composants sont représentées sous forme de fractions dans la plage [0, 1]. Cela signifie que la valeur de la composante rouge dans n'importe quel pixel peut être 0 (0% rouge / complètement noir), 1 (100% rouge) ou n'importe quelle valeur (nuance de rouge) entre eux. Il en va de même pour les canaux vert, bleu et alpha.

Pour n'importe quel nombre de ( n ) valeurs que vous entrez, le navigateur crée n plages. Plus précisément, il divisera [0, 1] en n plages. Ensuite, il affichera les valeurs de couleur qui se trouvent dans ces plages par n valeurs. Appliquez cette logique à notre extrait de code:

• le navigateur voit trois valeurs rouges différentes dans tableValues ;
• il divise les valeurs rouges dans la plage [0, 1] en trois parties égales. Nos trois gammes sont donc les suivantes:
  
  • [0, 0,33]
  • [0,33, 0,66]
  • [0,66, 1]
• En outre, le navigateur vérifie la valeur rouge de chaque pixel de l'image et détermine dans quelle plage il se trouve;
• puis toutes les valeurs rouges d'une plage sont affichées avec la nouvelle valeur mappée à cette plage à partir de celles que vous avez fournies. L'affichage est le suivant:
  
  • les couleurs dans la plage [0, 0,33] sont affichées comme 0;
  • les couleurs dans la plage [0,33, 0,66] sont affichées comme 0,5;
  • les couleurs dans la plage [0,66, 1] sont affichées comme 1.

Vous pouvez également considérer ce processus comme l'activation ou la désactivation des tons de couleur. Lorsque vous fournissez des valeurs discrètes pour la couleur, vous dites au navigateur que seules ces valeurs seront incluses et si le pixel contient une valeur qui n'est pas égale à l'une d'entre elles, elle doit être désactivée et remplacée par l'une des valeurs autorisées. Ainsi, par exemple, la valeur de couleur de 0,8 est considérée comme désactivée et sera remplacée par 1 (car cette valeur se situe dans la troisième plage).

Ce qui suit est une illustration dessinée à la main de cet écran couleur, que j'ai peint quand j'y ai pensé. Peut-être vous serez utile.

Fig_4. Mappage des valeurs de couleur pour varier la couleur.

Au moment où le navigateur parcourt tous les pixels de l'image, vous remplacerez un grand nombre de valeurs rouges par le petit nombre que vous avez sélectionné dans tableValues , remplaçant ainsi les changements de couleur lisses par des transitions nettes, et l'image semble être faite à partir de clusters ou rayures de couleur.

Ce qui suit est une démonstration de l'application de l'extrait de code ci-dessus à une image avec beaucoup de rouge. En limitant le nombre de rouges en pixels d'une image et en mettant à zéro les rouges dans certains d'entre eux, l'image présente une diminution globale notable du rouge, en particulier au bas de l'image:

Changer le nombre de valeurs discrètes et / ou changer les valeurs elles-mêmes changera le résultat global. Vous ne voudrez peut-être pas donner la valeur de couleur 0 pour vous débarrasser de certaines zones noires de l'image. Par exemple, dans l'image du ciel ci-dessus, probablement, il ne devrait pas y avoir de grappes ou de rayures noires dans la version de la postérisation de l'image, car c'est toujours une image du ciel. Pour ce faire, vous devez avoir plus de deux ou trois couleurs, sinon l'image perdra la majeure partie de son image.

Pour créer cet effet, j'ai limité le nombre de couleurs RVB à cinq, en commençant par la valeur la plus basse de 0,25:

 <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncG type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncB type="discrete" tableValues=".25 .4 .5 .75 1" /> </feComponentTransfer> </filter> 

Vous pouvez jouer avec l'effet dans la démo suivante:

Conclusion

J'espère que cet article a aidé à clarifier un peu feComponentTransfer et vous a montré à quel point les contrôles de pixels et de couleurs des composants peuvent être puissants.

Dans le prochain article, nous examinerons deux types plus puissants de la fonction de transfert feComponentTransfer . Nous allons voir comment vous pouvez simuler l'effet d'une image Photoshop à deux tons et comment vous pouvez contrôler la luminosité, le contraste et l'intensité des couleurs d'une image à l'aide de feComponentTransfer . Reste avec nous.