SVG 转 PNG 前为什么要清理脚本和外部资源：安全处理与兼容性边界

SVG 看起来像图片，实际上是一份可以包含 XML、样式、引用和交互行为的文档。把它直接塞进网页或转换器，风险和兼容性都比普通 PNG 更复杂。

所以，SVG 转 PNG 前清理脚本和外部资源，不是多余步骤。它解决的是“输入文件能不能被安全、可重复地当作图形读取”，同时也意味着某些依赖外部环境的视觉内容会被移除。

能显示，不等于能安全交付

图注：先清理不可信内容，再核对视觉副作用。

图叮的SVG 转图片工具在栅格化前会清理脚本、事件处理器、foreignObject 和未内联的外部资源。工具页面也明确提醒：依赖外部文件的 SVG 可能因此缺少部分内容，应先把资源内联。

这里要区分两个目标：

• 安全处理：不让输入 SVG 把脚本、事件和不可控网络资源带进转换流程；
• 视觉还原：尽量保留源文件里真正属于图稿的形状、颜色和必要图片。

安全处理不是“保证所有 SVG 都长得一模一样”。如果源文件把重要图片放在外部 URL，清理后少一块是可预期的副作用，不是偶发 bug。

四类内容为什么要被关注

脚本和事件处理器

script、onclick 等内容属于行为，不是静态图形。转成 PNG 时不需要执行它们；保留它们只会扩大输入面，也让“同一份文件每次转换是否得到同样结果”更难判断。

foreignObject

它可以把 HTML 或其他非 SVG 内容嵌进图形。不同浏览器和渲染器对它的支持并不一致，里面还可能带有外部样式或脚本。若交付目标是稳定的 PNG、JPG 或 WebP，依赖它的布局就应该先在设计软件中转成纯 SVG 图形或位图。

外部图片、字体和样式

外链资源依赖网络、权限和 CORS。今天能看到，换一台电脑或换一个离线环境可能就丢失。把必要图片内嵌或转成路径，可以提高可复现性；但内嵌也会增加文件体积，仍需检查工具的 2MB 源码限制。

不安全的样式和引用

样式里的协议 URL、事件属性和跨文件引用，不应被当作普通装饰。清理后如果阴影、滤镜或图案变化，应该回源文件明确哪些效果是必须的，再选择自包含的实现方式。

清理后出现缺图，怎么修而不是怎么绕

不要改用另一个随机转换器，也不要把清理规则关掉。按下面路径处理：

1. 保存原始 SVG，记录缺失的是文字、图片、滤镜还是布局；
2. 在设计软件中把必要外部图片内嵌，或把文字转成路径；
3. 删除不必要的脚本和交互，仅保留静态图形；
4. 重新导出一份自包含 SVG；
5. 在工具中预览 PNG，再和原稿逐区域对照。

如果只是想清理 SVG 源码、减少冗余并保留矢量文件，可以先使用SVG 压缩与清理工具，但清理后仍要重新打开和检查。

工具能保证什么，不能保证什么

当前工具在浏览器本地读取并处理 SVG，输入可以是文件、源码或允许 CORS 的链接；源文件超过 2MB 会被拒绝。它会输出 PNG、JPG 或 WebP，JPG 需要明确背景色。

它能做的是：在固定的浏览器流程里清理已声明的危险内容，检查 SVG 结构和尺寸，再进行本地栅格化。它不能替你做完整恶意文件鉴定、字体授权审查、品牌版权确认或印刷色彩认证。

因此，安全清理是生产链的一道边界，不是最终验收的全部。团队仍应保留原稿、清理后稿和最终导出文件，必要时记录哪类资源被移除。

交付前的最小验收

• 清理后的 SVG 能解析，viewBox 或宽高有效；
• 文字、Logo 轮廓和必要图片没有缺失；
• PNG 透明边缘在浅色、深色背景都正常；
• JPG 背景色符合交付要求；
• 输出尺寸和文件体积符合目标渠道；
• 最终文件打开时不依赖原作者电脑上的网络、字体或脚本。

把“能打开”升级成“可复现、可解释、可回看”，才是清理的意义。现在可以在SVG 转图片用一份副本先预览，再把确认过的自包含文件交给团队或下游系统。