title: Consolidate two SVG feColorMatrix filter effects into one matrix?
body: <p>I'm using an SVG filter to create a blurred "dropshadow" type effect on some complex paths. </p>
  
  <pre><code>&lt;defs&gt;
      &lt;filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"&gt;
          &lt;feColorMatrix result="hueOut" in="SourceAlpha" type="hueRotate" values="340"/&gt;
          &lt;feColorMatrix result="satOut" in="hueOut" type="saturate" values="3"/&gt;
          &lt;feGaussianBlur in="satOut" stdDeviation="8"/&gt; 
          &lt;feMerge&gt; 
             &lt;feMergeNode/&gt;
             &lt;feMergeNode in="SourceGraphic"/&gt; 
          &lt;/feMerge&gt;
      &lt;/filter&gt;
  &lt;/defs&gt;
  </code></pre>
  
  <p>I arrived at the above <code>feColorMatrix</code> values purely through trial and error. (There is a peculiarly beautiful hue shift from dark to light that I never would have come up with if I were working with the matrix math alone.) Basically, I'm spinning the color wheel 340 degrees, and then I'm saturating the color using a value of 3, just before blurring it. (The spec used to be somewhat unclear on this, but trial and error has shown that values over 1 for <code>type="saturate"</code> saturate the image and values below 1 desaturate the image.)</p>
  
  <p>Here's the problem: I'm iterating over a massive quantity of paths, and the double matrix operation slows my machine to a halt. It crashes way too often.</p>
  
  <p>Can some matrix math guru help me work out the number for me to combine the two feColorMatrix filters above into one more efficient <code>feColorMatrix</code> filter primitive of type="matrix"? I get the gist of the <a href="http://dvcs.w3.org/hg/FXTF/raw-file/3f1fdd4a8004/filters/publish/Filters.html#feColorMatrixElement" rel="nofollow">spec</a>, but I'm in over my head here on the math side of things.</p>