SVG 图标导出 PNG/JPG：模糊、透明底、尺寸怎么设

前端拿到设计师的 SVG 图标，要放进 PPT、交 Android 资源、或发运营做推文——对方往往只要 PNG/JPG。直接改扩展名不行，需要 栅格化：按指定像素宽高渲染成位图。

导出最常见的坑是 尺寸太小发虚，或 该透明却铺了白底。本文用浏览器工具讲清 SVG 查看、定倍率、选格式。

一、SVG 和 PNG 的本质区别

SVG 是矢量：放大不糊，由路径和公式描述。PNG/JPG 是栅格：固定像素格子，尺寸不够就虚。

你可以把它想成「无限放大的地图」和「固定分辨率的卫星照片」。要插入 Word 或老后台，对方只收照片，就得先定好要多清晰的「照片」。

二、导出前先预览 SVG

上传前先用 SVG 查看器打开文件，确认路径、留白、颜色是否符合预期。

有些 SVG 自带 viewBox 很大但图形很小，导出前可先调整 SVG 尺寸、规范化画布，避免导出一片留白。

三、SVG 转 PNG：要透明底时

打开 SVG 转 PNG，上传 SVG，设置输出宽度（高度常按比例）。

倍率建议：

图标设计稿 24×24，给 Retina 屏至少导出 48×48；再小放大就会糊。

四、SVG 转 JPG：不需要透明时

发邮件、插不支持透明的系统，用 SVG 转 JPG。JPG 会铺底色（通常白），体积一般小于 PNG。

五、用命令行导出（可选）

已装 Inkscape 时：

inkscape icon.svg --export-type=png --export-width=96 -o icon@2x.png

上面代码中，--export-width=96 控制输出宽度。没有 Inkscape 时，浏览器工具零安装更方便。

六、常见问题

6.1 导出发虚怎么办？

加大输出宽度。24px 图标至少导出 48px 或 72px，别直接用 CSS 把小图拉大。

6.2 要不要留透明底？

要叠在彩色背景、做 App 图标：PNG。要最小体积、背景本来就是白色：JPG。

6.3 颜色和设计稿不一致？

检查 SVG 里是否写死 #000；是否用了 currentColor 依赖外层 CSS。独立导出时选查看器里最终呈现的颜色为准。

6.4 带 <image> 外链的 SVG？

若 SVG 引用外部位图，离线导出可能缺图。请设计 embed 或提供完整文件。

6.5 字体图标 SVG？

文字转路径（outline）再导出最稳；否则依赖系统字体，换电脑字形可能变。

记住：先预览、再定 2x/3x 宽度、最后选 PNG 还是 JPG，图标导出就不容易糊。