<feGaussianBlur>

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 :

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 :