安全与导出
用户手里的 .svg 不是「无害矢量图」。它是一份 XML 文档:inline 进页面后,和 HTML 同等 XSS 面。导出则是把 文档 序列化,或把它投影成位图——投影会丢节点、丢外链、还可能把 canvas 弄脏。
Canvas 体系谈的是 origin-clean 和读像素。SVG 这边先谈 脚本能不能跑,再谈序列化是不是还是你那棵树。
文档清单
| 文档 | 解决的问题 |
|---|---|
| SVG 注入与消毒 | 元素白名单、<img> 沙箱 vs 消毒 inline、禁止 script / foreignObject / 事件属性 |
| 序列化下载与转位图 | XMLSerializer、xmlns、下载;转 PNG 的尺寸 / DPR;外链 <image> 丢失 |
底线
- 未消毒的用户 SVG 禁止 用
innerHTML写回 DOM。序列化走XMLSerializer或自己的文档模型。 <img src="*.svg">不执行脚本;inline<svg>会。两条产品线不要混成一个上传接口。drawImage(svgImage)有 taint、尺寸、外链三个坑,不是生产转 PNG 的默认路径。按 viewBox 自己离屏画,或URL.createObjectURL下原始 SVG。
先读 场景对照 里「在线矢量编辑器 / 打印」两行,再进本目录。
核对日期:2026-08-26