<feMerge>

The <feMerge> tag is an SVG filter primitive used to combine multiple graphic sources into one.

It is often used to superimpose effects applied by other primitives, thus creating complex and dynamic visual results.

Structure and syntax of the <feMerge> tag

Syntax

The <feMerge> tag is always used with the <svg> tag. Just like a tag that allows you to create a filter, it is always used with the <filter> tag.

Let's take a simple example:

<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>

In this example:

• <feGaussianBlur> creates a blur from the source graphic with a stdDeviation of 5.
• <feOffset> offsets the blur to create a shadow effect.
• <feMerge> combines the shadow with the original source graphic.

Here is the result:

Structure of nodes

The <feMerge> tag contains one or more <feMergeNode> nodes, each specifying a source graphic to be merged.

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

Advanced example

Here is an example where multiple filters are combined to create a colored shadow effect:

<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>

In this example:

• <feGaussianBlur> creates a blur from the alpha of the source;
• <feOffset> offsets the blur to simulate a shadow;
• <feFlood> fills the shadow with a red color;
• <feComposite> combines the blur and the red color;
• <feMerge> combines the colored blur and the original source graphic.

Try it yourself:

Attributes of the <feMerge> tag

There are no specific attributes for the <feMerge> tag.

Best practices

To use <feMerge> effectively, avoid excessively high values of stdDeviation to prevent overly intense or subtle blurs. Do not hesitate to combine <feMerge> with other primitives for advanced visual effects: filters can accumulate in their <filter> tag! 😉

Browser compatibility

The <feMerge> tag is widely supported by modern browsers: