<feMerge>

La balise <feMerge> est une primitive de filtre SVG utilisée pour combiner plusieurs sources graphiques en une seule.

Elle est souvent utilisée pour superposer des effets appliqués par d'autres primitives, permettant ainsi de créer des rendus visuels complexes et dynamiques.

Structure et syntaxe de la balise <feMerge>

Syntaxe

La balise <feMerge> s'utilise toujours avec la balise <svg>. Comme il s'agit d'une balise permettant de créer un filtre, elle est également toujours utilisée avec la balise <filter>.

Prenons un exemple simple :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="mergeExample">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
            <feOffset in="blur" dx="10" dy="10" result="offsetBlur" />
            
            <feMerge>
                <feMergeNode in="offsetBlur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>

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

Dans cet exemple :

• <feGaussianBlur> crée un flou.
• <feOffset> décale le flou.
• <feMerge> combine le décalage avec l'élément graphique d'origine pour créer un effet d'ombre douce.

Voici notre rendu :

Structure des nœuds

La balise <feMerge> contient un ou plusieurs nœuds <feMergeNode>, chacun spécifiant une source graphique à fusionner.

L'ordre des nœuds détermine leur superposition.

<feMerge>
    <feMergeNode in="source1" />
    <feMergeNode in="source2" />
    <feMergeNode in="source3" />
</feMerge>

Exemple avancé

Voici un exemple où plusieurs filtres sont fusionnés pour créer une ombre colorée :

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="coloredShadow">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
            <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
            <feFlood flood-color="red" result="redShadow" />
            <feComposite in2="offsetBlur" operator="in" in="redShadow" result="coloredBlur" />
        
            <feMerge>
                <feMergeNode in="coloredBlur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>

    <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#coloredShadow)" />
</svg>

Dans cet exemple :

• <feGaussianBlur> crée notre flou gaussien ;
• <feFlood> remplit l'ombre d'une couleur (rouge) ;
• <feComposite> associe la couleur au flou ;
• <feMerge> combine l'ombre colorée et l'élément original.

Voici notre résultat :

Attribut

Il n'y a aucun attribut spécifique à la balise <feMerge>.

Bonnes pratiques

Utilisez <feMerge> pour fusionner des effets complexes, comme des ombres multiples ou des couches d'éléments. N'oubliez pas que l'ordre des <feMergeNode> est important pour contrôler la superposition des effets.

Compatibilité des navigateurs

La balise <feMerge> est prise en charge par la majorité des navigateurs modernes :