La balise <feGaussianBlur> est une primitive de filtre SVG (bref, un filtre quoi !) qui applique un effet de flou gaussien à un élément graphique.
Cet effet est utile pour créer des ombres douces, des transitions ou simplement flouter des objets pour attirer l'attention sur d'autres éléments.
Structure et syntaxe de la balise <feGaussianBlur>
Structure
Cette balise s'utilise toujours avec la balise <svg>.
Voici un exemple basique :
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurEffect">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="blue" filter="url(#blurEffect)" />
</svg>Dans cet exemple :
- La balise
<feGaussianBlur>applique un flou avec un écart type (stdDeviation) de 5. - Le filtre est lié avec
filter="url(#blurEffect)"sur le cercle (<circle>).
Voici notre résultat :
Exemple avancé
Voici un exemple combinant plusieurs filtres pour obtenir un effet de flou et d'ombre portées :
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="complexBlur">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
<feMerge>
<feMergeNode in="offsetBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="orange" filter="url(#complexBlur)" />
</svg>Dans cet exemple :
<feGaussianBlur>crée un flou à partir de l'alpha de l'élément source ;<feOffset>déplace le flou pour simuler une ombre ;<feMerge>combine le flou et l'élément source.
Essayez par vous-même :
Attributs de la balise <feGaussianBlur>
La balise <feGaussianBlur> accepte plusieurs attributs :
| Attribut | Description |
|---|---|
in | Spécifie la source du graphique à flouter. Par exemple, SourceGraphic, SourceAlpha, etc. |
stdDeviation | Contrôle l'intensité du flou. Plus la valeur est élevée, plus le flou est important. Vous pouvez spécifier deux valeurs séparées par une virgule (x et y). |
result | Définit un identifiant pour le résultat de cette étape du filtre, qui peut être utilisé par d'autres primitives. |
Bonnes pratiques
Pour bien utiliser <feGaussianBlur>, privilégiez des valeurs de stdDeviation adaptées pour éviter un flou trop important ou trop subtil.
N'hésitez surtout pas à <feGaussianBlur> avec d'autres primitives pour des effets visuels avancés : les filtres peuvent s'accumuler dans leur balise <filter> ! 😬
Compatibilité des navigateurs
La balise <feGaussianBlur> est largement prise en charge :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 9+) |