如何在SVG中嵌入HTTPS图片并让Illustrator正常打开？

核心问题分析 #

Illustrator不支持加载SVG中的HTTPS外部图片链接，且对base64嵌入的图片有严格格式要求；Canvas方式生成的是位图，无法保留SVG的矢量+嵌入图片结构。

可行解决方案 #

方案1：通过Illustrator原生流程导出（最可靠） #

• 打开Illustrator，通过文件>置入或直接拖入的方式导入需要嵌入的图片
• 在链接面板中选中图片，点击「嵌入」按钮将图片嵌入文档
• 完成设计后，选择文件>导出>导出为，指定SVG格式
• 在导出设置中勾选「嵌入图像」选项，其余参数保持默认即可

方案2：手动调整SVG代码实现嵌入（代码层面） #

如果需要手动编写或修改SVG代码，需满足以下要求：

1. 规范<image>标签属性
   • 保留xmlns:xlink命名空间，同时使用xlink:href和href属性（兼容新旧SVG规范）
   • 确保width、height属性与实际图片尺寸匹配
2. 生成兼容Illustrator的base64嵌入代码
   • 优先使用PNG/JPG格式的图片（Illustrator对WebP等格式支持较差）
   • 生成base64时指定正确的MIME类型，例如PNG格式为data:image/png;base64,，JPG格式为data:image/jpeg;base64,
   • 示例代码：

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
       <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkXSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVBgZBcHPcsAABAAAQ+zWF8wAAAAASUVORK5CYII=" 
             href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkXSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVBgZBcHPcsAABAAAQ+zWF8wAAAAASUVORK5CYII=" 
             width="50" height="50"/>
     </svg>
     

3. 注意事项
   • 避免嵌入过大的base64图片（Illustrator对超大嵌入图片的解析可能出错）
   • 确保SVG代码无语法错误，比如引号配对、标签闭合

方案3：使用专业工具转换SVG #

借助SVG处理工具（如SVGOMG）优化SVG，选择「嵌入图像」选项，工具会自动处理出兼容Illustrator的嵌入格式。

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