为何含Base64格式SVG图片的SVG在Adobe Illustrator中无法显示？

问题描述 #

创建的SVG文件主体为填充<pattern>的灰色矩形，pattern中的图标通过Base64编码SVG图片的<image>元素实现。该文件在浏览器和在线SVG编辑器中可正常显示，但使用Adobe Illustrator或Figma打开时，图标消失，仅灰色背景正常显示。

问题原因 #

1. 编辑器兼容性限制：浏览器SVG渲染引擎对嵌套SVG（尤其是通过<image>引用Base64编码SVG的场景）支持更宽松，而Illustrator、Figma等矢量编辑器的解析逻辑更严格，无法正确处理pattern上下文内的Base64 SVG image元素，导致图标无法被识别渲染。
2. 属性标准兼容性问题：使用旧版xlink:href属性引用资源，部分编辑器对该属性在pattern内部的支持不完善，SVG2标准的href属性兼容性更好。
3. Base64内容冗余：编码后的SVG包含大量空<g>元素，增加了编辑器解析复杂度，可能触发解析错误。

解决方法 #

方法一：将Base64 SVG直接内联到pattern中 #

将Base64编码的SVG解码后，直接把矢量代码放入<pattern>内部，替换原有的<image>元素，让编辑器直接解析矢量内容：

修改后的SVG代码：

<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">
      <!-- 解码后简化的SVG矢量内容 -->
      <path d="M30.074,13.089c-1.074-2.778-4.827-3.94-7.368-2.479l-0.465,0.269c-0.221-3.605,0.07-6.918,0.567-10.494L20.032,0c-0.435,3.133-0.733,6.159-0.659,9.324l-4.509-7.81L12.44,2.908l4.461,7.738c-2.691-1.658-5.446-2.873-8.399-3.997L7.503,9.271c3.397,1.293,6.377,2.66,9.386,4.698l-0.456,0.264c-2.343,1.329-3.332,4.694-1.974,7.045c0.329,0.571,0.927,1.198,1.346,1.691l5.217-3.026l1.239,2.139l-4.83,2.802l7.58,8.919l5.456-3.208l1.249,2.13l-5.081,2.988L38.778,50l3.719-2.138c-3.185-8.183-5.903-16.497-8.784-24.783l-4.87,2.86l-1.249-2.13l5.286-3.106C31.98,18.159,31.052,15.62,30.074,13.089" fill="#000"/>
    </pattern>
  </defs>
</svg>

方法二：替换xlink:href为标准href属性 #

将<image>的xlink:href改为SVG2标准的href属性，提升编辑器兼容性：

<image x="0" y="0" width="40" height="40" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHZlcnNpb249IjEuMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkxheWVyXzE4Ij48cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC4wNzQsMTMuMDg5Yy0xLjA3NC0yLjc3OC00LjgyNy0zLjk0LTcuMzY4LTIuNDc5bC0wLjQ2NSwwLjI2OSAgIGMtMC4yMjEtMy42MDUsMC4wNy02LjkxOCwwLjU2Ny0xMC40OTRMMjAuMDMyLDBjLTAuNDM1LDMuMTMzLTAuNzMzLDYuMTU5LTAuNjU5LDkuMzI0bC00LjUwOS03LjgxTDEyLjQ0LDIuOTA4bDQuNDYxLDcuNzM4ICAgYy0yLjY5MS0xLjY1OC01LjQ0Ni0yLjg3My04LjM5OS0zLjk5N0w3LjUwMyw5LjI3MWMzLjM5NywxLjI5Myw2LjM3NywyLjY2LDkuMzg2LDQuNjk4bC0wLjQ1NiwwLjI2NCAgIGMtMi4zNDMsMS4zMjktMy4zMzIsNC42OTQtMS45NzQsNy4wNDVjMC4zMjksMC41NzEsMC45MjcsMS4xOTgsMS4zNDYsMS42OTFsNS4yMTctMy4wMjZsMS4yMzksMi4xMzlsLTQuODMsMi44MDJsNy41OCw4LjkxOSAgIGw1LjQ1Ni0zLjIwOGwxLjI0OSwyLjEzbC01LjA4MSwyLjk4OEwzOC43NzgsNTBsMy43MTktMi4xMzhjLTMuMTg1LTguMTgzLTUuOTAzLTE2LjQ5Ny04Ljc4NC0yNC43ODNsLTQuODcsMi44NmwtMS4yNDktMi4xMyAgIGw1LjI4Ni0zLjEwNkMzMS45OCwxOC4xNTksMzEuMDUyLDE1LjYyLDMwLjA3NCwxMy4wODkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4="/>

方法三：优化Base64 SVG内容 #

解码Base64内容，移除所有空的<g>元素，简化SVG结构后重新编码为Base64，再替换原引用内容。

效果对比 #

• 浏览器中显示效果：
• Adobe Illustrator中修复后显示效果：图标将正常显示，与浏览器效果一致

内容的提问来源于stack exchange，提问作者Hesper