批量SVG转PNG：尺寸、边距和透明背景应该怎么统一

批量 SVG 转 PNG 看起来只是把一堆文件拖进工具，然后下载结果。真正容易出问题的不是“能不能转”，而是“转出来的一组 PNG 看起来是否统一”。

如果一个图标的 viewBox 很紧，另一个图标自带大边距，第三个图标有白色底，第四个图形偏左，即使转换工具没有任何错误，最后得到的一组 PNG 也会显得大小不一、位置不齐、风格不统一。

所以批量转换前，应该先确定尺寸、边距、透明背景和命名规则。

> 先确定输出画布尺寸

批量导出前，先决定这一批 PNG 最终要落在哪个像素网格里。常见尺寸包括：

• 24 x 24：小型 UI 图标
• 32 x 32：工具栏图标
• 64 x 64：功能图标
• 128 x 128 / 256 x 256：较大的应用图标
• 512 x 512：应用商店、市场页、高清预览

这里的尺寸是最终 PNG 文件的画布尺寸，不一定是图形本身填满的尺寸。比如 64 x 64 的图标，实际图形可能只占 48 x 48，中间留出 8px 左右的安全边距，这样放在按钮或卡片里会更舒服。

同一批图标不要混用不同输出尺寸。如果确实有不同类型资源，应该分批处理。

> 统一 viewBox

viewBox 决定 SVG 坐标系和可见区域。图标集里最好使用一致的 viewBox，例如：

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

或者：

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">

如果有的文件是 0 0 24 24，有的是 2 3 19 18，导出后就可能出现裁切、偏移、视觉大小不一致。

批量转换前建议抽查这些内容：

• 每个 SVG 是否有 viewBox
• 同一组资源的 viewBox 是否一致
• 图形是否居中
• 是否有意保留边距
• 是否有内容超出画布
• 是否有看不见的矩形影响边界

从设计工具导出时，最好从固定 Frame、画板或组件导出，不要只选中图形路径导出。

> 边距不是越小越好

很多人希望图形尽量填满画布，觉得这样“利用率高”。但图标不是照片，适当边距能让一组图标在视觉上更平衡。

可以参考这些规则：

图标画布	图形可见区域	常见边距
24 x 24	20 x 20	每边约 2px
32 x 32	26-28 x 26-28	每边约 2-3px
64 x 64	48-56 x 48-56	每边约 4-8px
512 x 512	384-448 x 384-448	每边约 32-64px

还要注意“视觉重量”。同样的数学宽高，圆形通常会显得比方形小，三角形也可能需要更宽一点。不要机械地让所有路径都贴满同一个边界框，要看起来一致。

> 透明背景要提前决定

图标、Logo、UI 资源通常应该导出透明 PNG。白底图片在预览里可能看不出问题，但放到深色模式、彩色按钮或演示文稿里就会露出白色方块。

检查 SVG 里是否有这样的背景矩形：

<rect width="100%" height="100%" fill="white" />

如果这不是设计需要，就应该删除或隐藏它，再导出透明 PNG。

适合保留固定背景的情况：

• 输出的是预览图
• 目标平台不支持透明
• 设计本身就是卡片或徽章
• 要导出 JPG

如果这批资源会被反复复用，优先保留透明背景。

> 多尺寸导出要有目的

SVG 可以很方便地生成多个 PNG 尺寸，但不是越多越好。每个尺寸都应该对应真实用途。

线性图标常见尺寸：

• 24px：普通 UI
• 48px：高清屏 UI
• 96px：高密度预览

App 或市场图标常见尺寸：

• 64px
• 128px
• 256px
• 512px

文档或网页插图：

• 按实际显示宽度导出
• 高清屏需要时再导出 2x

不要为了“看起来完整”生成一堆没人用的尺寸。文件越多，后续越容易传错。

> 命名规则也要统一

批量转换后，文件数量可能会翻倍甚至几十倍。命名不清楚，后面很容易上传错尺寸或错背景版本。

推荐命名：

search-24.png
search-48.png
search-96.png
logo-dark-512.png
logo-light-512.png

不推荐：

search-final-new-2.png
icon_export_copy.png
logo_large_latest.png

如果有白底、黑底、透明版本，最好在文件名里体现出来。

> 推荐批量转换流程

比较稳的流程是：

1. 按资源类型分组：图标、Logo、插图、截图。
2. 每组确定一个输出画布尺寸。
3. 检查并统一 viewBox。
4. 删除不需要的背景矩形。
5. 确认透明背景还是固定底色。
6. 先转换 3-5 个样本。
7. 把样本放到真实页面或文档里检查。
8. 没问题后再转换整批文件。

使用 svg2img.cc 批量转换工具 时，建议同一批文件使用相同宽高和输出格式。尺寸不同的文件不要硬塞进同一批，拆开处理更稳。

> 导出后检查清单

批量转换完成后，至少检查这些点：

• PNG 文件尺寸是否一致？
• 图标是否居中？
• 透明背景是否保留？
• 有没有意外白边或白底？
• 小尺寸下线条是否太细？
• 文字是否被替换或裁切？
• 文件名是否能看出用途和尺寸？

批量转换真正节省时间的前提，是输入资源规则清楚。SVG 本身不统一，PNG 结果也不会统一。先统一画布、边距、背景和命名，再开始批量转换。