title: How do I use the luminance in an image to control the opacity of a fill in SVG
body: <p>I would like to use an <a href="http://lightartpixel.com/FILTER_pencil.png" rel="nofollow">image</a> to control the alpha channel of a fill in SVG.</p>
  
  <p>I can't figure out the right way to combine SourceGraphic with the alpha. Here is what I have right now:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300"&gt;
      &lt;defs&gt;
         &lt;filter id="FILTER_pencil" primitiveUnits="userSpaceOnUse" filterUnits="objectBoundingBox" width="100%" height="100%"&gt;
           &lt;feImage result="result1" width="128" height="128" xlink:href="http://lightartpixel.com/FILTER_pencil.png"/&gt;
           &lt;feColorMatrix type="luminanceToAlpha" result="alpha" in="result1"/&gt;
           &lt;feComposite operator="atop" in="alpha" in2="SourceGraphic"&gt;&lt;/feComposite&gt;
         &lt;/filter&gt;
       &lt;/defs&gt;
       &lt;rect fill="#5d496a" stroke="#5d496a" filter="url(#FILTER_pencil)" width="100" height="100"/&gt;
    &lt;/svg&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/combinatorial/4EhPh/2/" rel="nofollow">Here</a> is a jsfiddle that shows the current output. Which seems to be combining the luminance with the fill color.</p>