前端拿到设计师的 SVG 图标要放进 PPT、交 Android 资源、或发运营做推文——对方往往只要 PNG/JPG。直接改扩展名不行需要栅格化按指定像素宽高渲染成位图。导出最常见的坑是尺寸太小发虚或该透明却铺了白底。本文用浏览器工具讲清 SVG 查看、定倍率、选格式。一、SVG 和 PNG 的本质区别SVG 是矢量放大不糊由路径和公式描述。PNG/JPG 是栅格固定像素格子尺寸不够就虚。你可以把它想成「无限放大的地图」和「固定分辨率的卫星照片」。要插入 Word 或老后台对方只收照片就得先定好要多清晰的「照片」。二、导出前先预览 SVG上传前先用 SVG 查看器打开文件确认路径、留白、颜色是否符合预期。有些 SVG 自带viewBox很大但图形很小导出前可先调整 SVG 尺寸、规范化画布避免导出一片留白。三、SVG 转 PNG要透明底时打开 SVG 转 PNG上传 SVG设置输出宽度高度常按比例。倍率建议用途参考宽度网页1x图标 24px导出 2448pxRetina2x设计稿尺寸 × 2PPT / 文档插图400800pxApp 商店图按平台规范表图标设计稿 24×24给 Retina 屏至少导出48×48再小放大就会糊。四、SVG 转 JPG不需要透明时发邮件、插不支持透明的系统用 SVG 转 JPG。JPG 会铺底色通常白体积一般小于 PNG。五、用命令行导出可选已装 Inkscape 时inkscape icon.svg --export-typepng --export-width96-oicon2x.png上面代码中--export-width96控制输出宽度。没有 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图标导出就不容易糊。
