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 unid(#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 :
| Attribut | Description |
|---|---|
id | Identifiant unique pour référencer le filtre. |
x, y | Position du filtre par rapport à l'objet (valeurs par défaut : -10%). |
width, height | Dimensions du filtre. Par défaut, elles dépassent de 10% pour inclure les effets visuels en dehors de l'objet. |
filterUnits | Unités pour les dimensions (userSpaceOnUse ou objectBoundingBox). |
primitiveUnits | Unités pour les primitives internes (userSpaceOnUse ou objectBoundingBox). |
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 :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 9+) |