Guillaume Duverger - Développement & Graphisme

Les filtres SVG c'est quoi ?

Avant de présenter les filtres SVG, sachez que la compatibilité avec les navigateurs est très bonne. Vous pouvez donc les utiliser sans restriction, bien qu'il existe certains bugs selon les filtres.

Les filtres SVG permettent de changer la couleur ou l'apparence d'un élément graphique avec du code. L'avantage majeur par rapport aux filtres CSS est de pouvoir contrôler les canaux RGBA.

L'élément filter :

Il s'agit de l'élément qui va nous permettre de créer des filtres, en particulier des effets de filtre (ou primitives de filtre).

Les attributs relatifs à l'élément filter sont les suivants :

• x : décalage sur l'axe des abscisses.
• y : décalage sur l'axe des ordonnées.
• width : largeur dans le système des coordonnées.
• height : hauteur dans le système des coordonnées.
• filterRes : obsolète.
• filterUnits : définit le système de coordonnées pour les attributs x, y, width et height.
  • userSpaceOnUse.
  • objectBoundingBox (par défaut).
• primitiveUnits : spécifie le système de coordonnées pour les valeurs de longueur dans les primitives de filtre ainsi que pour les attributs qui définissent la sous-région de primitive de filtre.
  • userSpaceOnUse (par défaut).
  • objectBoundingBox.
• href : définit un lien vers une ressource en tant qu'URL de référence.

Un filtre SVG (dans son écriture la plus simple) se présente sous cette forme :

<svg>
<filter id="votreid">
...
</filter>
</svg>

💡 Dans la plupart des cas, les filtres se déclarent à l’intérieur de l'élement SVG defs dans lequel il est possible d'appliquer des styles CSS (voir plus bas).

Autant la structure d'un document SVG est simple à appréhender, autant les filtres se révèlent beaucoup plus complexes.

Exemple simple :

Ci-dessous, nous allons appliquer un simple filtre de flou avec l'élément filter sur un cercle SVG :

	
	
<svg width="600" height="200">
<defs>
<filter id="votreid" y="-5" height="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" y="0"></feGaussianBlur>
</filter>
</defs>
<circle cx="300" cy="100" r="50" style="fill:#7A5FFF;filter:url(#votreid)"/>
</svg>

Même exemple sur une image :

	
	
<svg width="420" height="279">
<defs>
<filter id="votreid" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur>
</filter>
</defs>
<image x="0" y="0" width="100%" height="100%" filter="url(#votreid)" href="image.jpg"/>
</svg>

💡 Il existe une autre façon d'appliquer un filtre SVG sur un élément HTML : l'utilisation de CSS (avec la propriété filter). L'avantage est de pouvoir cibler plusieurs éléments avec le même filtre.

	
	
