SVG 转 PNG(透明背景)指南

面向设计与前端交付的稳定导出流程,避免透明图常见坑。

透明 PNG 常见问题通常来自 viewBox、隐藏背景层或边缘抗锯齿。按下面步骤做,返工会少很多。

1)导出前清理 SVG

  • 确保 viewBox 正确,移除会撑大画布的隐藏路径。
  • 删除不必要的白色背景矩形图层。
  • 尽量让描边与像素网格对齐,降低边缘发虚概率。

2)设置导出参数

  • 导出时选择透明背景并先看预览。
  • 按目标场景选择 1x/2x/3x,避免后续再拉伸。
  • 统一命名规则,便于设计和开发对齐资产。

3)上线前快速校验

  • 分别在浅色/深色背景下查看,排查白边。
  • 检查是否有边缘裁切,必要时加一点画布内边距。
  • 核对导出尺寸是否与设计稿一致。

透明 PNG 常见问题

为什么导出后还有白底?
通常是源 SVG 含背景层,或导出背景不是透明。删除背景层并重新导出。
如何避免边缘发糊?
尽量对齐像素网格,减少小数位变换,并使用合适倍率(如 2x)。
应该先优化 SVG 还是先导出 PNG?
建议先优化再导出,能先修正结构问题,导出结果更稳定。
透明 PNG 一定优于 JPG 吗?
图标和叠加素材通常是。若无需透明且追求更小体积,JPG 可能更合适。