导出 SVG 还是 PNG：清晰度、体积与二次编辑

选格式只看一个问题：这张图之后还要不要改。要改、要放大、要印，用 SVG；只是贴进文档或聊天，用 PNG。两者都不含源码与编辑历史，导出的是「一张图」，不是「一个工程文件」。

SVG：矢量，可二次编辑

SVG 用坐标与路径描述图形，放大任意倍数都不失真，文件通常只有几十 KB。可以用 Illustrator、Figma、Inkscape 打开继续调整颜色、字体、间距。

缺点是部分平台不支持（某些 IM 直接发 SVG 会显示为下载链接），以及字体依赖——SVG 里如果用了系统字体，在别的机器上打开可能回退成别的字体，导致文字溢出。

要跨环境使用，导出前把文字转成路径（在矢量编辑器里做），或确认目标环境有同一款字体。

PNG：按 2 倍密度重新栅格化

这里的 PNG 不是「截屏」，而是把 SVG 重新按 2 倍像素密度渲染出来。区别在于：截图会带上屏幕的缩放比例与抗锯齿痕迹，重新栅格化得到的是干净的、尺寸精确的位图。

2 倍密度意味着在 Retina 屏上依然锐利，也够用于 A4 打印（一张 800px 宽的图按 2 倍导出是 1600px，印 10cm 宽约 400 DPI）。

需要更大尺寸的位图时，用 SVG 在矢量工具里导出任意分辨率，比反复放大 PNG 好得多。

导出文件里有什么

只含最终图形。不带源码、不带编辑历史、不带图层信息。

这一点值得强调：很多工具的导出文件里嵌了原始数据（比如 Figma 的源文件信息、某些编辑器的 JSON 载荷），分享出去等于把草稿也一起给了对方。这里的导出是「干净的成品」。

体积与性能

SVG 通常比 PNG 小一个数量级，且缩放不失真，网页里嵌图表优先用 SVG。但节点特别多（几百个）时，SVG 的 DOM 元素数量会拖慢浏览器渲染，这时 PNG 反而更合适。

超过 10 万字符的源码会被拒绝渲染并给出提示，避免浏览器长时间卡死；图形节点过多也会影响交互流畅度，建议按模块拆成多张图。