SVG Basic

SVG HOME
SVG Intro
SVG Example
SVG in HTML

SVG Shapes

SVG Rectangle
SVG Circle
SVG Ellipse
SVG Line
SVG Polygon
SVG Polyline
SVG Path
SVG Text
SVG Stroking

SVG Filters

SVG Filters Intro
SVG Blur Effects
SVG Drop Shadows

SVG Gradients

SVG Linear
SVG Radial

SVG Examples

SVG Reference

SVG feBlend Element

Complete SVG Reference

Definition and Usage

The SVG feBlend element is used to composite two objects together using different blending modes.

The mode attribute defines the image blending mode. The mode attribute can take one of the following values:

normal (default)
multiply
screen
darken
lighten

The in2 attribute defines the second input image to the blending operation. This attribute can take on the same values as the in attribute.

Example 1

The following example shows examples of the five blend modes.

Copy the following code into Notepad and save the file as "feblend_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="300" y2="0">
  <stop offset="0" style="stop-color:#000000"/>
  <stop offset=".67" style="stop-color:#ffff00"/>
  <stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<filter id="normal">
  <feBlend mode="normal" in2="BackgroundImage"/>
</filter>
<filter id="multiply">
  <feBlend mode="multiply" in2="BackgroundImage"/>
</filter>
<filter id="screen">
  <feBlend mode="screen" in2="BackgroundImage"/>
</filter>
<filter id="darken">
  <feBlend mode="darken" in2="BackgroundImage"/>
</filter>
<filter id="lighten">
  <feBlend mode="lighten" in2="BackgroundImage"/>
</filter>
</defs>

<g style="enable-background:new">
<rect x="40" y="20" width="300" height="450"
style="fill:url(#MyGradient)"/>
<g style="font-size:75;fill:#888888;fill-opacity:.6">
<text x="50" y="90" style="filter:url(#normal)">Normal</text>
<text x="50" y="180" style="filter:url(#multiply)">Multiply</text>
<text x="50" y="270" style="filter:url(#screen)">Screen</text>
<text x="50" y="360" style="filter:url(#darken)">Darken</text>
<text x="50" y="450" style="filter:url(#lighten)">Lighten</text>
</g>
</g>

</svg>

View example