title: Saving SVG containing relative paths
body: <p>I have the following inline code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
  ....
  &lt;svg width="1152" height="648" viewBox="0 0 1152 648" aria-describedby="title" id="svg"&gt;
      &lt;title id="title"&gt;Supporter Plan&lt;/title&gt;
  
      &lt;image xlink:href="../images/Image1.png" x="0" y="0" width="100%" height="100%"&gt;&lt;/image&gt;
      &lt;image xlink:href="../images/Image2.png" x="0" y="0" width="100%" height="100%"&gt;&lt;/image&gt;
  
      &lt;foreignobject x="190" y="177" width="811" height="373"&gt;
          &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
          &lt;iframe style="border: none" src="../fo.html" scrolling="no" width="100%" height="100%"&gt;
  
          &lt;/iframe&gt;
          &lt;/body&gt;
  
      &lt;/foreignobject&gt;
  &lt;/svg&gt;
  ...
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>I want to save the created image as a file. However, if I save it by creatig a link <code>var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);</code> where <code>source</code> is the svg content with the needed headers, the created file doesn't evaluate the images nor the iframe. </p>
  
  <p>How can I solve this?</p>