<feBlend> en SVG : mélanger deux images comme un calque Photoshop

En retouche d'image, superposer deux calques en mode « produit » ou « incrustation » assombrit une zone ou fait ressortir un contraste, sans jamais modifier les pixels d'origine des calques. En SVG, cette même logique de fusion existe entre deux sources dessinées dans un filtre.

<feBlend> combine deux sources d'image, par exemple la forme d'origine et un dégradé ou une texture, selon un mode de fusion précis, exactement comme un mode de calque dans un logiciel de retouche.

Définition

<feBlend> est une primitive de filtre SVG qui prend deux entrées, in et in2, et les fusionne pixel par pixel selon un mode défini par l'attribut mode. Elle vit à l'intérieur d'un élément <filter>, au même titre que d'autres primitives comme <feColorMatrix>, et son résultat peut à son tour servir d'entrée à une autre primitive pour construire un effet en plusieurs étapes.

Attributs principaux

• in / in2 : les deux sources à fusionner. Cela peut être SourceGraphic (l'élément d'origine), BackgroundImage, ou le résultat d'une primitive précédente désigné par son result.
• mode : le mode de fusion. Les valeurs les plus utilisées reprennent exactement le vocabulaire de la retouche photo : normal, multiply (assombrit, comme deux calques de peinture superposés), screen (éclaircit), overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color et luminosity.

Exemple de rendu concret

Un carré fusionné avec un aplat orangé en mode multiply, pour obtenir un effet de calque de couleur assombrissant, comme un filtre photo :

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="teinte-orangee" x="-20%" y="-20%" width="140%" height="140%">
      <feFlood flood-color="#f97316" result="teinte" />
      <feBlend in="SourceGraphic" in2="teinte" mode="multiply" />
    </filter>
  </defs>
  <rect x="30" y="30" width="140" height="140" fill="#1d4ed8" filter="url(#teinte-orangee)" />
</svg>

Le rectangle bleu d'origine (SourceGraphic) et l'aplat orangé (teinte) se combinent selon les règles du mode multiply : le résultat est plus sombre que les deux sources prises séparément, exactement comme deux calques multipliés dans un logiciel de retouche.

Différence avec la propriété CSS mix-blend-mode

Les deux partagent le même vocabulaire de modes (multiply, screen, overlay...), ce qui n'est pas un hasard : la propriété CSS mix-blend-mode, plus récente, a repris telle quelle la liste de modes déjà définie par <feBlend> dans la spécification SVG, bien plus ancienne. La propriété CSS fusionne un élément avec ce qui se trouve derrière lui dans la page, en une seule ligne de style, mais elle ne fonctionne qu'entre éléments empilés du document. <feBlend> fusionne des sources internes à un filtre, y compris des textures générées comme <feTurbulence> ou des dégradés, ce que mix-blend-mode ne sait pas produire seul.

Piège classique

Cas d'usage réel

<feBlend> sert typiquement à teinter une photo ou une illustration avec une couleur de marque en mode multiply, à créer un effet de grain ou de texture en fusionnant une forme avec un bruit généré par feTurbulence, ou à simuler un éclairage en fusionnant une forme avec un dégradé en mode screen ou overlay.

FAQ

Non, une seule instance ne prend que deux entrées, in et in2. Pour fusionner trois images ou plus, il faut chaîner plusieurs <feBlend> à la suite, chacun reprenant le résultat du précédent comme nouvelle entrée in.

Le mode normal affiche simplement in2 par-dessus in, sans aucun calcul de fusion des couleurs, comme un calque opaque posé au-dessus d'un autre. Les autres modes combinent réellement les valeurs de couleur des deux sources selon une formule mathématique propre à chacun.

Non, le support est large et ancien sur tous les navigateurs modernes, y compris sur mobile, ce qui en fait une primitive fiable à utiliser en production, contrairement à certains effets de filtre plus récents et encore inégalement pris en charge.