title: Why base64 image in SVG cannot be shown in Adobe Illustrator?
body: <p>I created an SVG: a grey rectangle filled with <code>&lt;pattern&gt;</code>. The icons in the pattern are <code>&lt;image&gt;</code> with base64 svg image. I then saved this svg as a .svg file with my code.</p>
  <p>I found the .svg I got can be correctly shown in the browser.
  However, when I used Adobe Illustrator to open this .svg, the icons disappeared, only the background grey rectangle can be shown correctly. I also tried another design tool, Figma, which showed the same result as Adobe Illustrator -- only background.
  But I can open this .svg correctly in <a href="https://editor.method.ac/" rel="nofollow noreferrer">an online SVG editor</a>.</p>
  <p>Do you know why it is like this, or how to download this svg and correctly show it in Adobe Illustrator?</p>
  <p>Thank you in advance.</p>
  <p>My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var btn = document.getElementById("btn")
  btn.onclick = function(){
    console.log("save svg")
    var svgData = $("#mySVG")[0].outerHTML;
    console.log(svgData);
  var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
  var svgUrl = URL.createObjectURL(svgBlob);
  var downloadLink = document.createElement("a");
  downloadLink.href = svgUrl;
  downloadLink.download = "mySVG.svg";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  
  &lt;svg id = "mySVG" width="200" height="200" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;rect width="200" height="200" fill="lightgrey"/&gt;
    &lt;rect width="200" height="200" fill="url(#pattern)"/&gt;
    &lt;defs&gt;
    &lt;pattern id="pattern" patternUnits="userSpaceOnUse" width="40" height="40"&gt;
      &lt;image x="0" y="0" width="40" height="40"  xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHZlcnNpb249IjEuMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkxheWVyXzIzIi8+PGcgaWQ9IkxheWVyXzIyIi8+PGcgaWQ9IkxheWVyXzIxIi8+PGcgaWQ9IkxheWVyXzIwIi8+PGcgaWQ9IkxheWVyXzE5Ii8+PGcgaWQ9IkxheWVyXzE4Ij48cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC4wNzQsMTMuMDg5Yy0xLjA3NC0yLjc3OC00LjgyNy0zLjk0LTcuMzY4LTIuNDc5bC0wLjQ2NSwwLjI2OSAgIGMtMC4yMjEtMy42MDUsMC4wNy02LjkxOCwwLjU2Ny0xMC40OTRMMjAuMDMyLDBjLTAuNDM1LDMuMTMzLTAuNzMzLDYuMTU5LTAuNjU5LDkuMzI0bC00LjUwOS03LjgxTDEyLjQ0LDIuOTA4bDQuNDYxLDcuNzM4ICAgYy0yLjY5MS0xLjY1OC01LjQ0Ni0yLjg3My04LjM5OS0zLjk5N0w3LjUwMyw5LjI3MWMzLjM5NywxLjI5Myw2LjM3NywyLjY2LDkuMzg2LDQuNjk4bC0wLjQ1NiwwLjI2NCAgIGMtMi4zNDMsMS4zMjktMy4zMzIsNC42OTQtMS45NzQsNy4wNDVjMC4zMjksMC41NzEsMC45MjcsMS4xOTgsMS4zNDYsMS42OTFsNS4yMTctMy4wMjZsMS4yMzksMi4xMzlsLTQuODMsMi44MDJsNy41OCw4LjkxOSAgIGw1LjQ1Ni0zLjIwOGwxLjI0OSwyLjEzbC01LjA4MSwyLjk4OEwzOC43NzgsNTBsMy43MTktMi4xMzhjLTMuMTg1LTguMTgzLTUuOTAzLTE2LjQ5Ny04Ljc4NC0yNC43ODNsLTQuODcsMi44NmwtMS4yNDktMi4xMyAgIGw1LjI4Ni0zLjEwNkMzMS45OCwxOC4xNTksMzEuMDUyLDE1LjYyLDMwLjA3NCwxMy4wODkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZyBpZD0iTGF5ZXJfMTciLz48ZyBpZD0iTGF5ZXJfMTYiLz48ZyBpZD0iTGF5ZXJfMTUiLz48ZyBpZD0iTGF5ZXJfMTQiLz48ZyBpZD0iTGF5ZXJfMTMiLz48ZyBpZD0iTGF5ZXJfMTIiLz48ZyBpZD0iTGF5ZXJfMTEiLz48ZyBpZD0iTGF5ZXJfMTAiLz48ZyBpZD0iTGF5ZXJfOSIvPjxnIGlkPSJMYXllcl84Ii8+PGcgaWQ9IkxheWVyXzciLz48ZyBpZD0iTGF5ZXJfNiIvPjxnIGlkPSJMYXllcl81Ii8+PGcgaWQ9IkxheWVyXzQiLz48ZyBpZD0iTGF5ZXJfMyIvPjxnIGlkPSJMYXllcl8yIi8+PC9zdmc+"&gt;&lt;/image&gt;
    &lt;/pattern&gt;
  &lt;/defs&gt;
  &lt;/svg&gt;
  
  &lt;button id="btn"&gt;Save SVG&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When I open mySVG.svg in the browser, it looks like this. This is what I want.</p>
  <p><a href="https://i.stack.imgur.com/HZ9zL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZ9zL.png" alt="mySVG in the browser" /></a></p>
  <p>When I open mySVG.svg in the Adobe Illustrator, the icon images are not shown. We can only see the background.</p>
  <p><a href="https://i.stack.imgur.com/IoSKV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IoSKV.png" alt="mySVG in the Adobe Illustrator" /></a></p>