SVG 转 PNG — 无需上传，把矢量图渲染成任意尺寸

很多人会问怎样把 SVG 转 PNG 才能"不损失质量"，这个问题本身就带着一个值得先澄清的误解。SVG 没有可以损失的质量。它根本就没有像素。

矢量描述形状，像素存储画面

SVG 是对形状（曲线、填充、文字）的描述，放在一套没有固定像素尺寸的坐标系里。PNG 则是一张固定的像素网格。因此 SVG 转 PNG 永远意味着选一个尺寸，而无论你选哪个尺寸，结果都是清晰的。

用文本编辑器打开一个 SVG，你看到的是一条条指令：移动到这个点，画曲线到那个点，用这个颜色填充。没有任何地方写着这幅图有多少像素宽。浏览器在显示时才决定，而且每次都可以决定得不一样。

viewBox、width 和 height 到底是什么意思

根元素上的三个属性控制尺寸。viewBox 定义坐标系——"这幅图横向从 0 到 240，纵向从 0 到 160"。width 和 height 如果存在，则建议一个默认显示尺寸。很多 SVG 只有 viewBox，有些只有 width 和 height，还有少数两者都没有。

这个转换器会读取存在的属性，像浏览器那样推算出固有尺寸，并把它作为 1× 基准。如果什么都没声明，就回退到 1,024 像素，保证你仍能得到一张可用的图片。

为什么"不损失质量"是个错误的问题

因为同一份指令可以把 SVG 渲染成任意尺寸，一张 4,000 像素的 PNG 和一张 400 像素的 PNG 一样清晰——渲染器只是画出了更多细节。唯一会损失质量的做法，是先渲染得很小，然后再把 PNG 放大。解决办法就是在这里、在转换时就选定最终尺寸，之后绝不放大 PNG。

这个工具在浏览器中读取你的 SVG 文件，移除所有可执行内容，用浏览器自带的引擎按你选择的尺寸逐个渲染，然后交回保留透明度的无损 PNG——可以单独下载，也可以打包成 ZIP。

和你的浏览器同一个渲染器

服务端转换器使用独立的库——librsvg、Inkscape、ImageMagick——每一个都有短板：不支持的滤镜、被替换的字体、画得略有差异的渐变。你拿回来的 PNG 可能和你看到的 SVG 对不上。

而在这里，渲染由 Blink、Gecko 或 WebKit 完成——取决于你用的是哪个浏览器——直接把 SVG 画到画布上。只要 SVG 在你的浏览器里显示正常，PNG 就会一模一样，因为它们本来就是同一幅画。

剔除脚本，不做上传

SVG 是 XML，可以包含 <script> 元素、onload 处理器和内嵌 HTML。来源不明的文件不该随手就打开。渲染前，转换器会移除脚本、事件属性和 foreignObject 块，然后把结果放进一个本就无法执行代码的图片元素里渲染。两层防护，全在本地。

整个过程没有任何上传。批量转换时，浏览器开发者工具的 Network 面板始终是空的。

既然尺寸是一个选择，那就有必要知道每个选项是干什么用的。两种模式几乎覆盖所有场景。

1×、2×、3× — 匹配屏幕密度

普通显示器每个 CSS 点显示一个像素。Retina 或 HiDPI 显示屏显示两个；大多数现代手机显示三个。所以一个在屏幕上占 32 点的图标，分别需要 32、64 和 96 像素的 PNG。这就是 1×、2×、3× 的全部含义。

网页和 App 开发通常会把同一个 SVG 按三种倍率各导出一份。拖入文件一次，按 1× 转换，改一下设置，再转一次——或者干脆按 3× 导出，让平台自己缩小。

常见目标的尺寸参考

Favicon：16、32 和 48 像素，最好先做一张 512 像素的 PNG，再用 PNG 转 ICO 工具生成。App 图标：应用商店要 1024 像素，之后用图标集生成器。社交头像：400 到 800 像素。Open Graph 图片：1200 × 630。电商平台商品图：长边通常 2000 像素。

自定义宽度：印刷与电商平台

印刷场景请按 300 DPI 从物理尺寸倒推：A4 页面宽 2,480 像素，A3 是 3,508，6 英寸贴纸是 1,800。切换到宽度模式，输入数字，高度会按 SVG 的宽高比自动计算。转换器把输出的长边上限设为 16,384 像素——这是浏览器对画布的限制——如果你的请求被缩减，它会告诉你。

大多数 SVG——Logo、图标、插画——都没有背景：形状悬浮在空无一物之上。PNG 能保存这一点，这也是这项工作选 PNG 而非 JPG 的两大理由之一。

保持背景透明

