SVG 如何导出完整图标包

上传 SVG 后可调颜色和留边,再一键导出 favicon、App 图标、manifest 与 ZIP。

SVG 输入建议

  • 推荐使用静态 SVG,避免脚本、foreignObject 与外部资源引用。
  • 结构越简洁,导出到多尺寸 PNG 的一致性越高。
  • 若渲染结果与预期差异较大,建议简化 SVG 或改用 PNG。

3 步操作流程

  1. 上传 SVG,确认原图预览与主体边界识别正常。
  2. 按需求切换“原始颜色/自定义颜色”,并设置留边模式。
  3. 下载 ZIP,获得 favicon、Apple/PWA/maskable 与 site.webmanifest。

完整案例

输入: 用于 SaaS 官网的单色 SVG logo。

设置: 自定义图标色 #2563eb + 平衡留边 + 透明背景。

输出: 各尺寸图标在颜色和留边上保持一致,可直接部署。

常见问题

复杂 SVG 滤镜能完全保真吗?

不一定。复杂滤镜、外链字体等在栅格化后可能出现差异。

SVG 自定义颜色是怎么生效的?

工具会按渲染后的 alpha 区域做单色覆写,保持图标风格统一。

SVG 输入也能导出 favicon.ico 吗?

可以。SVG 会先渲染到画布,再进入同一套 PNG/ICO 导出流程。

什么时候用原始颜色,什么时候用自定义?

品牌色已固定时用原始颜色;需要单色系统时用自定义颜色。

相关入口

返回图标生成器

回到主工具,立即开始 SVG 转图标包。

favicon 与 PWA 指南

查看网站与 PWA 常用图标文件清单。

Maskable 安全区指南

导出 maskable 图标时避免主体被裁切。

时间戳工具

发布流程中快速转换与核对时间戳信息。