像素画导出 PNG 还是 SVG？实际用途对比

PNG 和 SVG 都能显示同一幅像素画，但解决的问题不同。PNG 保存彩色像素，SVG 保存绘制形状的指令。

日常分享优先选 PNG；需要灵活缩放或响应式排版时，SVG 更适合作为母版。

PNG 什么时候最省心

PNG 兼容性强，社交平台、聊天软件、游戏引擎、图片编辑器和内容系统普遍支持。

适合 PNG 的情况：

• 上传头像或社交图片；
• 游戏引擎需要纹理；
• 需要透明像素；
• 接收方用位图软件继续编辑；
• 已经确定最终尺寸。

PNG 是无损格式，不会像 JPEG 那样在硬边附近产生波纹。主要风险来自缩放：128×128 的图显示成 350×350 时可能被插值软化。尽量用整数倍和最近邻缩放。

SVG 什么时候更合适

SVG 是矢量格式。像素画 SVG 通常把每个色块保存成清晰矩形，由浏览器按当前尺寸重绘。

适合 SVG 的情况：

• 同一作品要用多个尺寸；
• 用在响应式网页中；
• 简单作品需要大幅面输出；
• 色块和颜色数量适中；
• 之后要在矢量编辑器里修改。

但并非所有社交平台和游戏流程都接受 SVG。

文件大小取决于作品

SVG 不一定更小。细节很多的转换会生成大量矩形，文件可能比压缩后的 PNG 更大。大面积平色的简单图标则往往很适合 SVG。

不要只听经验，直接导出两份比较：

• 简单、平面的作品通常偏向 SVG；
• 细节多、分辨率高的作品通常偏向 PNG；
• 接近照片的像素转换往往产生繁杂 SVG。

透明与边缘

两种格式都支持透明背景。传统硬边像素画最好使用全不透明色块和全透明空白。半透明边缘换到不同背景上时容易出现光晕。

我的常用导出方式

1. PNG 作为马上要使用的成品；
2. 可能再次缩放时，额外保存 SVG；
3. 按真实显示尺寸测试 PNG；
4. 在目标浏览器或设计软件里打开一次 SVG。

PixelTool 的两种格式来自同一像素网格，可以直接比较。

用途	优先选择
社交头像或帖子	PNG
游戏纹理或精灵	PNG
响应式网页装饰	SVG
简单作品的大幅印刷	SVG
最大兼容性	PNG
后续矢量编辑	SVG

不必永远只选一种。按当前交付渠道选择，并在成本很低时保留另一份即可。