feMerge (SVG Filter Effect)

By mbystedt on Apr 27, 2014, 3:57:43 PM

The merge filter effect is used to merge named filter results or the predefined one like 'SourceGraphic' or 'SourceAlpha' together. Basically, it exists to allow the layering of different effects. One use is to put the original source graphic on top of an effect like a shadow.

This is one of the few truly simple effects. The feMerge effect defines no new attributes. To layer the output, the tag feMergeNode is used. One or more or these elements are placed inside the feMerge tag. The feMergeNode tag can only ever appear as an immediate child of a feMerge tag. The node tag has an 'in' attribute that takes any named filter effect result.

Takes a named result or a predefined option (SourceGraphic, SourceAlpha, etc).

As is probably obvious, the merged output is rendered first to last. This is the same order as all other graphical elements in SVG. See: Layering Shapes in SVG

  <filter id="dropShadow">
    <!-- Blur the source alpha to make a nice shadow. -->
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <!-- Move the shadow over a bit. -->
    <feOffset in="blur" dx="3" dy="3" result="offsetBlur"/>
    <!-- Put everything together. Blur then graphic. -->
      <feMergeNode in="offsetBlur"/>
      <feMergeNode in="SourceGraphic"/>
<text x="320" y="35" text-anchor="middle" fill="green" stroke="black" 
  font-size="40" filter="url(#dropShadow)">
  Look at my beautiful shadow.</text>
Example 1. A drop shadow. See the use of feMerge to combine the effect and the source graphic. (Download)
offsetBlur + SourceGraphic Merge

See: Filter Effect Common Attributes

There is no live demo as this effect has no options to showcase.