Introduction aux filtres SVG - Apprendre le HTML

Actuellement, CSS offre un moyen d'appliquer des effets de couleur aux images (par exemple, luminosité, saturation, contraste, etc.) via la propriété filter. Cependant, les filtres CSS sont limités. Ils proposent un ensemble fixe de fonctions à usage unique (blur(), brightness(), drop-shadow(), etc.) que l'on applique à un élément entier, principalement pour la manipulation des couleurs et le flou. Pour créer des effets composites plus puissants, nous aurons besoin d'autres fonctions. Ces fonctions sont disponibles dans SVG.

Cette page présente ce que font les filtres SVG, l'élément <filter> et sa région de filtre, ainsi que la façon dont les primitives de filtre sont chaînées grâce au mécanisme in/result.

Ce que font les filtres SVG (et quand les utiliser)

Un filtre SVG est un petit pipeline de traitement d'image. Au lieu d'un effet unique prédéfini, vous décrivez une chaîne d'opérations de bas niveau — appelées primitives de filtre — où la sortie d'une étape devient l'entrée de la suivante. En chaînant des primitives, vous pouvez créer des effets que CSS ne peut pas exprimer seul :

Ombres portées et lueurs construites en décalant, floutant, recolorisant et recomposant le graphique original.
Textures et bruit générés avec <feTurbulence> (bruit de Perlin) pour des nuages, du papier, du marbre, etc.
Déplacement / déformation avec <feDisplacementMap>, qui déplace les pixels en utilisant une autre image comme carte de hauteur.
Effets d'éclairage qui traitent le canal alpha comme une carte de relief 3D.

Quand choisir les filtres SVG plutôt que les filtres CSS : utilisez la propriété CSS filter quand vous avez besoin d'un effet simple et unique (un flou, un réglage de luminosité, une ombre portée) sur n'importe quel élément HTML ou SVG. Utilisez les filtres SVG quand vous avez besoin de combiner plusieurs opérations en un seul effet composite, de générer des textures ou d'effectuer un déplacement — tout ce qui nécessite d'alimenter la sortie d'une opération dans une autre.

L'élément `<filter>` et sa région

Vous définissez un filtre une fois à l'intérieur de <defs> et vous le référencez depuis une forme avec l'attribut filter="url(#id)" (ou la propriété CSS filter). L'élément <filter> lui-même ne dessine rien — c'est un conteneur pour les primitives qui effectuent le travail.

Un filtre possède une région de filtre : une boîte englobante qui limite où le résultat filtré est rendu. Tout ce qui est peint en dehors de cette région est découpé. La région est contrôlée par ces attributs sur <filter> :

Attribut	Rôle
`x`, `y`, `width`, `height`	Position et taille de la région de filtre. Par défaut : `x="-10%"`, `y="-10%"`, `width="120%"`, `height="120%"` — soit 10 % de marge de chaque côté de la boîte englobante de la source.
`filterUnits`	Système de coordonnées pour `x/y/width/height`. Par défaut `objectBoundingBox` (les valeurs sont des fractions/pourcentages de la boîte englobante de la source) ; `userSpaceOnUse` utilise des coordonnées absolues dans l'espace utilisateur.
`primitiveUnits`	Système de coordonnées pour les valeurs de longueur à l'intérieur des primitives (par ex. `dx/dy` de `feOffset`). Par défaut `userSpaceOnUse`.

Cette région est le piège le plus courant. Les effets comme les flous et les ombres portées débordent en dehors de la forme originale, et la région par défaut de 120 % est souvent trop petite — l'ombre est découpée sur les bords. Si votre effet semble tronqué, agrandissez la région, par exemple x="-50%" y="-50%" width="200%" height="200%".

Primitives de filtre

En SVG, chaque élément <filter> inclut un ensemble d'éléments de filtre comme 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. Ce résultat peut ensuite être utilisé comme entrée pour d'autres opérations. Toutefois, 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 chaînées. Toutes les primitives ont le même préfixe : fe (abréviation de « filter effect »). Elles sont nommées en fonction de ce qu'un élément est ou fait. Par exemple, la primitive appliquant un effet de flou gaussien à la source graphique s'appelle feGaussianBlur.

