SVG 转 PNG 转换器

把可缩放的 SVG 矢量图变成即用的 PNG 图片

SVG 文件是一组指令，而非一张完成的图片。用文本编辑器打开一个，你会发现描述路径、形状、填充和曲线的 XML — 这是一份浏览器遵循的配方，可在你所要求的任何尺寸下重新绘制出新的图稿。PNG 则恰恰相反：它是一张固定宽高的彩色像素网格。把一种转成另一种叫做栅格化，本工具完全在你的浏览器中完成它。你选择一个输出尺寸，SVG 被绘制到一个 HTML 画布上，一张 PNG 便返回回来 — 没有任何文件离开你的设备。

用通俗的话说矢量与栅格

核心区别在于分辨率是如何处理的。因为 SVG 存储的是数学而非像素，所以它与分辨率无关：把一个标志从图标缩放到广告牌，每一条边都会被重新计算，以保持数学上的锐利。PNG 没有这样的自由。它的像素是固定下来的，所以把它放大到超过原生尺寸，就迫使观看者去拉伸已有的点，于是你开始看到那种暴露栅格图像本质的模糊和阶梯状锯齿。

这种取舍是双向的。矢量图在由干净形状构成的标志、图标和扁平插画上无可匹敌，而且文件通常很小。像 PNG 这样的栅格格式更自然地处理渐变、柔和阴影和照片级细节，而且 — 至关重要的是 — 它们几乎被一切所理解。当你栅格化时，你是在用 SVG 的无限可缩放性，换取 PNG 在某一个选定尺寸下的通用兼容性。

到底为什么要栅格化一个 SVG？

如果 SVG 缩放得如此漂亮，为什么还要转换它？兼容性是通常的答案。许多地方根本不接受 SVG：许多邮件客户端会剥离或拒绝渲染它，文档编辑器和演示软件往往想要一张扁平图像，电商平台和广告网络要求 PNG 或 JPG，而大多数社交平台完全无视矢量上传。一些内容系统出于安全原因也直接屏蔽 SVG，因为这种格式可以嵌入脚本。

第二个原因是，你有时就是想要一个固定尺寸的资源。应用图标、缩略图、Open Graph 预览图和印刷材料全都期望确切的像素尺寸。PNG 把图稿锁定到那个目标，所以它在任何地方都渲染得一模一样，不会因某个观看器对矢量的不同解读而出意外。把你的源 SVG 转换成某个平台所要求的精确尺寸，往往是通往一致结果的最干净路径。

选择正确的导出分辨率

因为 PNG 无法优雅地放大，所以你导出的尺寸比任何矢量图都更要紧。导出得太小，图片在现代屏幕上看起来发软；导出得不必要地大，则浪费带宽。一个简单的经验法则：确定图片将来会被显示的最大尺寸，然后至少按那个尺寸渲染，对于高密度显示屏理想情况下还要更大。

标准屏幕在 1 倍下没问题 — 也就是图稿的标称尺寸。高 DPI 和 Retina 显示屏在相同空间里塞进了大约两倍的像素，所以 2 倍导出能让图标和图形保持清晰而非模糊。对于印刷、海报或非常大的显示屏，3 倍或 4 倍能给你余量。由于源是矢量图，导出更大不会让你在质量上付出任何代价 — 曲线只是在被压平之前以更高的像素数重新计算了一遍。拿不准时就渲染一个慷慨的尺寸；你总能把一张大 PNG 缩小，却永远无法靠放大一张小 PNG 来找回细节。

透明度会一同被保留

PNG 支持完整的 alpha 通道，这意味着透明度在转换中得以保留。如果你的 SVG 没有背景填充，生成的 PNG 会让那些区域保持透明，所以一个标志或图标能干净地落在任何颜色之上，而不会带着一个难看的白框。如果你需要一个纯色背景，那就在转换前给 SVG 加上一个。无论哪种方式，你在矢量图中看到的，就是 PNG 将保留的，这正是为什么 PNG — 而非 JPG — 是图标、徽章和叠加层的天然目标。

一切都留在你的设备上

本转换器作为本地代码在你的浏览器中使用画布 API 运行。你的 SVG 被读取、绘制和导出，而无需被发送到服务器，所以没有上传，没有排队，也没有你图稿的副本留在别人的存储中。这对你来说更快，对任何你宁愿不交给第三方的内容来说也更安全，从未发布的品牌素材到内部图表。在这里完成之后，探索我们其余的图片工具 — 如果你正在制作 Windows 或 favicon 资源，PNG 转 ICO 转换器是顺理成章的下一步。

常见问题