feBlend (SVG Filter Effect)

By mbystedt on Mar 3, 2014, 11:05:28 PM

The blend filter effect provides five ways to blend two inputs. The options are like those commonly found in any image processing software that uses layers.

Normally, you would want to blend against the background image or blend two images together. Sadly, the background is not supported as a filter input by Safari, Chrome or Firefox. Firefox disappoints further as it doesn't fully support feImage. If you just need to layer different inputs ("normal" mode) then feMerge is a better filter to use.

Provides a second input to the filter effect. Functions exactly like the common 'in' attribute.
Specifies the blending mode. See descriptions and examples below.

See: Filter Effect Common Attributes

  <filter id="blendNorm" x="0" y="0" width="280" height="230" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="180" xlink:href="nara-soni.jpg" result="img1" />
    <feImage x="50" y="40" width="200" height="180" xlink:href="onomichi.jpg" result="img2" />
    <feBlend mode="normal" in="img1" in2="img2"/>
<g filter="url(#blendNorm)" transform="translate(0)"></g>
Example 1. A blended images from Nara (in/top-left) and Onomichi (in2/bottom-right). (Download)

The modes are as follows:


This results in the simple placement of in on top of in2. The filter effect feMerge performs the same type of blend.


Multiplies the colours together. The result is always darker. Any colour times black is black. Any colour times white is the original colour. It is like drawing the images successively with marker pens.


Multiplies the inverse of the colours together. The result is always lighter.


Compares a mix of the two colours and picks the darker one.


Compares a mix of the two colours and picks the lighter one.

Related Topics