Mots-clés d'entrée spéciaux

En plus de nommer le result d'une primitive précédente, l'attribut in peut référencer ces entrées intégrées :

Mot-clé	Signification
`SourceGraphic`	L'élément original auquel le filtre est appliqué, en couleur complète.
`SourceAlpha`	Le même élément, mais uniquement son canal alpha (transparence) — utile comme silhouette pour les ombres.
`BackgroundImage`	Une capture du canevas sous l'élément.
`BackgroundAlpha`	Le canal alpha de `BackgroundImage`.
`FillPaint`	La peinture de `fill` de l'élément, étendue pour remplir la région de filtre.
`StrokePaint`	La peinture de `stroke` de l'élément, étendue pour remplir la région de filtre.

Remarque : BackgroundImage, BackgroundAlpha, FillPaint et StrokePaint font partie de la spécification mais bénéficient de peu ou d'aucun support navigateur aujourd'hui ; en pratique, vous travaillerez avec SourceGraphic, SourceAlpha et le result d'autres primitives.

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

Éléments de filtre en SVG

Élément	Description
`<feBlend>`	Fusionne deux objets en utilisant les modes de fusion courants des logiciels d'imagerie.
`<feColorMatrix>`	Applique une transformation matricielle.
`<feComponentTransfer>`	Effectue un remappage composant par composant des données.
`<feComposite>`	Effectue une combinaison pixel par pixel de deux images d'entrée 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 pixels 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 des propriétés flood-opacity et flood-color.
`<feGaussianBlur>`	Applique un flou gaussien à l'image d'entrée.
`<feImage>`	Fait référence à un graphique externe à cet élément, chargé ou rendu dans un raster RGBA constituant le résultat de la primitive.
`<feMerge>`	Fusionne des couches d'images d'entrée.
`<feMorphology>`	Effectue un « amincissement » ou un « épaississement ».
`<feOffset>`	Décale l'image d'entrée.
`<feSpecularLighting>`	Éclaire une source graphique 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.

Un exemple à primitive unique

Le filtre le plus simple comporte une seule primitive. Ici, feGaussianBlur prend le SourceGraphic et le floute :

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

Chaîner des primitives : une ombre portée

La vraie puissance vient du chaînage. Pour construire une ombre portée manuellement, on prend la silhouette de l'élément, on la décale vers le bas et vers la droite, on la floute, puis on replace le graphique original par-dessus. Suivez les attributs result/in pour voir la sortie de chaque étape alimenter la suivante :

<svg width="220" height="220">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <!-- 1. Take the alpha (silhouette) of the source -->
      <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
      <!-- 2. Blur that offset silhouette -->
      <feGaussianBlur in="offset" stdDeviation="4" result="blur" />
      <!-- 3. Stack the blurred shadow under the original graphic -->
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="20" y="20" width="160" height="160" rx="12"
        fill="#1e88e5" filter="url(#shadow)" />
</svg>

Flux des données :

feOffset lit SourceAlpha (la silhouette de la forme) et la décale de dx/dy, en écrivant result="offset".
feGaussianBlur lit in="offset" et l'adoucit, en écrivant result="blur".
feMerge empile les couches de bas en haut : d'abord le blur (l'ombre), puis le SourceGraphic non flouté par-dessus — ainsi la forme nette repose sur son ombre douce.

Notez la région de filtre agrandie (width="140%" height="140%") pour que l'ombre décalée et floutée ne soit pas découpée.

Pour des raccourcis prêts à l'emploi, consultez la primitive <feDropShadow> et le chapitre sur les effets de flou SVG. Une liste complète des attributs pour chaque primitive se trouve dans la référence SVG.

Pratique

Que permet de faire un filtre SVG ?

Chaîner des primitives de bas niveau (décalage, flou, fusion, etc.) pour créer des effets composites sur un graphique SVG.Exécuter des boucles en HTML.Définir des règles de routage pour un serveur web.Valider la saisie d'un formulaire avant soumission.