Effets de flou SVG - Apprendre le HTML

Cette page explique comment flouter des graphiques SVG avec la primitive de filtre <feGaussianBlur> : comment contrôler l'intensité du flou, comment flouter uniquement la silhouette d'une forme, comment dimensionner la région de filtre pour que le flou ne soit pas coupé, et quand utiliser plutôt la propriété CSS filter: blur() plus simple.

Description des filtres SVG

Tous les filtres SVG sont définis à l'intérieur d'un élément <defs>. L'élément <defs> est l'abréviation de definitions (définitions). Il contient des éléments réutilisables — comme des filtres — qui ne sont pas rendus tant qu'ils ne sont pas référencés.

L'élément <filter> définit un filtre SVG. Il nécessite un attribut id (obligatoire) qui identifie le filtre. L'élément <filter> n'est pas rendu directement : il prend effet uniquement lorsqu'il est référencé via l'attribut filter sur une forme SVG, ou via la fonction url() en CSS.

Chaque <filter> contient une ou plusieurs primitives de filtre en tant qu'enfants. Une primitive de filtre effectue une opération graphique sur une ou plusieurs entrées et produit une sortie unique. En plus d'accepter la sortie d'une autre primitive comme entrée, une primitive peut également accepter des entrées intégrées telles que SourceGraphic et SourceAlpha.

Chaque primitive de filtre utilise le préfixe fe, qui signifie « filter effect » (effet de filtre). Il existe 17 primitives de filtre définies dans la spécification SVG Filter. Pour flouter un élément, on utilise <feGaussianBlur>.

Exemple de création d'un effet de flou :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="150" height="150">
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
      </defs>
      <rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Essayez vous-même »

Explication du code :

L'attribut id de l'élément <filter> spécifie un nom unique pour le filtre.
L'effet de flou est produit par l'élément <feGaussianBlur>.
in="SourceGraphic" envoie la forme entière — couleurs comprises — dans le flou.
stdDeviation définit l'intensité du flou.
L'attribut filter de l'élément <rect> lie la forme au filtre via son id.

L'attribut stdDeviation

stdDeviation contrôle la quantité de flou. Il s'agit de l'écart-type de la fonction gaussienne appliquée aux pixels — en termes simples, une valeur plus grande étale chaque pixel sur une zone plus large, rendant l'image plus douce. 0 signifie aucun flou.

Vous pouvez passer une valeur pour un flou uniforme, ou deux valeurs séparées par un espace pour un flou asymétrique où les axes X et Y sont floutés par des quantités différentes :

<!-- Uniform blur in both directions -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />

<!-- 20px of horizontal blur, 5px of vertical blur (motion-blur look) -->
<feGaussianBlur in="SourceGraphic" stdDeviation="20 5" />

Les valeurs typiques sont faibles : 1–3 donne un adoucissement léger, 5–10 un résultat clairement flou, et tout ce qui dépasse ~20 rend la forme presque méconnaissable. Comme le flou se propage dans toutes les directions, il déborde au-delà des contours originaux de la forme — c'est pourquoi la région de filtre est importante (voir ci-dessous).

SourceGraphic vs SourceAlpha

L'attribut in choisit ce sur quoi la primitive opère. Les deux entrées sources intégrées se comportent très différemment :

in="SourceGraphic" — l'élément exactement tel qu'il est dessiné, y compris son remplissage, son contour et ses couleurs. Flouter ceci donne une copie douce et en couleur de la forme.
in="SourceAlpha" — uniquement le canal alpha (opacité) de l'élément. Les informations de couleur sont ignorées, laissant une silhouette noire pleine de la forme. Flouter ceci est la base des ombres portées, car on veut un contour flou sans couleur qu'on peut décaler derrière l'original. Voir les ombres portées SVG pour ce motif.

<!-- Soft, full-color blur -->
<feGaussianBlur in="SourceGraphic" stdDeviation="6" />

<!-- Blurred black silhouette (colors removed) -->
<feGaussianBlur in="SourceAlpha" stdDeviation="6" />

La région de filtre (x, y, width, height)

Un <filter> possède une région de découpe. Par défaut, elle est x="-10%" y="-10%" width="120%" height="120%" de la boîte englobante de l'élément — une marge de 10% de chaque côté. Un flou intense peut facilement dépasser cette marge, et tout ce qui se trouve en dehors de la région est coupé net, ce qui donne l'impression que le flou a été brutalement tronqué.

Les attributs x, y, width et height sur <filter> définissent cette région. Dans le premier exemple, x="0" y="0" déplace le coin supérieur gauche de la région à l'origine de l'élément. Pour donner à un flou fort la place de s'estomper en douceur, agrandissez la région :

<filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>

Si un flou semble coupé d'un côté, la région de filtre est généralement trop petite — élargissez-la.

Enchaîner les primitives avec result

Lorsqu'un filtre comporte plusieurs primitives, l'attribut result nomme la sortie d'une primitive afin qu'une primitive ultérieure puisse la référencer via in. C'est ainsi que les effets en plusieurs étapes (flou, puis décalage, puis fusion) sont connectés :

<filter id="chain">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blurred" />
  <feOffset in="blurred" dx="3" dy="3" />
</filter>

Ici, feGaussianBlur stocke sa silhouette floutée sous le nom blurred, et feOffset la récupère avec in="blurred". Sans le câblage result/in, chaque primitive flouerait à nouveau la source originale.

Flouter une image et du texte

<feGaussianBlur> fonctionne sur tout contenu SVG, pas seulement les rectangles. Ci-dessous, le même filtre floute une image intégrée et une ligne de texte. La région de filtre est agrandie pour que le flou ne soit pas coupé aux bords.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="240">
      <defs>
        <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
        </filter>
      </defs>
      <image
        href="https://www.w3docs.com/build/assets/images/logo.svg"
        width="180" height="60" x="20" y="20"
        filter="url(#blurFilter)" />
      <text x="20" y="160" font-size="40" fill="navy" filter="url(#blurFilter)">
        Blurred text
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

L'alternative CSS filter: blur()

Pour un flou rapide sur un élément HTML (ou un SVG entier), CSS propose la fonction filter: blur() bien plus simple :

img {
  filter: blur(4px);
}

filter: blur() prend une seule valeur de longueur et applique un flou gaussien uniforme — c'est le choix le plus simple quand vous avez juste besoin d'adoucir un élément. Préférez l'approche SVG <feGaussianBlur> quand vous avez besoin de :

Flou asymétrique (quantités X et Y différentes via stdDeviation="20 5").
Flouter uniquement la silhouette (in="SourceAlpha").
Enchaîner le flou avec d'autres primitives — décalages, changements de couleur, fusions — pour des effets comme les ombres portées.
Un filtre réutilisable et nommé référencé depuis plusieurs formes.

Pour une liste complète des primitives de filtre et des attributs, voir la référence SVG.

Exercice

Pratique

Quelles sont les fonctions des attributs stdDeviation et in dans le filtre SVG 'feGaussianBlur' ?

L'attribut stdDeviation définit l'écart-type pour l'opération de flou.L'attribut in définit l'entrée du filtre.L'attribut stdDeviation sert à spécifier le rayon du filtre.L'attribut in attribue la couleur au filtre.Les attributs stdDeviation et in n'ont pas de fonction spécifique dans le filtre SVG 'feGaussianBlur'.