SVG离线打开缺图缺字：检查外部图片、字体与自包含交付

开始前先确认

需要优先检查的一类原因是：SVG 本质上是一种基于 XML 语法的纯文本矢量标记语言，它不仅可以记录图形矢量点位，还能记录外部引用。如果文件保存时引用了外部资产而非自包含打包，一旦运行环境脱离了原有的网络地址或本地相对路径，渲染引擎便无法加载对应资源。要在交付前规避显示差异，关键在于理清外部引用机理，并在导出环节完成“自包含”检查。

核心机制：外部依赖与自包含的区别

SVG 文件要达到跨设备、跨网络稳定展现，必须处理好位图图像与文字字体这两项外部依赖。根据 MDN Web 文档，SVG 能够引用外部资源，文件可移植性需主动验证而不能假定资源已内嵌。

1. 链接图与嵌入图的区别

SVG 允许通过 <image> 标签展示光栅图片（如 PNG、JPEG）。实现方式通常有两种：

• 外部链接图：代码属性形如 href="assets/logo.png" 或引用远程 URL。这种写法文件体积很小，但强依赖原有的相对路径或网络。如果文件被单独复制到其他文件夹或离线发送，关联就会中断，导致图像区域空白。这种路径失效的机理与日常核对超链接非常相似，具体可比照 Markdown 相对路径检查指南 中关于目录层级变动引发断链的说明。
• Data URI 嵌入图：代码属性形如 href="data:image/png;base64,iVBORw..."。位图的二进制数据直接转换为 Base64 编码字符串写在文本内。即便完全脱离原始工作目录或处于断网环境，图像数据依然完整存在，是否能显示仍受查看器格式支持和安全策略影响。

2. 文本标签与字体轮廓化

在矢量绘图软件中绘制文字时，默认通常输出为 <text> 标签，并指定 font-family 属性。

• 如果接收方计算机没有安装对应的字体文件，系统渲染引擎会自动回退到备用字体（如宋体或 Arial）。
• 由于不同字体的字符宽度（Glyph Metric）与字偶间距不一致，字体回退常引发文本折行错位、超出预设边框或与背景图表相互遮挡。
• 若需减少字体依赖，可在保留可编辑原稿的前提下，把交付副本中的文字转为路径（转曲 / 轮廓化）；这也会影响文本搜索、复制和无障碍使用，使文字变成由 <path> 标签记录的固定几何矢量点。

3. 安全防范：警惕不可信脚本

SVG 支持嵌入 <script> 标签执行动态逻辑，这赋予了它交互能力，但也带来了安全暴露面。在接收或排查来自外部未知渠道的 SVG 文件时，不建议盲目运行不可信的 SVG 脚本。包含恶意 JavaScript 的 SVG 文件在部分浏览器环境中可能触发跨站脚本（XSS）或其他安全风险。排查时应优先使用纯文本编辑器查看代码结构，让提供方重新导出安全的静态副本；仅搜索或删除 script 标签不能证明文件安全。

自包含交付的排查步骤

在将 SVG 文件交付给上下游合作方之前，建议按照以下步骤进行静态核验：

[原始 SVG 文件]
       │
       ▼
1. 文本编辑器检查
   ├── 搜索 "<image"  ── 确认是否为 "data:image/..." 嵌入
   ├── 搜索 "<text"   ── 确认是否仍包含未转曲文本
   └── 搜索 "<script" ── 确认是否存在非预期活动脚本
       │
       ▼
2. 缺失项处理
   ├── 外部图片 ──> 在矢量软件中选择“嵌入图片”或转换为 Base64
   └── 外部字体 ──> 在矢量软件中执行“创建轮廓 / 转曲”
       │
       ▼
3. 脱机模拟验证
   └── 复制到独立目录并断网打开，比对渲染效果

1. 源码检索外部图片：使用文本编辑器（如 VS Code、Notepad++）打开 .svg 文件，全局搜索 <image。检查其 href 或 xlink:href。如果属性值以 http://、https:// 或本地文件名（如 images/banner.jpg）开头，说明它属于外部链接图；若以 data:image/ 开头，则已内嵌。
2. 源码检索未转曲文本：全局搜索 <text。如果能搜出大量业务文案及 font-family 声明，说明文字仍是实时文本，存在换机显示异常的可能。
3. 排查潜在脚本：搜索 <script。日常交付的静态插图与图表通常不需要脚本控制，若发现非预期活动内容，先向提供方核对；还需考虑事件属性、远程引用等依赖。
4. 重新导出并归档：在 Illustrator、Inkscape 等矢量工具中打开原工程，全选文字执行“创建轮廓”（Create Outlines），并对位图执行“嵌入”（Embed）。导出时选择生成自包含版本，并遵循规范的文件版本管理。关于多种格式协同归档的标准，可参考 图像交付版本规范 进行分类沉淀。

常见异常表现与处理决策表

假设案例分析：业务报表图表的跨端漂移

为了清晰说明该问题在实际工作中的影响，我们看一个明确的假设案例：

某团队负责制作一份季度交付报告，设计人员在一台安装了“专业品牌黑体”的电脑上绘制了结构图 overview_chart.svg。该图表中包含一个右下角的装饰徽标（通过拖入本地 ../assets/logo.png 放置），以及若干指标说明文字。

当设计人员将该 .svg 文件单独发给项目经理并在无网会议平板上展示时：

1. 徽标丢失：由于 logo.png 未随同发送，SVG 的相对路径无法寻址，徽标位置显示为空白框。
2. 文字折行截断：平板电脑并未预装“专业品牌黑体”，自动回退至默认黑体，字符宽度发生变化，导致两行关键说明文字被顶出容器边框之外，遮挡了下方的柱状图节点。

修复方案：设计人员调出原工程，将位图执行“嵌入”，使图片数据转入代码；同时选中全部文本图层执行“创建轮廓”，将文字固化为矢量路径。重新导出的 SVG 移入脱网设备后，再在目标平板上逐项比对；不能仅凭转曲与嵌入便宣称显示完全一致。

权衡考量与工具边界

虽然自包含交付能解决兼容性问题，但在实际应用中需要权衡以下限制：

• 文件体积膨胀：将位图转换为 Base64 编码后，文本数据量通常会增加约 33%。如果在 SVG 中嵌入了数张高分辨率照片，文件可能迅速膨胀至数十兆字节，失去矢量图轻量的优势，并可能导致解析变慢。
• 可编辑性丧失：文字一旦执行轮廓化转换为 <path>，后续就无法像普通文字那样直接双击光标修改错别字或调整文字属性。因此，务必妥善保留包含未转曲文字的原稿工程文件。
• 工具边界：AI Lab 基础工具不提供 SVG 专业转曲或完整安全审计；这些操作需由适当的软件和提供方处理。

交付前的下一步操作

为减少交付显示差异，建议建立严谨的交付闭环：

1. 保留原稿：在本地备份一份未转曲、未合并图层的矢量工程母版（如 .ai、.eps 或源码备份），以便后续文案修订。
2. 生成自包含副本：仅将导出的交付件执行嵌入与转曲操作，并重命名为独立交付副本。
3. 本地离线验证：保留原稿，再按相关基础教程完成核对；可尝试将生成的 SVG 文件置于一个新建的空白临时文件夹内，在完全断网的环境下双击用浏览器打开，核对是否存在任何图标裂开或文字位移，确认无误后再行流转。