这里默认就是透明。SVG 没有绘制的每个像素都保持透明，包括曲线和斜边上那些被部分覆盖的像素。正是这些柔和的边缘像素，让 PNG 放在深色幻灯片、彩色按钮或照片上时不会出现明显轮廓。

结果会显示在棋盘格背景上，方便你在下载前确认透明效果。

什么时候该压平成纯色

有些目标场景不支持 alpha 通道——较旧的邮件客户端、某些印刷流程、少数会在后台悄悄转成 JPG 的平台上传器。这种情况就在背景设置里选白色、黑色或自定义颜色。形状会被合成到那个颜色上，PNG 完全不透明。

请选择与图片最终所处位置一致的颜色。压平到白色后再把 PNG 放到深色背景上，边缘像素——此时是淡橙、淡蓝，或者形状本身的浅色版本——就会呈现为一圈淡淡的光晕。这圈光晕是转换后 Logo 最常见的投诉，而它是背景选择的问题，不是渲染的错。

在浏览器里渲染意味着 PNG 和屏幕一致，但同时也继承了浏览器对"图片允许加载什么"的规则。

字体缺失

SVG 中的文字会用它指定的字体渲染。如果这个字体既没安装在你的电脑上，也没嵌入文件里，浏览器就会换一个替代字体，PNG 里显示的就是替代字体。通过 URL 引用的网页字体也不会加载：作为图片渲染的 SVG 不允许获取外部资源。

可靠的解决办法是在导出 SVG 之前，在设计工具里把文字转为轮廓。字母变成路径后，在任何地方都能渲染得一模一样。

链接图片缺失

同样的规则也适用于 <image href="https://…">。从 URL 拉取的位图会渲染成空白。改成内嵌即可——大多数编辑器都有"嵌入图片"的导出选项，它会把链接变成 SVG 内部的 data URI。内嵌图片可以正常渲染。

输出空白或极小

既没有 viewBox 也没有 width 和 height 的 SVG，在这里会按回退尺寸渲染；如果图形离原点很远，就可能落在可见区域之外。加一个能框住整幅作品的 viewBox 就好。输出极小几乎总是因为 SVG 声明了很小的 width 和 height——切换到宽度模式，输入你真正想要的尺寸。

既然 SVG 可以完美缩放，为什么还要把 SVG 转 PNG？因为大量软件至今仍然吃不下矢量。

图标集与 Favicon

应用商店、favicon 格式和许多图标体系都要求固定尺寸的 PNG。按你需要的最大尺寸转换一次，其余的用图标生成器或 PNG 转 ICO 裁出来。

拒绝 SVG 的平台

社交网络、电商平台、社区论坛和大多数 CMS 媒体库都拒绝上传 SVG——部分是出于安全考虑，因为 SVG 可以携带脚本。带透明背景的 2× PNG 是通用的替代品。

邮件签名与新闻邮件

邮件客户端会剥离 SVG 或显示一张损坏的图片。邮件里的 Logo 用的都是 PNG，最好按 2× 导出，再按一半尺寸显示，这样在 Retina 屏幕上依然清晰。

印刷与大幅面输出

印刷厂接受 PDF 和高分辨率位图。用宽度模式把 Logo 渲染到 3,000 或 4,000 像素，海报尺寸也能印得干净利落——矢量在目标尺寸上直接栅格化，不存在放大带来的模糊。

网上几乎所有 SVG 转 PNG 转换器都会上传文件，然后在服务器上用 librsvg、Inkscape 或无头浏览器渲染。简单图形没问题，稍微复杂一点就会走样。

还原度

每个渲染库支持的 SVG 规范范围都略有不同。滤镜、遮罩、混合模式、文件内的 CSS 以及沿路径排列的文字是最常见的牺牲品。浏览器引擎是现存最完整的 SVG 渲染器，用你机器上的这一个来渲染，PNG 就不可能和预览不一致。

隐私与限制

未发布的 Logo、产品图纸、带内部数据的图表：把它们上传到转换器是一次谁都不想要的小泄露。服务端工具还会限制文件大小和每日用量，因为渲染要花他们的钱。在自己的设备上渲染，两个问题一起消失——没有什么可泄露，也没有什么可计量。

服务器胜在哪里：非常老旧的硬件渲染一批复杂 SVG 会比数据中心慢。但对十个 Logo 来说毫无区别。

输出是标准 PNG，所以这里的每个工具都能直接接手，无需再次上传。

用于网页，可以走一遍 压缩 PNG，或转成 WebP——两者都保留透明度并减小体积。用于邮件或照片，PNG 转 JPG 可以压平并缩小。事后需要精确尺寸，用调整图片尺寸。如果你手上是位图、却希望有一份矢量，PNG 转 SVG 可以反向走一遍。