feMergeNode

The <feMergeNode> tag is used as the input of the <feMerge> tag, an SVG primitive. Its role is to specify an entry (or multiple entries) that will be combined with others to produce a unique visual effect. In other words, it "merges" different filter effects into one final render.

Use <feMergeNode> to assemble multiple filter effects into a single image seamlessly.

Structure and syntax of the <feMergeNode> tag

Structure

Imagine you want to create a drawing that combines a shadow effect and a color blend. The <feMergeNode> tag allows you to combine these effects like a shadow and a color blend.

Here is a simple example:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="mergeExample">
            <feFlood flood-color="red" />
            <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>

    <rect x="20" y="20" width="160" height="160" fill="blue" filter="url(#mergeExample)" />
</svg>

In this example:

• <feFlood> creates a red flood.
• <feMergeNode> combines this flood with the original image (the blue rectangle).

Here is our result:

Main attributes of <feMergeNode>

Best practices

Always combine your <feMergeNode> tag with <feComposite> to control how the color is applied.

Also, always remember to assign a result attribute to be able to reuse this primitive in more complex filters.

Browser compatibility

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