title: feImage with internal source
body: <h1>Goal</h1>
  
  <p>I'm trying to write a SVG filter to render a wave lighting <em>atop</em> a given shape. So inside that shape I want the waves to apply, but I want no visible effect outside that shape. As far as I understand, I cannot use the same image source both for the hight map used for the waves and as the target domain for an <a href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement" rel="noreferrer"><code>atop</code> composition</a>. So I thought a <a href="http://www.w3.org/TR/SVG11/filters.html#feImageElement" rel="noreferrer"><code>&lt;feImage&gt;</code></a> element might be used to obtain the height map from a separate gradient-filled object. But so far I haven't succeeded in getting that object visible inside the filter effect area.</p>
  
  <h1>First attempt</h1>
  
  <p>Code I have so far:</p>
  
  
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg version="1.1" width="512" height="512"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;defs&gt;
      &lt;radialGradient id="waveFill" r="5%" spreadMethod="reflect"&gt;
        &lt;stop offset="0%" stop-opacity="1.00"/&gt;
        &lt;stop offset="20%" stop-opacity="0.90"/&gt;
        &lt;stop offset="40%" stop-opacity="0.65"/&gt;
        &lt;stop offset="60%" stop-opacity="0.35"/&gt;
        &lt;stop offset="80%" stop-opacity="0.10"/&gt;
        &lt;stop offset="100%" stop-opacity="0.00"/&gt;
      &lt;/radialGradient&gt;
      &lt;rect id="waveImg" x="-210" y="-105" width="420" height="210"
            stroke="none" fill="url(#waveFill)"/&gt;
      &lt;filter id="waveFilter"&gt;
        &lt;feImage xlink:href="#waveImg" result="waves"/&gt;
        &lt;!-- feSpecularLighting and so on will be added later on --&gt;
        &lt;feComposite operator="atop" in="waves" in2="SourceImage"/&gt;
      &lt;/filter&gt;
    &lt;/defs&gt;
    &lt;g transform="translate(256 256)"&gt;
      &lt;!-- use xlink:href="#waveImg"/ works --&gt;
      &lt;ellipse rx="200" ry="100" fill="#0000ff" stroke="none"
               style="filter:url(#waveFilter)"/&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <h1>Relevant documentation</h1>
  
  <p>The documentation for <code>&lt;feImage&gt;</code> states:</p>
  
  <blockquote>
    <p>If the <a href="http://www.w3.org/TR/SVG11/filters.html#feImageElementHrefAttribute" rel="noreferrer">‘xlink:href’</a> references a stand-alone image resource such as a JPEG, PNG or SVG file, then the image resource is rendered according to the behavior of the <a href="http://www.w3.org/TR/SVG11/struct.html#ImageElement" rel="noreferrer">‘image’</a> element; otherwise, the referenced resource is rendered according to the behavior of the <a href="http://www.w3.org/TR/SVG11/struct.html#UseElement" rel="noreferrer">‘use’</a> element. In either case, the current user coordinate system depends on the value of attribute <a href="http://www.w3.org/TR/SVG11/filters.html#FilterElementPrimitiveUnitsAttribute" rel="noreferrer">‘primitiveUnits’</a> on the <a href="http://www.w3.org/TR/SVG11/filters.html#FilterElement" rel="noreferrer">‘filter’</a> element.</p>
  </blockquote>
  
  <h1>Second attempt</h1>
  
  <p><a href="http://www.w3.org/TR/SVG11/struct.html#UseElement" rel="noreferrer"><code>use</code></a> instead of <a href="http://www.w3.org/TR/SVG11/struct.html#ImageElement" rel="noreferrer"><code>image</code></a> looks all right to me, but I'm unsure how the rectangular region is defined in this case. The <a href="http://www.w3.org/TR/SVG11/struct.html#UseElement" rel="noreferrer">documentation for <code>use</code></a> seems to indicate that in such a case (the referenced element is neither a <code>symbol</code> nor a <code>svg</code> element), the <code>width</code> and <code>height</code> properties are irrelevant, but how does that describe a rectangular region? I also thought that perhaps a change of primitive units would help. Or boxing the image inside a <a href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement" rel="noreferrer"><code>symbol</code></a>. So my second attempt was the following one:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg version="1.1" width="512" height="512"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;defs&gt;
      &lt;radialGradient id="waveFill" r="5%" spreadMethod="reflect"&gt;
        &lt;stop offset="0%" stop-opacity="1.00"/&gt;
        &lt;stop offset="20%" stop-opacity="0.90"/&gt;
        &lt;stop offset="40%" stop-opacity="0.65"/&gt;
        &lt;stop offset="60%" stop-opacity="0.35"/&gt;
        &lt;stop offset="80%" stop-opacity="0.10"/&gt;
        &lt;stop offset="100%" stop-opacity="0.00"/&gt;
      &lt;/radialGradient&gt;
      &lt;symbol viewBox="0 0 100 100" id="waveImg" preserveAspectRatio="none"&gt;
        &lt;rect width="100" height="100" stroke="none" fill="url(#waveFill)"/&gt;
      &lt;/symbol&gt;
      &lt;filter id="waveFilter" primitiveUnits="objectBoundingBox"&gt;
        &lt;feImage xlink:href="#waveImg" x="0" y="0" width="100%" height="100%"
                 preserveAspectRatio="none" result="waves"/&gt;
        &lt;!-- feSpecularLighting and so on will be added later on --&gt;
        &lt;feComposite operator="atop" in="waves" in2="SourceImage"/&gt;
      &lt;/filter&gt;
    &lt;/defs&gt;
    &lt;g transform="translate(256 256)"&gt;
      &lt;!-- use xlink:href="#waveImg"/ works --&gt;
      &lt;ellipse rx="200" ry="100" fill="#0000ff" stroke="none"
               style="filter:url(#waveFilter)"/&gt;
      &lt;ellipse rx="200" ry="100" fill="none" stroke="#ff0000"/&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Still no image visible. What am I doing wrong?</p>
  
  <h1>Core question</h1>
  
  <p>How can I use a fragment of my SVG file as a bump map for lighting, without also using it as the <a href="http://www.w3.org/TR/SVG11/filters.html#SourceGraphic" rel="noreferrer"><code>SourceGraphic</code></a> of my filter?</p>
  
  <h1>Rasterizer</h1>
  
  <p>This image isn't intended for web deployment, but will be rasterized locally. So browser compatibility isn't much of an issue; if the thing renders correctly under either Inkscape or rsvg-convert, that's enough for me.</p>