<svg width="8cm" height="5cm" viewBox="0 0 800 500">
     <title>Example feColorMatrix - Examples of feColorMatrix operations</title>
     <desc>Five text strings showing the effects of feColorMatrix: an unfiltered text string acting as a reference, use of the feColorMatrix matrix option to convert to grayscale, use of the feColorMatrix saturate option, use of the feColorMatrix hueRotate option, and use of the feColorMatrix luminanceToAlpha option.</desc>
     <defs>
          <linearGradient id="MyGradient" 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" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
               <feColorMatrix type="matrix" in="SourceGraphic" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0"/>
          </filter>
          <filter id="Saturate40" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
               <feColorMatrix type="saturate" in="SourceGraphic" values="40%"/>
          </filter>
          <filter id="HueRotate90" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
               <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
          </filter>
          <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
               <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
               <feComposite in="SourceGraphic" in2="a" operator="in"/>
          </filter>
     </defs>
     <rect style="fill:none; stroke:blue" x="1" y="1" width="798" height="498"/>
     <g style="font-family:Verdana; font-size:75; font-weight:bold; fill:url(#MyGradient)">
          <rect x="100" y="0" width="500" height="20"/>
          <text x="100" y="90">Unfiltered</text>
          <text x="100" y="190" style="filter:url(#Matrix)">Matrix</text>
          <text x="100" y="290" style="filter:url(#Saturate20)">Saturate</text>
          <text x="100" y="390" style="filter:url(#HueRotate90)">HueRotate</text>
          <text x="100" y="490" style="filter:url(#LuminanceToAlpha)">Luminance</text>
     </g>
</svg>