Un bouton qui se détache légèrement du fond, une icône qui semble flotter au-dessus d'une image, un seul tracé d'une illustration à ombrer sans toucher au reste : ces effets demandaient autrefois d'assembler quatre primitives de filtre à la main.
<feDropShadow> réunit ce travail en une seule balise, l'équivalent SVG de la propriété CSS box-shadow, mais applicable à une forme précise à l'intérieur d'un dessin plus large plutôt qu'à un bloc entier de la page.
Définition
<feDropShadow> est une primitive de filtre SVG qui projette une ombre portée derrière la source qu'on lui donne. Avant son arrivée dans la spécification, le même résultat exigeait d'enchaîner quatre primitives : un flou avec feGaussianBlur, un décalage avec feOffset, une couleur plate avec feFlood, puis une fusion avec feComposite. <feDropShadow> fait ces quatre étapes en un seul élément.
Elle se place dans un <filter> comme toute primitive, puis s'applique à une forme ou à un groupe avec filter="url(#monId)".
Attributs principaux
| Attribut | Rôle | Valeur par défaut |
|---|---|---|
dx | Décalage horizontal de l'ombre | 2 |
dy | Décalage vertical de l'ombre | 2 |
stdDeviation | Intensité du flou | 2 |
flood-color | Couleur de l'ombre | black |
flood-opacity | Opacité de l'ombre | 1 |
Exemple de rendu concret
L'exemple ci-dessous applique une ombre douce et décalée à une seule étoile dessinée avec <polygon>, sans toucher au fond ni aux autres formes du dessin.
<svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="ombre" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow
dx="4"
dy="6"
stdDeviation="4"
flood-color="#1e293b"
flood-opacity="0.4"
/>
</filter>
</defs>
<polygon
points="100,20 118,68 170,68 128,98 144,148 100,118 56,148 72,98 30,68 82,68"
fill="#facc15"
filter="url(#ombre)"
/>
</svg>Changer dx, dy ou stdDeviation suffit à passer d'une ombre douce et proche à une ombre longue et diffuse, sans jamais retoucher le tracé de l'étoile.
Différence avec un élément SVG proche
La confusion la plus fréquente porte sur la propriété CSS filter: drop-shadow(), qui produit un résultat très proche mais s'applique à tout un élément HTML ou SVG. <feDropShadow> s'utilise à l'intérieur d'un dessin SVG pour ombrer une seule forme, comme un seul <path> au milieu d'un groupe, ce que box-shadow ne sait pas faire puisqu'il suit toujours le contour rectangulaire d'une boîte.
Piège classique
Comme tout filtre, <feDropShadow> calcule son rendu dans une zone qui, par défaut, ne dépasse la forme que de 10 % de chaque côté. Une ombre large ou très décalée peut donc se retrouver coupée net sur un bord invisible, un défaut qui ne se voit qu'au rendu final. La correction consiste à agrandir la zone du filtre avec les attributs x, y, width et height, par exemple x="-50%" y="-50%" width="200%" height="200%".
Cas d'usage réel
Sur une interface comme celle de Believemy, <feDropShadow> sert à détacher une icône de badge du reste d'une carte, à ombrer un seul caractère dans un logo composé de <text> et de formes, ou à donner du relief à une illustration en couches sans multiplier les balises de filtre.
- Badge de réussite qui semble flotter au-dessus d'une carte
- Logo avec une seule lettre ombrée pour la faire ressortir
- Illustration en couches avec une impression de profondeur
- Ombre légère sous une carte au survol, pour un retour visuel plus vivant que le simple changement de couleur de fond
Questions fréquentes
feDropShadow remplace-t-il complètement feGaussianBlur, feOffset, feFlood et feComposite ?Dans la grande majorité des cas oui, puisqu'il produit le même résultat visuel en une seule balise ; l'assemblage manuel garde un intérêt seulement pour insérer une étape supplémentaire entre le flou et le décalage, ce que le raccourci ne permet pas.
Oui, en plaçant plusieurs éléments feDropShadow à la suite dans le même filtre, chacun s'ajoute au résultat du précédent, ce qui permet de superposer une ombre nette et une ombre diffuse pour un effet plus riche.
stdDeviation et dx ou dy ?stdDeviation règle uniquement le flou, c'est-à-dire à quel point les bords de l'ombre sont doux, tandis que dx et dy déplacent l'ombre entière horizontalement et verticalement par rapport à la forme d'origine.