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 feColorMatrix Element

Complete SVG Reference

Definition and Usage

The SVG feColorMatrix element is used to apply a matrix transformation.

The type attribute defines the type of matrix operation. The type attribute can take one of the following values:

matrix
saturate
hueRotate
luminanceToAlpha

The value attribute's value depends on the value of the type attribute:

For type="matrix", values is a list of 20 matrix values
For type="saturate", values is a single real number value (0 to 1)
For type="hueRotate", values is a single one real number value (degrees)
For type="luminanceToAlpha", values is not applicable

Example 1

The following example shows examples of the four types of feColorMatrix operations.

Copy the following code into Notepad and save the file as "fecolormatrix_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="MyGrad" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="500" y2="0">
<stop offset="0" style="stop-color:#ff00ff"/>
<stop offset=".33" style="stop-color:#88ff88"/>
<stop offset=".67" style="stop-color:#2020ff"/>
<stop offset="1" style="stop-color:#d00000"/>
</linearGradient>
<filter id="Matrix">
<feColorMatrix type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
<filter id="Saturate">
<feColorMatrix type="saturate" values="0.4"/>
</filter>
<filter id="HueRotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>
<filter id="Luminance">
<feColorMatrix type="luminanceToAlpha" result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in"/>
</filter>
</defs>

<g style="font-size:50;fill:url(#MyGrad)">
<text x="50" y="60">Unfiltered</text>
<text x="50" y="120" style="filter:url(#Matrix)">Matrix
</text>
<text x="50" y="180" style="filter:url(#Saturate)">Saturate
</text>
<text x="50" y="240" style="filter:url(#HueRotate)">HueRotate
</text>
<text x="50" y="300" style="filter:url(#Luminance)">Luminance
</text>
</g>
</svg>

View example