title: How to Bring XSL-FO External Graphic to Front
body: <p>I'm trying to overlay a logo via <code>&lt;fo:external-graphic&gt;</code> to the svg gradient header of an XSL-FO page I'm working on.</p>
  
  <pre><code>&lt;fo:block top="0mm" left="0mm" padding="0mm" margin="0mm" line-height="0mm"&gt;
      &lt;fo:external-graphic padding="0mm" margin="0mm" content-width="20mm" content-height="20mm" width="0mm" height="0mm" src="http://www.pdmagic.com/pdc/images/magic_hat.gif"/&gt;
  &lt;/fo:block&gt;
  &lt;fo:block text-align="center" intrusion-displace="none"&gt;
      &lt;fo:instream-foreign-object border="solid black 1px" content-width="10.5in" content-height="0.556in"&gt;
          &lt;svg xml:space="preserve" viewBox="0 0 850 45"&gt;
              &lt;g&gt;
                  &lt;defs&gt;
                      &lt;linearGradient id="topGrad" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad"&gt;
                          &lt;stop offset="0%" stop-color="#FFFFFF"/&gt;
                          &lt;stop offset="100%" stop-color="{$UserDefinedColor}"/&gt;
                      &lt;/linearGradient&gt;
                  &lt;/defs&gt;
                  &lt;rect x="0" y="0" width="850" height="45" style="fill: url(#topGrad); stroke: black;" /&gt;
              &lt;/g&gt;
          &lt;/svg&gt;
      &lt;/fo:instream-foreign-object&gt;
  &lt;/fo:block&gt;
  </code></pre>
  
  <p>The problem is, because the <code>&lt;fo:block&gt;</code> containing the image is before the gradient block, <a href="https://i.imgur.com/Oihk4cB.png" rel="nofollow noreferrer">it renders behind the gradient</a>. If there's a way to specify the draw-order, I imagine this would be the fastest solution.</p>
  
  <p>I've tried placing the image inside the <code>&lt;svg&gt;</code> instead, as <code>&lt;image height="45" width="40" href="http://www.pdmagic.com/pdc/images/magic_hat.gif"/&gt;</code>, but this only renders as a broken image (the same goes for .png files).</p>