SVG 转 PNG 完全指南:把矢量栅格化成位图,该怎么选尺寸

SVG 是矢量,放多大都不糊;PNG 是位图,分辨率在导出那一刻就定死。两者各有各的用处,问题往往出在:你手里只有一份 SVG,但下一个环节只认 PNG。这篇文章把这件事讲透,从矢量和位图的区别,到怎么指定输出尺寸、用倍数导出高清图,再到为什么本地转换比上传到某个网站更省心。

矢量和位图,到底差在哪

SVG 存的是描述:这条线从哪到哪,这个圆半径多少,这块填什么色。屏幕显示时浏览器现场算,所以缩放不失真。PNG 存的是一格一格的像素,导出时按某个尺寸把矢量算成像素阵列,之后再放大就是把已有像素硬拉,边缘自然发虚。

所以 SVG 转 PNG 的关键不是"转",而是"按多大转"。同一份图标,你按 24×24 导出和按 96×96 导出,得到的是两张清晰度完全不同的 PNG。选错尺寸,再好的工具也救不回来。

为什么有时候非要位图不可

既然矢量更灵活,为什么还要转成 PNG?因为很多环境根本不收 SVG,或者收了也渲染错:

幻灯片:Keynote 和老版 PowerPoint 要么拒收 SVG,要么把描边宽度画错。
邮件签名:Gmail、Outlook、Apple Mail 都会剥掉或拒绝 SVG,只有 PNG 能稳定显示。
社交分享卡片:很多链接预览爬虫不渲染 SVG,og:image 必须是位图。
老平台素材:有些 Android 工程还在用 PNG drawable,要 1×/2×/3× 多套尺寸。
截图与文档:报告流水线常常是用栅格图拼 PDF 的,图表 SVG 得先栅格化。

这些场景的共同点是:对方不关心你源头是不是矢量,只要一张能直接贴上去、到处都一致显示的位图。

指定输出尺寸和倍数,导出真正清晰的图

这是整件事最容易踩坑的地方。一个 24px 的图标,如果你就按 24×24 导出,然后在页面上以 96px 显示,浏览器把 24 个像素放大到 96,锯齿和发虚立刻就来了。

正确做法是按你实际要显示的尺寸来导出,或者用倍数控件:

普通屏正常显示:1× 即可。
Retina 或 4K 屏要锐利:选 2× 或 3×,等于按两到三倍像素栅格化。
要在 48px 处清晰显示一个 24px 图标:直接按 4× 导出,也就是 96×96 像素。

每个尺寸都是从矢量重新算的,不是拿一张中间位图再放大,所以你要多大就给多大的真实分辨率。要锁定宽高比的话开着比例锁,只填一个宽度,高度自动跟上。

一个真实例子:一个图标导出多套尺寸

我自己最常用的就是给老 Android 工程补图标。设计稿都在 SVG 里,但有个老模块只吃 PNG drawable,还要三套密度。我会这样走:从 Figma 的 dev 模式把图标 SVG 复制出来,粘进 SVG 转 PNG 转换器,确认原始尺寸读出来是 24×24,然后:

xxhdpi:倍数设 3×,导出 72×72,背景保持透明。
xhdpi:倍数设 2×,导出 48×48。
hdpi:宽度直接填 36,导出 36×36。

三张图几分钟就齐了,透明背景一路完整保留,图标叠在任何工具栏颜色上都干净。不用再去设计软件里一遍遍点"按倍数导出"的弹窗。如果导出前还想先把 SVG 里多余的节点和元数据清掉,可以先过一道 SVG 优化压缩工具,文件更小,栅格化也更干净。

透明背景:这正是选 PNG 而不是 JPG 的理由

PNG 支持完整的 8 位 alpha 通道,SVG 里透明的区域在 PNG 里依然透明。JPG 做不到这点,它会给你拍一层底色。所以导图标、logo 这类需要叠在不同背景上的素材,默认就该留透明。

只有少数场景要切成纯色实底:比如某些会把透明渲染成黑色的老邮件客户端,或者会把 alpha 拍平的链接预览爬虫。这时填一个纯色十六进制做实底即可。

本地浏览器转换,一字节都不上传

很多在线转换工具会把你的文件传到它们服务器再返回结果。对于还没发布的 logo、客户的素材,这是实打实的风险。

本地方案不一样:DOMParser 读尺寸,blob URL 把 SVG 喂进离屏 Image,Canvas 画出来,canvas.toBlob 生成 PNG,全程在你的浏览器标签页里跑。转之前打开 DevTools 的 Network 面板看一眼,请求数始终是 0。页面缓存之后,断网也能继续转。SVG 是当作图片加载的,不会注入页面,所以哪怕文件里带 <script> 或 onload,也无法在你浏览器里执行任何东西。

如果你要处理的不只是 SVG,而是 PNG、JPG、WebP 之间互转,可以用图片格式转换工具;要把导出的 PNG 再缩放到特定像素尺寸,用图片尺寸调整工具也是同样的本地思路。

收个尾

SVG 转 PNG 不复杂,记住三件事就够:按你实际要显示的尺寸来导出而不是事后放大;需要叠背景就留透明;选个本地转换的工具,源文件不离开机器。把这三点做对,导出的每一张 PNG 都该清晰、该透明、该安全。

Made by Toolora · Updated 2026-06-13