<feMergeNode>

<feMergeNode> is a child of <feMerge> that names one layer to stack.

Each <feMergeNode> references a named filter result via its in attribute, and the parent <feMerge> layers them in document order, bottom to top.

On its own, <feMergeNode> does nothing - it only has meaning inside a <feMerge>. Think of <feMerge> as an ordered list and each <feMergeNode> as an entry in that list pointing at an earlier filter result.

• DOM object: SVGFEMergeNodeElement
• SVG2 spec: https://www.w3.org/TR/filter-effects/#elementdef-femergenode

Mini example: which node is bottom, which is top?

<feMerge>
  <feMergeNode in="shadow" />         <!-- first child  -> BOTTOM layer -->
  <feMergeNode in="SourceGraphic" />  <!-- last child   -> TOP layer    -->
</feMerge>

The first <feMergeNode> in document order is painted first and ends up at the bottom of the final composite. Each subsequent <feMergeNode> is painted on top of the previous one using source-over compositing.

Full example: drop shadow

The most common place you will see <feMergeNode> is inside a drop-shadow filter. (This is the same example shown on the <feMerge> page - duplicated here so you can read either page stand-alone.)

<filter id="DropShadow" x="-30%" y="-30%" width="160%" height="160%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
  <feOffset    in="blur"        dx="4" dy="4" result="offsetBlur" />
  <feMerge>
    <feMergeNode in="offsetBlur" />      <!-- bottom: the soft offset shadow -->
    <feMergeNode in="SourceGraphic" />   <!-- top:    the original graphic   -->
  </feMerge>
</filter>

The two <feMergeNode> children are the entire reason <feMerge> exists: the first one points at the blurred, offset shadow image built earlier in the filter chain; the second points at the unfiltered source. <feMerge> then paints them in that order, bottom to top, so the shape hides most of the shadow and only the offset portion shows.

Attributes

Attribute	Default	Description
in	previous	Filter result name or implemented standard source keyword.

Implemented standard source keywords are SourceGraphic, SourceAlpha, FillPaint, and StrokePaint.

Note

SVG 1.1 BackgroundImage and BackgroundAlpha filter inputs are not implemented; see Unsupported SVG 1.1 Features.

Unlike most filter primitives, <feMergeNode> does not inherit the standard filter primitive attributes. It has no x, y, width, height, or result attribute - its sole job is to point at an existing result and contribute it as a layer to the parent <feMerge>.

See also

<feMerge> - the parent element. <feMergeNode> is only valid as a direct child of <feMerge> and has no effect outside that context.