The feBlend SVG element specifies blending two objects using commonly used imaging software blending modes.
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 blending 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)
mode
Specifies the blend mode.
Value
Default
no-composite
Specifies the blend mode must not apply alpha compositing.
Value
Default
in
BackgroundAlpha
BackgroundImage
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend 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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="SourceGraphic" in2="StrokePaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
mode
<blend-mode>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="red" flood-opacity="0.5" result="myresult1"/>
<feFlood flood-color="blue" flood-opacity="0.5" result="myresult2"/>
<feBlend in="myresult1" in2="myresult2" mode="multiply"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
no-composite
no-composite
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="red" flood-opacity="0.5" result="myresult1"/>
<feFlood flood-color="blue" flood-opacity="0.5" result="myresult2"/>
<feBlend in="myresult1" in2="myresult2" mode="multiply" no-composite="no-composite"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
Internal
External