Les filtres de convolution

Les filtres de convolution permettent d’appliquer sur des images divers effets très utiles comme le floutage, l’embossage, la détection des contours ou le rehaussement des détails.

Un peu de théorie

Une convolution est un traitement d'une matrice par une autre appelée matrice de convolution ou « noyau » (kernel).

Le filtre étudie successivement chacun des pixels de l'image. Pour chaque pixel appelé « pixel initial », il multiplie la valeur de ce pixel et de chacun des 8 pixels qui l'entourent par la valeur correspondante dans le noyau. Il additionne l'ensemble des résultats et le pixel initial prend alors la valeur du résultat final.

Le noyau (valeur de l'attribut kernelMatrix est une matrice de 3 par 3.

J'avoue que je ne suis pas très à l'aise pour expliquer la théorie mathématique des filtres de convolution. Je vous renvoie à un excellent article trouvé sur la toile ; il explique les filtres de convolution pour le logiciel Gimp. Mais le discours est parfaitement transposable pour le format SVG. Théorie des matrices de convolution

Exemples de filtres de convolution

Le code SVG correspondant (extraits)

<svg width ="100%" height ="100%" viewBox ="0 0 900 220" > <defs> <filter id="contraster"> <feConvolveMatrix kernelMatrix ="0 -1 0 -1 5 -1 0 -1 0" /> </filter> <filter id="flou"> <feConvolveMatrix kernelMatrix ="1 1 1 1 1 1 1 1 1" /> </filter> <filter id="rehausse"> <feConvolveMatrix kernelMatrix ="-1 -1 -1 -1 9 -1 -1 -1 -1" /> </filter> <filter id="repoussage"> <feConvolveMatrix kernelMatrix ="-2 -1 0 -1 1 1 0 1 2" /> </filter> <filter id="detecter"> <feConvolveMatrix preserveAlpha = "true" kernelMatrix ="-1 -1 -1 -1 8 -1 -1 -1 -1" /> </filter> </defs> <image xlink:href ="../images/jolie_fille.jpg" width="160" height="200" x="0" y ="0" filter ="url(#contraster)"/> <image ... filter ="url(#flou)"/> <image ... filter ="url(#rehausse)"/> <image ... filter ="url(#repoussage)"/> <image ... filter ="url(#detecter)"/> </svg>

Commentaire

On définit cinq filtres dans le conteneur defs

Attention notez que pour ce dernier filtre, outre l'attribut kernelMatrix il y a l'attribut preserveAlpha avec la valeur true. Cela indique que le filtre de convolution ne s'applique pas à la couche Alpha (opacité)

On insère dans le canevas cinq fois la même image matricielle et pour chaque insertion on applique un des filtres. Retour menu