feComposite (SVG Filter Effect)

By mbystedt on Mar 4, 2014, 1:09:43 AM

The composite filter effect uses the Porter-Duff algorithms to combine two sources based on their alpha channels. Since this is done by pixel, the alpha channel provides the shape of the source. If it is black then the shape is there. If it is white then the shape is not there.

When two shapes (A, B) are placed on top of each pixel can have four results: Both there, only A there, only B there or neither there. The five operators (over, in, out, atop, xor) decide which source is displayed based on the first three results. If neither is there then it is always transparent. A pixel's transparency determines the degree of inclusion or exclusion.

Example 1. The four results in Porter-Duff composition. (Download)

Attribute	Comments
in2	Provides a second input to the filter effect. Functions exactly like the common 'in' attribute.
operator	Specifies the compositing mode. See below.
k1,k2,k3,k4	These four are used with 'arithmetic' operator. Default is 0.

See: Filter Effect Common Attributes

The operators are: over, in, out, atop, xor and arithmetic. If you assemble a sentence you should have a good idea what the first 5 operators do. See the examples below.

<defs>
  <filter id="compOver" x="0" y="0" width="280" height="230" filterUnits="userSpaceOnUse">
    <feImage x="0" y="40" width="150" height="150" xlink:href="bird.png" result="img1" />
    <feImage x="30" y="30" width="120" height="120" xlink:href="symbol.png" result="img2" />
    <!--  "A (in) over B (in2)" -->
    <feComposite operator="over" in="img1" in2="img2"/>
  </filter>
  <filter id="compIn" x="0" y="0" width="250" height="250" filterUnits="userSpaceOnUse">
    <feImage x="0" y="40" width="150" height="150" xlink:href="bird.png" result="img1" />
    <feImage x="30" y="30" width="120" height="120" xlink:href="symbol.png" result="img2" />
    <!--  "A (in) in B (in2)" -->
    <feComposite operator="in" in="img1" in2="img2"/>
  </filter>
  ...
  <filter id="compArith" x="0" y="0" width="250" height="250" filterUnits="userSpaceOnUse">
    <feImage x="0" y="40" width="150" height="150" xlink:href="bird.png" result="img1" />
    <feImage x="30" y="30" width="120" height="120" xlink:href="symbol.png" result="img2" />
    <feComposite operator="arithmetic" in="img1" in2="img2" k1="0" k2=".5" k3=".7" k4="0" />
  </filter>
</defs>
...
<g transform="translate(40)">
  <g filter="url(#compOver)" transform="translate(0)"></g>
  <g filter="url(#compIn)" transform="translate(200)"></g>
...
  <g filter="url(#compArith)" transform="translate(400, 210)"></g>
</g>

Example 1. Composited images. The bird is A (in) and the circular symbol is B (in2). (Download)

The arithmetic operator allows input into the following formula: result = k1*A*B + k2*A + k3*B + k4.