SVG 转 PNG——什么时候你是真的需要像素（什么时候不该转）

有一种特别的憋屈：手握一个完美的 logo，却无处安放。SVG 在任何尺寸下都锐利，几乎不占体积，在浏览器里看着无可挑剔——然后你想把它塞进一封邮件、设成社交预览图，或者贴进一个稍微老了点的软件，它就是不显示。一片空白。文件没毛病，是你放它的那个地方压根不懂矢量。

这就是 SVG 转 PNG 之所以成为一件事的全部原因。不是因为 PNG 更好——它通常并不好——而是因为这世上一大批地方只认像素。

矢量和光栅，快速讲一下

SVG 不是一张图片。它是一组指令——在这儿画个圆，那儿走这条路径，填这个颜色。浏览器照着指令，在你要的任何尺寸上现场渲染，所以它在 16 像素或者 16000 像素下都锐利如刀，而文件小得可怜，因为它不过是些数学。

PNG 恰恰相反。它是一张固定的彩色像素网格，在某一个分辨率上一次定死。把它放大超过原生尺寸，它就发软、发块，因为没有更多的像素可画了——只有烤进去的那些。它的好处是，一切都能读一张像素网格。它是图像的通用货币。

所以把 SVG 转成 PNG，是拿无限的可缩放性，去换通用的兼容性。这笔买卖划不划算，完全取决于这张图要去哪儿。

什么时候你是真的需要 PNG

有三种情况我会毫不犹豫地光栅化，因为矢量根本行不通：

邮件。 邮件客户端不渲染 SVG——Gmail、Outlook、Apple Mail，基本上全都出于安全原因拒绝它。邮件签名或者通讯里的一个 logo，必须是光栅格式。用 PNG，因为你要那份透明。

社交和 OG 预览图。 你分享一个链接时冒出来的那张小卡片——Open Graph 图——必须是一张固定尺寸的光栅图，通常是 1200x630。各家平台不会在那儿渲染 SVG。要是你的源素材是矢量，那就按那个确切尺寸导出一张 PNG。

更老或者离线的软件。 一大堆桌面应用、演示工具、文档编辑器和印刷流程，要么导不了 SVG，要么把它弄得一团糟。递给它们一张分辨率充裕的 PNG，每次都好使，没有意外。

这三种情况里，决定性的因素是同一个：目的地在物理上就读不了矢量，所以可缩放性无关紧要。一个渲染得出来的格式，永远胜过一个渲染不出来的格式。

唯一要拿捏准的一件事：分辨率

这是我见得最多、自己早年也犯过的错。正因为 PNG 在你导出的那个尺寸上被定死，你必须把它导得够大——最好就是你将要显示它的那个确切尺寸。

把一个 logo 导成 100x100 的 PNG，然后在一块高密度屏上以 300 像素显示，它就会发软、发毛。填满那片空间的像素并不存在。解法很简单：按你实际会用的尺寸导出，或者更大，尤其是在 Retina 和 4K 屏上，你往往想要标称尺寸的 2 倍。这是你离开矢量所放弃的、唯一真实的优势，所以花点心思把目标分辨率定对。

什么时候你不该光栅化

如果目的地能读 SVG，那就保留 SVG。句号。

在你自己的网站上，一个图标或者 logo 应该保持矢量。它在每一块屏、每一个缩放级别下都锐利，它比等价的 PNG 更小，而且当一块更高密度的新显示器出现时，你永远不必重新导出一个更大的版本。在那儿光栅化纯属亏本——你等于是把这个格式最好的特质扔掉，去换一份你早就有了的兼容性。

还有，别光栅化你的母版。SVG 是那份真正的源头，它随时能生成任意尺寸的 PNG。而 PNG 回不了头——你没法从一张像素网格里还原出干净的矢量路径。所以留着 SVG，把每一张 PNG 都当成给某个特定去处用的、一次性的导出。跟其他一切一样的原则：要发出去的转副本，自己编辑的原件留着。

我实际上是怎么做的

当我需要从矢量里榨出像素，我用这儿的 SVG 转 PNG 工具。它在你的浏览器里渲染 SVG，再把 PNG 递给你，所以什么都不会上传到任何地方——整件事都发生在你的机器上。挑一个契合去处的尺寸，拿到一张透明完好的干净 PNG。

但真正的功夫不在转换。在于你先问的那个问题：这个地方读矢量吗？读，那就让 SVG 待着别动，享受这个最锐利、最小的选项。不读——邮件、OG 卡片、某个顽固的老应用——那就光栅化，用对的尺寸，再把你的 SVG 妥善留着以备下次。这个判断做对了，你就再也不会在该有 logo 的地方看到一个空框了。