Tryit Editor v1.4

Source Code:
<?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>
Your Result:
W3Schools.com - Try it yourself