Why base64 image in SVG cannot be shown in Adobe Illustrator?

Question

I created an SVG: a grey rectangle filled with <pattern>. The icons in the pattern are <image> with base64 svg image. I then saved this svg as a .svg file with my code.

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 an online SVG editor.

Do you know why it is like this, or how to download this svg and correctly show it in Adobe Illustrator?

Thank you in advance.

My 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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<svg id = "mySVG" width="200" height="200" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect width="200" height="200" fill="lightgrey"/>
  <rect width="200" height="200" fill="url(#pattern)"/>
  <defs>
  <pattern id="pattern" patternUnits="userSpaceOnUse" width="40" height="40">
    <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+"></image>
  </pattern>
</defs>
</svg>

<button id="btn">Save SVG</button>

When I open mySVG.svg in the browser, it looks like this. This is what I want.

When I open mySVG.svg in the Adobe Illustrator, the icon images are not shown. We can only see the background.

Answer 1

Because Base64 ain't a vector image format those editors can handle

• So you decode the Base64 string to SVG with: https://www.base64decode.org

• Then clean the bloated SVG with: https://jakearchibald.github.io/svgomg

• (optional) Edit the d-path with: https://yqnn.github.io/svg-path-editor

• Manually clean the SVG, and you end up with:

<svg width="600" height="180">
  <defs>
    <pattern id="carrot" patternUnits="userSpaceOnUse" width="50" height="50">
     <path fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 
                                9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 
                                2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 
                                2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="lightgreen"/>
  <rect width="100%" height="100%" fill="url(#carrot)"/>
</svg>