<filter>

La balise <filter> est utilisée dans un document SVG pour appliquer des effets graphiques, comme des flous, des ombres portées, ou des transformations de couleurs, à des éléments SVG (donc avec la balise <svg>).

Elle sert de conteneur pour des filtres, telles que <feGaussianBlur>, <feOffset>, et bien d'autres, qui permettent de créer des effets visuels uniques.

Structure et syntaxe de la balise <filter>

Structure

Voici un exemple de base :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="blurFilter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
   </defs>

    <circle cx="100" cy="100" r="50" fill="blue" filter="url(#blurFilter)" />
</svg>

Dans cet exemple, nous avons :

• Un filtre avec un effet de flou qui est défini dans <defs> avec un id (#blurFilter) ;
• Le filtre est appliqué au cercle grâce à filter="url(#blurFilter)".

Voici le rendu :

Exemple avancé

Voici un exemple utilisant plusieurs filtres pour créer un effet d'ombre portée :

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="dropShadow">
            <feOffset dx="5" dy="5" result="offset" />
            <feGaussianBlur in="offset" stdDeviation="3" result="blur" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>

    <text x="50" y="100" font-size="40" fill="black" filter="url(#dropShadow)">
        Shadowed Text
    </text>
</svg>

Dans cet exemple :

• <feOffset> déplace le texte pour créer un effet de décalage.
• <feGaussianBlur> floute le décalage pour adoucir les bords.
• <feBlend> combine l'effet avec le texte d'origine.

Voici notre résultat :

Attributs de la balise <filter>

La balise <filter> accepte plusieurs attributs pour personnaliser son comportement :

Bonnes pratiques

Pour bien utiliser la balise <filter>, vous devriez toujours placer vos filtres dans un conteneur <defs> pour centraliser leur définition (votre code sera plus simple).

Utilisez aussi des noms d'id explicites pour mieux organiser vos fichiers SVG.

Compatibilité des navigateurs

La balise <filter> est prise en charge par tous les navigateurs modernes :