Introduction aux filtres SVG

Actuellement, CSS offre un moyen d'appliquer des effets de couleur aux images (par exemple, luminosité, saturation, contraste, etc.) à l'aide de la propriété filter. Cependant, les filtres CSS sont limités. Les effets créés avec eux sont généralement applicables aux images, mais se limitent à la manipulation des couleurs et au flou. Pour créer des effets puissants, nous aurons besoin d'autres fonctions. De telles fonctions sont disponibles dans SVG.

Les filtres SVG ajoutent divers effets aux graphiques SVG.

Primitives de filtre

Dans SVG, chaque élément <filter> inclut un ensemble d'éléments de filtre en tant qu'enfants. Chaque primitive de filtre effectue une opération graphique de base sur une ou plusieurs entrées, mais ne produit qu'un seul résultat. L'entrée est spécifiée dans un attribut appelé in. Le résultat de l'opération est spécifié dans l'attribut result. Le résultat peut ensuite être utilisé comme entrée pour d'autres opérations. Cependant, si l'attribut in est omis, la primitive utilise par défaut SourceGraphic pour la première opération, ou le résultat de la primitive précédente pour les opérations en chaîne. Toutes les primitives ont le même préfixe : fe (abréviation de « filter effect »). Elles sont nommées en fonction de ce qu'est ou fait un élément. Par exemple, la primitive appliquant un effet de flou gaussien au graphique source s'appelle feGaussianBlur.

Outre l'utilisation du résultat d'autres primitives comme entrée, une primitive de filtre peut également accepter d'autres entrées telles que SourceGraphic (un élément auquel tout le filtre est appliqué) et SourceAlpha (identique à SourceGraphic, mais ce graphique ne contient que le canal alpha de l'élément).

Il existe actuellement 17 primitives de filtre définies dans la spécification des filtres SVG.

Éléments de filtre dans SVG

Élément	Description
<feBlend>	Mélange deux objets ensemble en utilisant des modes de fusion couramment utilisés dans les logiciels d'imagerie.
<feColorMatrix>	Applique une transformation matricielle.
<feComponentTransfer>	Effectue un remappage composant par composant des données.
<feComposite>	Effectue la combinaison de deux images d'entrée pixel par pixel dans l'espace image.
<feConvolveMatrix>	Applique un effet de filtre par convolution matricielle.
<feDiffuseLighting>	Éclaire une image en utilisant le canal alpha comme carte de relief.
<feDisplacementMap>	Utilise les valeurs de pixel de l'entrée in2 pour déplacer l'image d'entrée in.
<feFlood>	Crée un rectangle rempli avec les valeurs d'opacité et de couleur provenant des propriétés flood-opacity et flood-color.
<feGaussianBlur>	Applique un flou gaussien sur l'image d'entrée.
<feImage>	Fait référence à un graphique externe à cet élément, qui est chargé ou rendu dans un raster RGBA devenant le résultat de la primitive.
<feMerge>	Mélange les couches de l'image d'entrée.
<feMorphology>	Effectue un « amincissement » ou un « épaississement ».
<feOffset>	Décale l'image d'entrée.
<feSpecularLighting>	Éclaire un graphique source en utilisant le canal alpha comme carte de relief.
<feTile>	Remplit un rectangle cible avec un motif répété d'une image d'entrée.
<feTurbulence>	Crée une image avec la fonction de turbulence de Perlin.
<feDropShadow>	Crée un effet d'ombre portée.

Exemple d'utilisation

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blur)" />
</svg>

Pratique

Que permet de faire le filtre SVG dans HTML ?

Le filtre SVG permet de modifier les propriétés des images et du texte.Le filtre SVG est utilisé pour exécuter des boucles en HTML.Le filtre SVG permet d'ajouter des effets comme le flou, la luminosité, le contraste, etc. à un graphique SVG.Le filtre SVG est utilisé pour modifier les attributs CSS.