Un logo qui semble flotter sous l'eau, un texte qui paraît gravé dans une surface irrégulière, une bannière qui ondule comme un tissu : ces distorsions ne déplacent aucun tracé à la main, elles utilisent une seconde image comme carte de déplacement.
<feDisplacementMap> lit les valeurs de couleur d'une image de référence et s'en sert pour décaler, pixel par pixel, une autre image ou une forme, ce qui crée un effet de relief ou de distorsion contrôlée.
Définition
<feDisplacementMap> est une primitive de filtre SVG qui prend deux entrées : une image source à déformer (in) et une carte de déplacement (in2). Pour chaque pixel de la carte, elle lit deux canaux de couleur choisis par xChannelSelector et yChannelSelector, et s'en sert pour décaler le pixel correspondant de la source, horizontalement et verticalement.
L'attribut scale règle l'amplitude du décalage : à zéro, l'image reste inchangée ; plus la valeur est élevée, plus la distorsion est marquée. La texture qui sert de carte vient souvent d'un générateur de bruit comme <feTurbulence>, mais n'importe quelle image convient.
Attributs principaux
| Attribut | Rôle | Valeurs typiques |
|---|---|---|
in | Image à déformer | SourceGraphic ou résultat d'une étape précédente |
in2 | Carte de déplacement | Souvent le résultat d'un générateur de bruit |
scale | Amplitude du décalage en pixels | De 0 (aucun effet) à 40 ou plus |
xChannelSelector | Canal utilisé pour l'axe horizontal | R, G, B ou A |
yChannelSelector | Canal utilisé pour l'axe vertical | R, G, B ou A |
Exemple de rendu concret
L'exemple ci-dessous génère une carte de déplacement avec une texture de bruit, puis l'applique à un simple rectangle, ce qui casse ses bords nets et donne l'impression d'un tissu froissé.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="tissu" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence
type="fractalNoise"
baseFrequency="0.02"
numOctaves="2"
result="bruit"
/>
<feDisplacementMap
in="SourceGraphic"
in2="bruit"
scale="25"
xChannelSelector="R"
yChannelSelector="G"
/>
</filter>
</defs>
<rect
x="20"
y="20"
width="160"
height="160"
rx="12"
fill="#22c55e"
filter="url(#tissu)"
/>
</svg>Le résultat : les bords du carré ne sont plus droits, comme si la forme avait été imprimée sur un tissu plissé plutôt que sur une surface plane.
Différence avec un élément SVG proche
<feDisplacementMap> se distingue de <feColorMatrix> par sa cible : ce dernier recolore les pixels sans changer leur position, alors que <feDisplacementMap> les déplace sans toucher à leur couleur d'origine. Les deux peuvent se combiner dans un même filtre pour à la fois déformer et teinter une image en une seule passe.
Piège classique
Le rectangle de calcul d'un filtre est, par défaut, légèrement plus grand que la forme, avec seulement 10 % de marge de chaque côté. Avec une valeur de scale élevée, le décalage peut dépasser cette marge et se retrouver rogné net sur un bord, un artefact facile à confondre avec un bug. La correction consiste à agrandir explicitement la zone du filtre, par exemple avec x="-20%" y="-20%" width="140%" height="140%" sur l'élément <filter>.
Cas d'usage réel
On retrouve <feDisplacementMap> dans les effets de verre dépoli, les logos qui semblent flotter sous l'eau, les titres gravés dans une texture de pierre ou de bois, et plus généralement partout où un design veut casser la rigueur parfaite d'une forme vectorielle sans redessiner ses contours à la main.
- Effet de tissu froissé sur une bannière ou une carte
- Texte qui semble onduler sur une page d'accueil
- Logo « sous l'eau » pour une section produit
- Bordure irrégulière façon papier déchiré
Questions fréquentes
feTurbulence comme carte de déplacement ?Non, n'importe quelle image peut servir de carte, y compris un dégradé, une photo ou le résultat d'un autre filtre ; feTurbulence est seulement la source la plus courante parce qu'elle produit du bruit organique sans image externe à charger.
Le SVG n'étire ni ne répète la carte : en dehors de la zone qu'elle couvre, elle est traitée comme transparente, ce qui revient à des canaux de couleur nuls et donne souvent un résultat imprévisible à cet endroit ; il vaut mieux que la carte couvre la même zone que la source pour garder un effet cohérent sur toute la forme.
scale pour un effet de vague continue ?Oui, <animate> peut faire varier l'attribut scale dans le temps, ce qui donne une distorsion qui pulse ou ondule sans jamais recharger d'image, un effet léger en performance et fluide à l'œil.