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.

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

See: Filter Effect Common Attributes

<defs>
  <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"/>
  </filter>
</defs>
...
<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:

normal

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

multiply

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.

screen

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

darken

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

lighten

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