How SVG feMerge Combines Filter Inputs

In Scalable Vector Graphics (SVG), the <feMerge> element acts as a visual compositor that aggregates multiple filter stages into a single output layer. By utilizing child <feMergeNode> elements, it stacks various intermediate graphical results and source graphics on top of one another in a precise sequence. This article explains how <feMerge> processes inputs within an SVG filter pipeline, how it uses the painter’s model to layer visuals, and when to use it over other compositing primitives.

The Role of feMerge in Filter Pipelines

SVG filters process graphics through a pipeline of filter primitives. Most primitives take one or two inputs, apply an operation (such as blurring, offsetting, or lighting), and output a transformed result.

Because filter effects often require the original graphic to remain visible over or under the modified layers—such as in drop shadows, glows, or bevels—you need a way to combine these distinct graphics. The <feMerge> element serves this exact purpose by collecting multiple visual layers and rendering them together as the final output.

The Painter’s Model and Layer Ordering

The <feMerge> primitive operates strictly on the SVG “painter’s model,” where graphics are painted onto the canvas sequentially from back to front.

Inside an <feMerge> container, each layer is declared using a <feMergeNode> child element:

• Bottom Layer: The first <feMergeNode> declared represents the background or bottom-most layer.
• Intermediate Layers: Each subsequent <feMergeNode> is rendered directly over the preceding layers.
• Top Layer: The final <feMergeNode> in the list forms the foreground or top-most visible layer.

Referencing Inputs with the in Attribute

Each <feMergeNode> uses an in attribute to specify which visual data it should render. These inputs can be:

1. Standard Source Inputs: Built-in keywords such as SourceGraphic (the original unfiltered element) or SourceAlpha (only the alpha channel of the original element).
2. Intermediate Pipeline Results: The named identifier assigned to the result attribute of any prior filter primitive in the <filter> definition (e.g., <feGaussianBlur result="blurredEffect">).

If an in attribute is omitted on a <feMergeNode>, it defaults to the output of the immediately preceding filter primitive.

How feMerge Executes in Practice

A classic example of <feMerge> in an SVG pipeline is creating a drop shadow beneath an element:

1. An <feGaussianBlur> primitive takes SourceAlpha and produces a blurred shadow, assigned the result name blurOut.
2. An <feOffset> primitive takes blurOut, shifts it along the X and Y axes, and assigns the result name shadow.
3. The <feMerge> primitive is declared with two child nodes:
   • <feMergeNode in="shadow" /> renders the offset blur in the background.
   • <feMergeNode in="SourceGraphic" /> renders the original, sharp graphic directly on top of the shadow.

feMerge vs. feComposite

While both <feMerge> and <feComposite> combine visual inputs, they serve different functions:

• <feMerge>: Designed specifically for simple “over” layering of an arbitrary number of inputs (two or more). It stacks layers without performing mathematical blend calculations between pixels.
• <feComposite>: Limited to exactly two inputs (in and in2), but allows advanced Porter-Duff compositing operations (over, in, out, atop, xor) and arithmetic pixel calculations.

When the goal is simply to flatten and display multiple processed layers together without mathematical masking or blending, <feMerge> provides the cleanest and most efficient solution in an SVG pipeline.