<svg width="350" height="100" viewBox="0 0 350 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

  <filter id="s1" filterUnits="objectBoundingBox">
  <feColorMatrix type="saturate" values="1.0"/>
  </filter>

  <filter id="satFilter" filterUnits="objectBoundingBox">
  <feColorMatrix id="saturate" type="saturate" values="/>
  </filter>


  <g id="squares">
    <rect x="0" y="0" width="30" height="30" style="fill: #f00;"/>
    <rect x="40" y="0" width="30" height="30" style="fill: #0f0;"/>
    <rect x="80" y="0" width="30" height="30" style="fill: #00f;"/>
    <rect x="120" y="0" width="30" height="30" style="fill: #ff0;"/>
    <rect x="160" y="0" width="30" height="30" style="fill: #f0f;"/>
    <rect x="200" y="0" width="30" height="30" style="fill: #0ff;"/>
  </g>
</defs>

<g style="font-size: 10pt; text-anchor: end;">
  <text x="65" y="15">Saturate</text>
  <text x="65" y="35">1.0</text>
  <text x="65" y="75">0.5</text>
</g>

<g transform="translate( 70, 10 )">
  <use xlink:href="#squares" style="filter: url(#s1);"/>
</g>

<g transform="translate(70, 50)">
  <use xlink:href="#squares" style="filter: url(#satFilter)"/>
</g>

</svg>