The feComposite SVG element specifies the combination of the two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, lighter.
Attributes
in
Specifies the input for the filter primitive.
If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
Value
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
Default
SourceGraphic (or result)
in2
Specifies the second input image to the compositing operation.
If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
Value
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
Default
SourceGraphic (or result)
k1
Specifies the first k value of the formula when the operator attribute is arithmetic .
result = k1*in*in2 + k2*in + k3*in2 + k4
Value
Default
k2
Specifies the second k value of the formula when the operator attribute is arithmetic .
result = k1*in*in2 + k2*in + k3*in2 + k4
Value
Default
k3
Specifies the third k value of the formula when the operator attribute is arithmetic .
result = k1*in*in2 + k2*in + k3*in2 + k4
Value
Default
k4
Specifies the fourth k value of the formula when the operator attribute is arithmetic .
result = k1*in*in2 + k2*in + k3*in2 + k4
Value
Default
operator
Specifies the compositing operation that is to be performed.
Value
over | in | out | atop | xor | lighter | arithmetic
Default
in
BackgroundAlpha
BackgroundImage
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="BackgroundImage" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
FillPaint
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="FillPaint" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<filter-primitive-reference>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="myresult" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
SourceAlpha
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceAlpha" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
SourceGraphic
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
StrokePaint
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="StrokePaint" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
in2
BackgroundAlpha
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="BackgroundAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
BackgroundImage
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="BackgroundImage"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
FillPaint
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="FillPaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<filter-primitive-reference>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="myresult"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
SourceAlpha
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="SourceAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
SourceGraphic
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
StrokePaint
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="StrokePaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
k1
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" k1="0.5" operator="arithmetic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
k2
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" k2="0.5" operator="arithmetic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
k3
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" k3="0.5" operator="arithmetic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
k4
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" k4="0.5" operator="arithmetic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
operator
arithmetic
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" k1="1" k2="0.5" k3="0.5" k4="0.25" operator="arithmetic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
atop
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" operator="atop"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
in
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" operator="in"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
lighter
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" operator="lighter"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
out
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" operator="out"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
over
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" operator="over"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
xor
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/HappyFace.svg"/>
<feComposite in2="SourceGraphic" operator="xor"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
Internal
External