SVG 转图片后字体变样或外部图片消失：字体、链接资源和内嵌怎么查

SVG 转图片后字体变样、图标缺失，常见误区是把所有问题都归结为“浏览器不支持 SVG”。更准确的分法是三条链路：

1. 文字仍是文字，当前环境没有同名字体，于是发生字体回退；
2. SVG 依赖外部图片、样式或资源，转换前被安全清理；
3. 你输入的是一个远程 SVG 链接，但对方服务器没有允许当前页面读取的 CORS 响应。

先分清链路，再决定是改源文件、内嵌资源，还是换一种输入方式。

如果还在判断 SVG 与位图的边界，可以先看SVG 是图片吗？设计师必懂的矢量图与位图区别，再决定是否需要进入转换流程。

先把三种依赖画成一张排查图

图注：先分字体、资源和 CORS，再决定如何修源文件。

图叮的SVG 转图片工具支持上传文件、粘贴 SVG 源码和读取 SVG 链接。远程链接必须允许 CORS；如果链接读不到，可以先把文件下载到本地再上传，或直接粘贴源码。输入 SVG 源码的大小上限是 2MB。

字体变样：先确认文字有没有变成路径

SVG 里如果保存的是 <text>，它仍然依赖字体名称和渲染环境。设计软件里看到的字体，在另一个浏览器或另一台电脑上未必存在；找不到时就会回退到相近字体，字宽、字重和换行都可能变化。

交付前有两种更稳的做法：

• 需要保留文字可编辑：确认目标环境安装同名字体，并在转换前后对照字宽和行高；
• 需要视觉固定：在设计软件里把文字转成路径，再交付 SVG。

不要把“转换成功”理解成“字体完全一致”。工具负责把可读的 SVG 栅格化，不负责替你安装字体，也不判断一套品牌字体是否已经授权。

外部图片消失：看资源是不是自包含

SVG 里可能通过外部 URL 引用图片、滤镜、样式或其他资源。图叮在转换前会清理脚本、事件处理器、foreignObject 和未内联的外部资源；这是安全和可重复渲染的边界，不是随机丢图。

需要保留的图片应尽量内嵌为受支持的 data image，或把资源合并进一个自包含 SVG。合并后重新检查文件体积和源代码可读性。不要只把 URL 换成另一个公网地址：转换时仍可能被跨域、网络状态或清理规则影响。

如果目标是先清掉 SVG 源码中的冗余和危险引用，再转成图片，可以先用SVG 压缩与清理工具，但清理后必须重新预览，确认外观没有变化。

CORS 失败：它只说明“链接读取”这一关没过

远程输入的 CORS 是浏览器读取 https://...svg 响应的条件。它和 SVG 内部是否引用外链资源是两回事：

• 页面拿不到远程 SVG，属于输入链接读取失败；
• 页面拿到了 SVG，但内部图片或字体没被保留，属于文件自包含问题；
• 文件能打开，文字形状却变化，属于字体回退问题。

遇到 CORS 失败时，最省时间的路径是下载文件后上传。这样可以把“服务器是否允许跨域”从问题中移除，再单独检查文件内容。

转换前做一遍自包含检查

打开 SVG 源码或设计软件的资源面板，逐项确认：

• 文字是路径，或目标环境明确有对应字体；
• 图片没有依赖无法交付的外部 URL；
• 样式、滤镜和裁切引用在文件内可解析；
• 根节点有有效的 viewBox 或宽高；
• 文件小于工具的 2MB 源码限制；
• 如果从链接读取，服务器能返回允许 CORS 的响应。

这张清单的作用是把失败前移。不要先反复点击“转换”，等结果缺一块后再猜原因。

最终验收要看下载文件，不只看预览

生成 PNG、JPG 或 WebP 后，分别在浅色和深色背景上看一次。字体要对照字宽和关键字，外部图片要核对位置、裁切和透明边缘；最后打开下载文件确认像素尺寸和格式。

图叮在浏览器本地完成 SVG 清理与栅格化，执行和导出时需要登录。它可以帮你把可复现的自包含 SVG 转成常用图片，但不会替你解决字体授权、外部资源版权或品牌母版管理。

如果文字必须可编辑，保留 SVG；如果要把一份确认过的视觉稿交给不具备同样字体环境的团队，先把文字转路径并做一次最终 PNG/WebP 验收，再进入SVG 转图片导出。