From http://www.w3schools.com (Copyright Refsnes Data)

SVG feColorMatrix Element

SVG Reference 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:

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

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

SVG Reference Complete SVG Reference

From http://www.w3schools.com (Copyright Refsnes Data)