把 SVG 转成 PNG

SVG 描述的是形状，不是像素网格。转成 PNG 的本质，是决定要用多少个像素把它画出来——这也是这个页面唯一需要认真设置的参数。

什么时候需要把 SVG 转成 PNG

• 对方软件不认矢量格式。 办公文档、内容管理系统和部分老设计工具只接受位图。
• 需要一个固定尺寸的资源。 比如正好 512 × 512 的图标，不想为它专门打开设计软件导出。
• 只想先看个预览。 PNG 缩略图在哪都能显示，包括文件管理器和聊天窗口。

如果以后还可能换尺寸，请把 SVG 原文件留着；PNG 只是某一个分辨率下的快照。

输出尺寸怎么选

原始尺寸沿用 SVG 里写的宽高。文件只定义了 viewBox 时，按这个矩形比例推算，像素大小取矩形自身的单位。

按宽度保持宽高比，把 PNG 缩放到你填的宽度，高度自动计算。网页素材通常用这一项。

自定义同时填写宽和高。两者比例与 SVG 不一致时，画面会被拉伸填满整个框。

2x / 3x 倍率在已选尺寸的基础上再乘倍数。图片要在高分屏显示或用于印刷时选它。

透明

PNG 支持 alpha 通道，所以 SVG 里的透明区域会原样保留。抠掉的地方不会变成白底，可以直接叠到任何背景上。

转换会丢掉什么

浏览器是把这个文件当成一张图片来加载的。文件里的脚本不会执行，外链的网络字体和外部图片也不会被请求。原字体不在本机时，文字使用本地回退字体显示。如果这些细节重要，请先在矢量软件里把文字转成轮廓。

怎么判断结果好不好

矢量转位图不存在「体积优化」这回事，判断标准只有三条：

• 尺寸对。 卡片上的「输出尺寸」等于你设定的像素值，长宽比与源文件一致，画面没有被拉伸。
• 够清晰。 点一下预览图放大看，文字边缘和细线依然锐利。放大后发糊，通常是倍率选小了，改成 2x 或 3x 重新渲染即可。
• 透明对。 该透明的区域仍然透明，只有你主动选了白色或自定义底色，背景才会被填上。

PNG 一定比 SVG 大：SVG 存的是「要画什么形状」，PNG 存的是「每个像素是什么颜色」。所以体积变大不代表转换有问题，也不必为它调参数。

操作步骤

1. 拖入一个或多个 SVG 文件。 其他格式会被拒绝，因为这个页面只处理矢量图。
2. 设置尺寸。 选原始尺寸、按宽度或自定义宽高，需要更多像素时再加倍率。
3. 导入即开始渲染，修改设置后自动重跑。卡片上会标出源文件和新的 PNG 尺寸。
4. 下载。 单张直接下，整批打包成 ZIP。

相关页面

• 想把照片转成 PNG：图片转 PNG
• 想要更小的体积：图片转 WebP