.votreclass{

filter:url(#votreid)

}

	
	
<svg width="0" height="0">
<filter id="votreid">
<feGaussianBlur stdDeviation="3"/>
</filter>
</svg>
<img class=votreclass src="image.jpg">

💡 Nous avons utilisé pour créer ce filtre la primitive de filtre feGaussianBlur ainsi que l'attribut stdDeviation. Nous allons voir dans ce cours les différents effets de filtres en SVG, les attributs nécessaires selon le type de filtre au travers de nombreux exemples.

Les primitives de filtre

Pour réaliser un filtre SVG, il est nécessaire de renseigner à l'intérieur dudit filtre les primitives de filtre.

Entrée et sortie des primitives de filtre :

Avant de détailler chaque primitive, il nous faut parler des entrées et sorties puisque celles-ci seront forcément utilisées dans la présentation des différents effets de filtre.

En effet, afin de créer un filtre SVG, il faut une entrée (input) et une sortie (output). L'entrée est définie via l'attribut in (vous pouvez d'ailleurs voir cet attribut dans le tout premier exemple du cours) que ce soit sur le graphique d'une forme, le canal apha d'une forme ou encore sur une sortie de filtre.

Reprenons justement le premier exemple du cours où l'on applique un filtre de flou sur une forme :

	
	
<svg width="600" height="200">
<defs>
<filter id="votreid" y="-5" height="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" y="0"></feGaussianBlur>
</filter>
</defs>
<circle cx="300" cy="100" r="50" style="fill:#7A5FFF;filter:url(#votreid)"/>
</svg>

Vous pouvez voir que l'attribut in prend la valeur SourceGraphic. Pour information, voici les valeurs de cet attribut d'entrée de filtre :

• SourceGraphic : représente le graphique d'origine qui fait référence au filtre
• SourceAlpha : représente le canal alpha uniquement du graphique d'origine qui fait référence au filtre
• BackgroundImage : représente un instantané d'image du canevas sous la région de filtre au moment où l'élément de filtre a été appelé
• BackgroundAlpha : représente le canal alpha d'un instantané d'image du canevas sous la région de filtre au moment où l'élément de filtre a été appelé
• FillPaint : représente la valeur de la propriété fill sur l'élément cible pour l'effet de filtre et est conceptuellement infinie
• StrokePaint : représente la valeur de la propriété stroke sur l'élément cible pour l'effet de filtre et est également conceptuellement infini
• Une référence de primitive de filtre : nom donné à la sortie d'une primitive de filtre précédente dans le même filtre. Vous pouvez mettre le terme que vous souhaitez.

Concernant la sortie, on utilisera l'attribut result (autrement dit le résultat de l'opération) et prend comme valeur un nom que vous choisissez.

💡 A retenir : une entrée est définie via l'attribut in, tandis que la sortie est définie par l'attribut result. Par ailleurs, sachez qu'une sortie de filtre peut être utilisée comme entrée de filtre comme dans l'exemple ci-dessous :

Le code ci-dessous :

	
	
<svg width="600" height="200">
<defs>
<filter id="votreId">
<feOffset in="SourceGraphic" dy="5" result="resultat" />
<feGaussianBlur in="resultat" stdDeviation="3" /> 
</filter>
</defs>
<circle cx="200" cy="100" r="50" style="fill:#7A5FFF;"/>
<circle cx="400" cy="100" r="50" style="fill:#7A5FFF;filter:url(#votreId)"/>
</svg>

Détaillons maintenant les différents effets de filtre en SVG.

Les différents effets de filtre :

Tout d'abord, sachez que les effets de filtre sont préfixés avec fe-. Ci-dessous, la liste des filtres disponibles :

• feBlend : effet de filtre de mélange.
• feColorMatrix : effet de manipulation de la couleur.
• feComponentTransfer : effet de manipulation des quatre canaux de couleur séparément.
• feComposite : effet de combinaison de deux images d'entrée.
• feConvolveMatrix : effet de création d'effets graphiques.
• feDiffuseLighting : effet de diffusion de la lumière.
• feDisplacementMap : effet de déplacement ou de déformation de pixels.
• feFlood : effet de remplissage d'une région avec couleur et opacité.
• feGaussianBlur : effet de flou gaussien.
• feImage : permet d'insérer une image dans un filtre.
• feMerge : sert à empiler les résultats de différents effets de filtre.
• feMorphology : permet la dilatation ou la contraction d'une forme SVG.
• feOffset : décale l’image d’entrée.
• feSpecularLighting : produit une image qui contient la partie de réflexion spéculaire du calcul d'éclairage.
• feTile : permet de répéter horizontalement et verticalement une image en entrée.
• feTurbulence : permet de créer des motifs ou des textures.
• feDistantLight : définit une source de lumière distante.
• fePointLight : permet de créer un effet de lumière ponctuelle.
• feSpotLight : permet de créer un effet de projecteur.

#feBlend :

L'effet de filtre de mélange fournit cinq valeurs via l'attribut mode permettant de mélanger deux entrées (attributs in et in2) :

• normal (par défaut)
• multiply
• screen
• darken
• lighten

Ci-dessous, le code pour chaque mode :

	
	

/* mode=multiply */
<svg width="420" height="279">
<defs>
<filter id="multiply" x="0" y="0" width="420" height="279" filterUnits="userSpaceOnUse">
<feImage x="0" y="0" href="image.jpg" result="image1"/>
<feImage x="60" y="40" width="300" height="199" href="image.jpg" result="image2"/>
<feBlend mode="multiply" in="image1" in2="image2"/>
</filter>
</defs>
<use filter="url(#multiply)"/>
</svg>

/* mode=screen */
<svg width="420" height="279">
<defs>
<filter id="screen" x="0" y="0" width="420" height="279" filterUnits="userSpaceOnUse">
<feImage x="0" y="0" href="image.jpg" result="image1"/>
<feImage x="60" y="40" width="300" height="199" href="image.jpg" result="image2"/>
<feBlend mode="screen" in="image1" in2="image2"/>
</filter>
</defs>
<use filter="url(#screen)"/>
</svg>


/* mode=darken */
<svg width="420" height="279">
<defs>
<filter id="darken" x="0" y="0" width="420" height="279" filterUnits="userSpaceOnUse">
<feImage x="0" y="0" href="image.jpg" result="image1"/>
<feImage x="60" y="40" width="300" height="199" href="image.jpg" result="image2"/>
<feBlend mode="darken" in="image1" in2="image2"/>
</filter>
</defs>
<use filter="url(#darken)"/>
</svg>


/* mode=lighten */
<svg width="420" height="279">
<defs>
<filter id="lighten" x="0" y="0" width="420" height="279" filterUnits="userSpaceOnUse">
<feImage x="0" y="0" href="image.jpg" result="image1"/>
<feImage x="60" y="40" width="300" height="199" href="image.jpg" result="image2"/>
<feBlend mode="lighten" in="image1" in2="image2"/>
</filter>
</defs>
<use filter="url(#lighten)"/>
</svg>

💡 On peut d'ailleurs retrouver ces valeurs en CSS.

#feColorMatrix :

Le filtre de couleur de matrice donne la possibilité de manipuler la couleur (si vous utilisez Photoshop, cela pourrait vous aider à comprendre cet effet de filtre) en recalculant la valeur de chaque pixel de l’image.

La primitive de filtre feColorMatrix possède deux attributs : type et values.

L'attribut type peut prendre les effets prédéfinis suivants :

• hueRotate
• saturate
• matrix
• luminanceToAlpha

Exemple avec la valeur hueRotate :

Le code ci-dessous :

	
	

<svg height="" width="" viewBox="">
<defs>

<filter id="hueRotate90">
<feColorMatrix type="hueRotate" values="90"/>
</filter>
<filter id="hueRotate180">
<feColorMatrix type="hueRotate" values="180"/>
</filter>

<filter id="hueRotate270">
<feColorMatrix type="hueRotate" values="270"/>
</filter>

<filter id="hueRotate360">
<feColorMatrix type="hueRotate" values="360"/>
</filter>
</defs>

<image href="image.jpg" width="" height="" x="" y="" filter="url(#hueRotate90)"/>
<image href="image.jpg" width="" height="" x="" y="" filter="url(#hueRotate180)"/>
<image href="image.jpg" width="" height="" x="" y="" filter="url(#hueRotate270)"/>
<image href="image.jpg" width="" height="" x="" y="" filter="url(#hueRotate360)"/>

</svg>

💡 Les valeurs de l'attribut values sont comprises entre 0 et 360°. Il s’agit d’une rotation sur le cercle chromatique. Attention une rotation de 360° équivaut à une rotation de 0°.

Exemple avec la valeur saturate :

Le code ci-dessous :

	
	

<svg height="" width="" viewBox="">
<defs>

<filter id="saturation1">
<feColorMatrix type="saturate" values="0"/>
</filter>

<filter id="saturation2">
<feColorMatrix type="saturate" values="1"/>
</filter>

<filter id="saturation3">
<feColorMatrix type="saturate" values="2"/>
</filter>

<filter id="saturation4">
<feColorMatrix type="saturate" values="3"/>
</filter>
</defs>

<image href="image.jpg" width=""  height="" x="" y="" filter="url(#saturation1)"/>
<image href="image.jpg" width=""  height="" x="" y="" filter="url(#saturation2)"/>
<image href="image.jpg" width=""  height="" x="" y="" filter="url(#saturation3)"/>
<image href="image.jpg" width=""  height="" x="" y="" filter="url(#saturation4)"/>
</svg>

💡 La saturation permet d’abaisser ou augmenter l’intensité des couleurs d’une image.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.

Exemple avec la valeur matrix :

Le code ci-dessous :

	
	

<svg height="" width="" viewBox="">
<defs>

<filter id="normal">
<feColorMatrix type="Matrix" values="1 0 0 0 0
									 0 1 0 0 0
									 0 0 1 0 0
									 0 0 0 1 0"/>
</filter>
<filter id="rouge">
<feColorMatrix type="Matrix" values="1 0 0 0 -.3
										0 1 0 0 0
										0 0 1 0 0
										0 0 0 1 0" />
</filter>
<filter id="vert">
<feColorMatrix type="Matrix" values="1 0 0 0 0
										0 1 0 0 -.3
										0 0 1 0 0
										0 0 0 1 0" />
</filter>
<filter id="bleu">
<feColorMatrix type="Matrix" values="1 0 0 0 0
                                        0 1 0 0 0
                                        0 0 1 0 -.3
                                        0 0 0 1 0" />
</filter>
</defs>
<image href="image.jpg" width=""  height="" x="" y="" filter="url(#normal)"/>
<image href="image.jpg" width=""  height="" x="" y="" filter="url(#rouge)"/>
<image href="image.jpg" width=""  height="" x="" y="" filter="url(#vert)"/>
<image href="image.jpg" width=""  height="" x="" y="" filter="url(#bleu)"/>
</svg>

Exemple avec la valeur luminanceToAlpha :

💡 Il n'existe pas d'attribut values pour ce type de filtre.

Le code ci-dessous :

	
	
<svg height="" width="" viewBox="">
<defs>

<filter id="luminance">
<feColorMatrix type="luminanceToAlpha"/>
</filter>
</defs>
<image href="image.jpg" width="" height="" x="" y="" filter="url(#luminance)"/>
</svg>

#feComponentTransfer :

La primitive feComponentTransfer permet de manipuler chacun des quatre canaux de couleur (RGBA) séparément. Il permet aux opérations d'ajuster la luminosité, le contraste ou l'intensité (balance des couleurs) des couleurs. Il permet également le seuillage ou la segmentation d'image.

Par ailleurs, la primitive de filtre feComponentTransfer comprend les fonctions de transfert suivantes :

• Fonction feFuncR = rouge
• Fonction feFuncG = vert
• Fonction feFuncB = bleu
• Fonction feFuncA = alpha

💡 Vous pouvez inclure un ou plusieurs de ces canaux. Si toutefois, vous utilisez la même fonction plus d'une fois, la dernière des deux sera prise en compte.

Enfin, il existe cinq types possibles pour chacune des fonctions :

• identity (par défaut)
• table
• discrete
• linear
• gamma

Exemple avec la fonction table :

	
	
<svg width="420" height="279">
<defs>
<filter id="table">
<feComponentTransfer>
<feFuncB type="table" tableValues="0.0 0.6 0.8 1.0"/>
</feComponentTransfer>
</filter>
</defs>
<image href="image.jpg" width="420" height="279" filter="url(#table)"/>
</svg>

💡 Le type table fonctionne avec l'attribut tableValues auquel on ajoute des valeurs comprises entre 0 et 1. Dans l'exemple ci-dessus, on a modifié les valeurs du canal bleu via la fonction de transfert feFuncB.

Exemple avec la fonction discrete :

	
	
<svg width="420" height="279">
<defs>
<filter id="discrete">
<feComponentTransfer>
<feFuncB type="discrete" tableValues="0.0 0.6 0.8 1.0"/>
</feComponentTransfer>
</filter>
</defs>
<image href="image.jpg" width="420" height="279" filter="url(#discrete)"/>
</svg>

Exemple avec la fonction linear :

	
	
<svg width="420" height="279">
<defs>
<filter id="linear">
<feComponentTransfer>
<feFuncB type="linear" slope="1.5" intercept="0.2"/>
</feComponentTransfer>
</filter>
</defs>
<image href="image.jpg" width="420" height="279" filter="url(#linear)"/>
</svg>

💡 Le type discrete fonctionne avec les attributs slope et intercept.

Exemple avec la fonction gamma :

	
	
<svg width="420" height="279">
<defs>
<filter id="gamma">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="4" exponent="0.5" />
<feFuncG type="gamma" exponent="1.1" />
<feFuncB type="gamma" exponent="1.4" />
<feFuncA type="gamma" amplitude="1.4" exponent="1.0" offset="0.0" />
</feComponentTransfer>
</filter>
</defs>
<image href="image.jpg" width="420" height="279" filter="url(#gamma)"/>
</svg>

💡 Le type gamma fonctionne avec les attributs amplitude (par défaut = 1), exponent (par défaut = 1) et offset (par défaut = 0).

#feComposite :

La primitive feComposite permet de combiner deux images d'entrée de différentes manières. Les deux entrées sont spécifiées en utilisant les attributs in et in2. Toutes deux peuvent accepter l'une des valeurs de mot-clé pour l'entrée d'un bien comme le résultat d'une autre primitive de filtre à l'intérieur du même filtre.

La primitive feComposite fonctionne avec l'attribut operator qui possède six valeurs :

• over
• in
• out
• atop
• xor
• arithmetic : comprend les attributs k1, k2, k3 et k4

	
	
<svg>
<defs>	
<filter id="Over" x="0" y="0" width="" height="" filterUnits="userSpaceOnUse">
<feImage x="20" y="40" width="128" height="128" href="image.png" result="img1"/>
<feImage x="30" y="30" width="100" height="100" href="image.png" result="img2"/>
<feComposite operator="over" in="img1" in2="img2"/>
</filter>
</defs>
<use filter="url(#Over)"/>
</svg>
  
<svg>
<defs>	
<filter id="In" x="0" y="0" width="" height="" filterUnits="userSpaceOnUse">
<feImage x="20" y="40" width="128" height="128" href="image.png" result="img1"/>
<feImage x="30" y="30" width="100" height="100" href="image.png" result="img2"/>
<feComposite operator="in" in="img1" in2="img2"/>
</filter>
</defs>
<use filter="url(#In)"/>
</svg>
  
  
  
<svg>
<defs>	
<filter id="Out" x="0" y="0" width="" height="" filterUnits="userSpaceOnUse">
<feImage x="20" y="40" width="128" height="128" href=".image.png" result="img1"/>
<feImage x="30" y="30" width="100" height="100" href="image.png" result="img2"/>
<feComposite operator="out" in="img1" in2="img2"/>
</filter>
</defs>
<use filter="url(#Out)"/>
</svg>

<svg>
<defs>	
<filter id="Atop" x="0" y="0" width="" height="" filterUnits="userSpaceOnUse">
<feImage x="20" y="40" width="128" height="128" href="image.png" result="img1"/>
<feImage x="30" y="30" width="100" height="100" href="image.png" result="img2"/>
<feComposite operator="atop" in="img1" in2="img2"/>
</filter>
</defs>
<use filter="url(#Atop)"/>
</svg>
  
<svg>
<defs>	
<filter id="Xor" x="0" y="0" width="" height="" filterUnits="userSpaceOnUse">
<feImage x="20" y="40" width="128" height="128" href="image.png" result="img1"/>
<feImage x="30" y="30" width="100" height="100" href="image.png" result="img2"/>
<feComposite operator="xor" in="img1" in2="img2"/>
</filter>
</defs>
<use filter="url(#Xor)"/>
</svg>
 
<svg>
<defs>	
<filter id="Arithmetic" x="0" y="0" width="" height="" filterUnits="userSpaceOnUse">
<feImage x="20" y="40" width="128" height="128" href="image.png" result="img1"/>
<feImage x="30" y="30" width="100" height="100" href="image.png" result="img2"/>
<feComposite operator="arithmetic" in="img1" in2="img2" k1="0" k2=".2" k3=".5" k4="0"/>
</filter>
</defs>
<use filter="url(#Arithmetic)"/>
</svg>

#feConvolveMatrix :

La primitive feConvolveMatrix permet de réaliser des effets graphiques.

Les attributs sont :

• in : détermine le type d'entrée.
• order : définit la taille de l'attribut kernelMatrix. Un ordre de "3 3" définit une matrice 3 × 3.
• kernelMatrix : liste de nombres qui constituent la matrice du noyau pour cette primitive de filtre.
• divisor : la valeur de cet attribut va diviser le nombre de l'attribut kernelMatrix afin d'obtenir la couleur finale.
• bias : décale la plage du filtre (si non spécifié = 0).
• targetX : détermine le positionnement dans X de la matrice de convolution par rapport à un pixel cible donné dans l'image d'entrée.
• targetY : détermine le positionnement dans Y de la matrice de convolution par rapport à un pixel cible donné dans l'image d'entrée.
• edgeMode : détermine comment étendre l'image d'entrée.
  • duplicate (si l'attribut n'est pas spécifié, il prend cette valeur)
  • wrap
  • none
• kernelUnitLength : détermine la distance prévue.
• preserveAlpha : indique comment l'effet traite la transparence alpha. Par défaut, cet attribut prend la valeur false, ce qui signifie que l'effet couvre tous les canaux (RGBA). Si la valeur est true, alors l'attribut ne gère pas la transparence.

	
	
<svg>
<defs>	
<filter id="convolution"> 
<feConvolveMatrix order="3" kernelMatrix="
										  -1 -1 -1 
										  -1 9 -1 
										  -1 -1 -1"/>

</filter>
</defs>	
<image filter="url(#convolution)" x="0" y="0" height="100%" width="100%" href="image.jpg"/> 

</svg>

#feDiffuseLighting :

La primitive feDiffuseLighting est utilisée pour montrer la tridimensionnalité d'un objet, pour éclaircir un objet, ou pour éclairer une partie spécifique d'un objet ou d'un arrière-plan.

Cette primitive comprend quatre attributs :

• in : détermine le type d'entrée.
• surfaceScale : détermine la hauteur de la surface pour une valeur alpha de 1 (par défaut).
• diffuseConstant : détermine la valeur RVB finale d'un pixel donné (valeur négative non acceptée).
• kernelUnitLength : Indique la distance prévue

La couleur de lumière est spécifiée par la propriété lighting-color.

Un exemple ci-dessous :

Le code ci-dessous :

	
	
<svg width="220" height="220">
<defs>
<filter id="lumiere">
<feDiffuseLighting in="SourceGraphic" result="lumiere" lighting-color="white">
<fePointLight x="150" y="60" z="30"/>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="lumiere" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>
</defs>
<circle cx="110" cy="110" r="100" fill="#7A5FFF" filter="url(#lumiere)"/>
</svg>

Nous expliquerons la présence de la primitive de filtre fePointLight plus bas.

#feDisplacementMap :

Outre les attributs in (c'est l'image qui est déplacée) et in2 (c'est l'image qui va servir à déplacer l'image définie dans le précédent attribut), ce primitive de filtre comprend les attributs suivants :

• scale : détermine la distance nécessaire pour déplacer les pixels de l'image via l'attribut in. 0 est la valeur par défaut.
• xChannelSelector : détermine le type de canal utilisé via l'attribut in2 pour déplacer les pixels de l'image contenue dans l'attribut in le long de l'axe des x. La valeur par défaut est A ou le canal alpha.
• yChannelSelector : même fonction que l'attribut xChannelSelector mais concerne le long de l'axe y. La valeur par défaut est A ou le canal alpha.

Un exemple ci-dessous :

Le code ci-dessous :

	
	
<svg height="320" width="320">
<defs>
<filter id="deplacement">
<feTurbulence  baseFrequency=".04" numOctaves="2" result="effet" />
<feDisplacementMap in="SourceGraphic" in2="effet" scale="20" />
</filter>
<radialGradient id="degrade" cx="150" cy="150" r="150" gradientUnits="userSpaceOnUse">
<stop offset="25%" stop-color="green"/>
<stop offset="50%" stop-color="blue"/>
<stop offset="75%" stop-color="red"/>
</radialGradient>
</defs>
<rect fill="url(#degrade)" width="300" height="300" filter="url(#deplacement)" />
</svg>

#feFlood :

Cet effet est utilisé pour remplir la zone de filtre d'une couleur. Pour ce faire, elle comprend deux attributs :

• flood-color : définit la couleur du filtre.
• flood-opacity : définit l'opacité de la couleur du filtre.

Un exemple :

Le code ci-dessous :

	
	
<svg width="400" height="140">
<defs>
<filter id="flood1">
<feFlood flood-color="#7A5FFF" />
</filter>
<filter id="flood2">
<feFlood flood-color="#7A5FFF" flood-opacity=".5" />
</filter>
</defs>
<rect x="50" y="20" width="100" height="100" filter="url(#flood1)"/>
<rect x="250" y="20" width="100" height="100" filter="url(#flood2)"/>
</svg>

#feGaussianBlur :

En photographie, l'effet se nomme Bokeh. Il s'agit d'un effet similaire à la primitive de filtre de flou gaussien (ce terme doit parler aux utilisateurs de Photoshop) qui agit sur chaque pixel présent dans la partie que l'on souhaite flouter.

Ce filtre comprend l'attribut stdDeviation dont la valeur est un nombre supérieur à zéro. On peut renseigner deux nombres, séparés par une virgule, pour contrôler les axes x et y.

Un exemple de flou en jouant sur les deux axes :

Le code ci-dessous :

<svg width="600" height="300">
<defs>
<filter id="flou">
<feGaussianBlur stdDeviation="10,3">
	
</feGaussianBlur>
</filter>
</defs>
<image x="100" y="10" width="420" height="279" href="image.jpg" filter="url(#flou)"/>
</svg>

Il est également possible d'obtenir le même effet avec le filtre abrégé feDropShadow

Le code ci-dessous :

<svg width="600" height="310">
<defs>
<filter id="ombre">
<feDropShadow dx="15" dy="10" stdDeviation="5" flood-opacity=".5"/>
</filter>
</defs>
<image x="100" y="10" width="420" height="279" href="image.jpg" filter="url(#ombre)"/>
</svg>	

Un autre exemple tiré de cette démonstration mais en pur SVG :

Le code ci-dessous. Vous pouvez remarquer qu'on utilise la même image deux fois. En appliquant un masque avec un dégradé sur la seconde image, on laisse ainsi passer la lumière et par conséquent on peut voir une partie de la première image, la même que l'on a masquée dans la seconde. Ainsi, le filtre de flou ressort-il sur les angles de l'image.

<svg width="420" height="279">
<defs>
<mask id="degrade">
<rect width="420" height="279" fill="url(#g1)"/>
<radialGradient id="g1" cx="50%" cy="50%" r="50%">
<stop stop-color="black" offset="50%"/>
<stop stop-color="white" offset="110%"/>
</radialGradient>
</mask>
<filter id="filtre">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
<image href="meme-image.jpg" height="279" width="420"/>
<image href="meme-image.jpg" mask="url(#degrade)" filter="url(#filtre)" height="279" width="420"/>
</svg>

#feImage :

Cette primitive de filtre récupère les données d'une image provenant d'une source externe (via l'attribut href) et rend en sortie les données en pixels quel que soit le type d'image. Elle est similaire à l'élément image et comprend les mêmes attributs.

Un exemple de code ci-dessous :

<svg height="" width="">
<defs>
<filter id="image">
<feImage preserveAspectRatio="xMidYMid slice" href="image.jpg"/>
<feTile/> 
</filter>
</defs>
<rect width="100%" height="100%" style="filter:url(#image);"/>
</svg>	

#feMerge :

La primitive de filtre feMerge permet d'empiler les résultats de différents filtres. Généralement, elle est utilisée comme dernière primitive d’un filtre pour assembler les différents résultats précédents (voir chapitre Combiner plusieurs primitives de filtre).

#feMorphology :

L'effet de filtre feMorphology permet de modifier la morphologie (comme son nom peut l'indiquer) de l’image d’entrée du filtre. Il existe deux types de transformation : la dilatation et la contraction.

On utilisera alors l’attribut operator qui comprend la valeur erode pour la contraction (ou érosion) et dilate pour la dilatation.

<svg width="600" height="200">
<defs>
<filter id="erode">
<feMorphology operator="erode" radius="20,10"/>
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="5,8"/>
</filter>
</defs>
<circle r=50  cy="100" cx="100" stroke="black" stroke-width="2" fill="#7A5FFF"/>
<circle r=50  cy="100" cx="300" stroke="black" stroke-width="2" fill="#7A5FFF" filter="url(#erode)"/>
<circle r=50  cy="100" cx="500" stroke="black" stroke-width="2" fill="#7A5FFF" filter="url(#dilate)"/>
</svg>

Il est possible de contrôler le niveau de contraction ou de dilatation via l’attribut radius dont la valeur est un nombre positif. On peut renseigner deux nombres, séparés par une virgule, pour contrôler les axes x et y.

#feOffset :

La primitive feOffset décale tout simplement l’image d’entrée selon les attributs dx et dy. Cette primitive s'avère utile pour créer des effets d’ombrage, que nous verrons plus loin dans le chapitre Combiner plusieurs primitives de filtre.

#feSpecularLighting :

Les attributs liés à cet effet de filtres sont :

• in : détermine le type d'entrée.
• surfaceScale : détermine la hauteur de la surface pour une valeur alpha de 1 (par défaut).
• specularConstant : représente la valeur de ks (coefficient de réflexion spéculaire de la matière) selon le modèle d'éclairage de Phong. La valeur par défaut est de 1.
• specularExponent : contrôle la mise au point pour la source de lumière. Plus la valeur est grande, plus la lumière est intense. La valeur doit être comprise entre 1,0 à 128,0.
• kernelUnitLength : indique la distance prévue.

Le code ci-dessous :

<svg height="240" width="240">
<defs>
<filter id="lumiere">
<feGaussianBlur stdDeviation="2" result="flou" />
<feSpecularLighting result="spec1" in="flou" specularExponent="100" lighting-color="rgb(255, 255, 255)">
<fePointLight x="80" y="100" z="250"/>
		
		
	

</feSpecularLighting>
<feComposite in="SourceGraphic" in2="spec1" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
</filter>
</defs>
<circle fill=#7A5FFF filter="url(#lumiere)" r=100  cy="120" cx="120"/>
</svg>

#feTile :

Similaire à l'élément pattern, l'effet de filtre feTile permet de répéter une image d'entrée via l'attribut in.

Il est possible de changer la position sur les axes x et y et de modifier la largeur ainsi que la hauteur.

Un exemple ci-dessous :

Le code ci-dessous :

<svg height="300" width="600">
<defs>
<filter id="image">
<feImage width="10%" preserveAspectRatio="xMidYMid slice" height="10%" href="image.jpg"/>
<feTile/> 
</filter>
</defs>
<rect width="100%" height="100%" style="filter:url(#image);"/>
</svg>		

Notez bien la présence de l'attribut preserveAspectRatio

#feTurbulence :

La primitive feTurbulence va permettre de créer des motifs ou des textures. Elle comprend les attributs suivants :

• baseFrequency : détermine la vitesse de variations des couleurs sous la forme d'un décimal compris entre .01 et .1. Par défaut, il s'agit de zéro. Peut prendre deux nombres séparés par une virgule correspondant aux axes x et y.
• numOctaves : permet de régler la finesse. La valeur par défaut est 1.
• seed : valeur d’initialisation du générateur de nombre aléatoire. (par défaut = 0)
• stitchTiles
  • stitch
  • noStitch (par défaut)
• type
  • turbulence
  • fractalNoise

On notera l'absence de l'attribut in. Il n'y a donc pas d'entrée pour cet effet de filtre.

Le code ci-dessous :

<svg height="100" width="300">
<defs>
<filter id="turbu" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.08525" numOctaves="1"/>
</filter>
</defs>
<rect width="300" height="100" filter="url(#turbu)"/>
</svg>
	
<svg height="100" width="300">
<defs>
<filter id="turbu1" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.08525" numOctaves="1"/>
</filter>
</defs>
<rect width="300" height="100" filter="url(#turbu1)"/>
</svg>

#feDistantLight :

Cette primitive définit une source de lumière distante pouvant être utilisée dans une primitive de filtre d'éclairage telles que feDiffuseLighting ou feSpecularLighting .

Il existe deux attributs pour cet effet de filtre :

• azimuth : représente l'angle de direction de la source de lumière sur le plan XY (dans le sens des aiguilles d'une montre), en degrés par rapport à l'axe x. (Par défaut = 0).
• elevation : représente l'angle de direction de la source de lumière du plan XY vers l'axe z, en degrés. Notez que l'axe Z pointe vers l'observateur du contenu. (Par défaut = 0).

Le code ci-dessous :

<svg width=600 height=300>
<defs>
<filter id="i1">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
<feSpecularLighting result="specOut" in="blur1" specularConstant="1.2" specularExponent="12" lighting-color="white">
<feDistantLight azimuth="30" elevation="45"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<rect fill="#7A5FFF" filter="url(#i1)" x="10%" y="10%" width="80%" height="80%"/>
</svg>

#fePointLight :

La primitive de filtre fePointLight permet de créer un effet de lumière ponctuelle et comprend trois attributs : x, y et z dont la valeur pour chacun est un nombre.

Celle-ci fonctionne à l'intérieur de primitives telles que feDiffuseLighting et feSpecularLighting.

#feSpotLight :

La primitive de filtre feSpotLight permet de créer un effet de projecteur. Elle fonctionne également avec les mêmes primitives que fePointLight. Elle comprend aussi les mêmes attributs mais en possède d'autres :

• pointsAtX : représente l'emplacement X dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément filter à partir du point sur lequel la source lumineuse pointe. (Par défaut = 0)
• pointsAtY : représente l'emplacement Y dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément filter à partir du point sur lequel la source lumineuse pointe. (Par défaut = 0)
• pointsAtZ : représente l'emplacement X dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément filter à partir du point sur lequel la source lumineuse pointe. De plus, l'axe Z positif doit pointer dans le contenu visible. (Par défaut = 0)
• specularExponent : contrôle la mise au point pour la source de lumière.
• limitingConeAngle : représente l'angle en degrés entre l'axe de la lumière spot et le cône de lumière spot. Ainsi aucune lumière ne peut-elle sortir du cône.

<svg height="240" width="240">
<defs>
<filter id="lumiere">
<feSpecularLighting result="spot" specularConstant="1.5" specularExponent="4">
<feSpotLight x="700" y="700" z="500" limitingConeAngle="5" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="spot" operator="out" k1="0" k2="1" k3="1" k4="0" />
</filter>
</defs>
<circle fill=#7A5FFF filter="url(#lumiere)" r=100  cy="120" cx="120"/>
</svg>

Nous avons fait le tour des primitives de filtre. C'est assez indigeste, il faut bien le reconnaître. Et pourtant j'ai laissé volontairement des informations de côté.

Combiner les résultats de plusieurs primitives de filtre

Si vous avez lu avec assiduité (je n'en doute pas une seconde) le chapitre sur les primitives de filtre, vous savez donc que la primitive feMerge va nous permettre d'empiler les résultats de différents filtres, autrement dit de combiner plusieurs effets de filtre.

Pour être plus précis, sachant que les filtres SVG produisent des couches intermédiaires avant de créer une image finale en sortie, la primitive feMerge va se charger de placer cesdites couches les unes sur les autres pour finalement réduire toutes les couches en un seul résultat.

Voyons un exemple que nous avons déjà utilisé plus haut, à savoir une ombre portée. Pour ce faire, nous allons nous servir de la primitive de filtre feGaussianBlur en corrélation avec d'autres primitives telles que feOffset, feFlood, feComposite et bien entendu feMerge :

Le code ci-dessous :

<svg width="600" height="310">
<filter id="ombre">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
<feOffset dx="15" dy="10" result="flou"/>
<feFlood flood-color="#000" flood-opacity=".5"/>
<feComposite in2="flou" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<image x="100" y="10" width="420" height="279" href="image.jpg" filter="url(#ombre)"/>
</svg> 

Vous noterez la présence de la primitive enfant de feMerge, à savoir feMergeNode. L'ordre de cette primitive a son importance puisque la couche qui sera déclarée en dernier se trouvera en dessus de toutes les autres.

Autre exemple où nous allons utiliser d'autres primitives et les combiner afin d'obtenir un résultat (ici, une ombre incrustée) :

Le code ci-dessous :

<svg width="600" height="279">
<filter id="ombre" x="-50%" y="-50%" width="200%" height="200%">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="3"/>
<feOffset dx="10" dy="10" result="flou"/>
<feFlood flood-color="black" flood-opacity=".8"/>
<feComposite in2="flou" operator="in"/>
<feComposite in2="SourceAlpha" operator="in" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter> 
<image x="100" y="0" width="420" height="279" href="image.jpg" filter="url(#ombre)"/>
</svg>

Aller plus loin

Expérience effet images svg ^(EN)

Article sur les entrées et sorties ^(EN) des primitives de filtre.

démonstration effet gooey

Article sur les noyaux d'image ^(EN)

Article sur les filtres de source lumineuse SVG ^(EN)

Effet duoTone avec les filtres SVG.

Exemples animations filtres

Exemples Highlight Blur Orton effets

Article ^(FR) sur feColorMatrix.

Démonstration en ligne ^(FR) de feColorMatrix.

Article ^(EN) sur fedisplacementmap.

Article complet sur les entrées et sorties des primitives de filtres ^(EN) SVG.

Exemple combinaison de primitives de filtres.