Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre SVG » Les filtres SVG

Sommaire
  1. Les filtres SVG c'est quoi ?
    1. L'élément filter
    2. Exemple simple
  2. Les primitives de filtre
    1. Entrée et sortie des primitives de filtre
    2. Les différents effets de filtre
    3. Combiner les résultats de plusieurs primitives de filtre
  3. Aller plus loin
Télécharger ce cours en pdf

👉 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 :

Exemple filtre flou avec 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 :

Exemple filtre flou avec SVG
	
	
<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 :

Exemple sortie entrée filtre avec SVG

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 : retour liste des primitives

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
Exemple mode filtre feBlend SVG

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 : retour liste des primitives

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 :

Exemple type hueRotate filtre feColorMatrix SVG

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 :

Exemple type saturate filtre feColorMatrix SVG

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 :

Exemple type matrix filtre feColorMatrix SVG

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.

Exemple type luminanceToAlpha filtrefeColorMatrix SVG

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 : retour liste des primitives

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 :

Exemple fonction table filtre primitive feComponentTransfer
	
	
<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 :

Exemple fonction discrete filtre primitive feComponentTransfer
	
	
<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 :

Exemple fonction linear filtre primitive feComponentTransfer
	
	
<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 :

Exemple fonction gamma filtre primitive feComponentTransfer
	
	
<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 : retour liste des primitives

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
Exemples filtre primitive feComposite
	
	
<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 : retour liste des primitives

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.
Exemples filtre primitive feConvolveMatrix
	
	
<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 : retour liste des primitives

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 :

Exemple filtre primitive feDiffuseLighting

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 :retour liste des primitives

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 :

Exemple filtre primitive feDisplacementMap

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 :retour liste des primitives

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 :

Exemple filtre primitive feFlood

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 :retour liste des primitives

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 :

Exemple filtre primitive feGaussianBlur

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 :

Exemple filtre primitive feGaussianBlur radial

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 :retour liste des primitives

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 :retour liste des primitives

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 :retour liste des primitives

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.

Exemple filtre primitive feMorphologie



<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 :retour liste des primitives

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 :retour liste des primitives

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.
Exemple filtre primitive feSpecularLighting

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 :retour liste des primitives

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 :

Exemple filtre primitive feTile

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 : retour liste des primitives

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.

Exemple filtre primitive feTurbulence

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 : retour liste des primitives

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).
Exemple filtre primitive feDistantLight

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 : retour liste des primitives

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 : retour liste des primitives

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.
Exemple filtre primitive feSpotLight



<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 :

Exemple combiner les résultats de plusieurs primitives de filtre

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) :

Exemple combiner les résultats de plusieurs primitives de filtre

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.