Community图像github.com

alvici/png-to-svg

PNG 转 SVG — 将 PNG 图片(徽标、图标、扁平插画、线条艺术、渐变形状)转换为干净的矢量 SVG,支持单个文件或文件夹,并提供颜色变体(原色/白色/黑色)以及 favicon 和应用程序图标。在请求转换、描摹或矢量化 PNG 为 SVG 时使用。

png-to-svg 是什么?

该技能用于将 PNG 图像转换为真正的矢量 SVG(路径形式),而非简单的 PNG 嵌入 SVG。它支持多种输出变体(原始颜色、白色、黑色),并能处理单色和彩色源图像,适用于徽标、图标、扁平插画等。技能通过 CLI 脚本工作,需要用户先选择颜色变体再运行转换。它会自动评估结果质量(相似度≥97且审核通过✅),否则提供调节参数(如颜色数、斑点减少)最多重试3次。转换后还可以生成 Favicon 和应用图标。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alvici/png-to-svg/tree/HEAD

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

PNG 转 SVG

将 PNG 转换为真正的矢量 SVG(路径),而非嵌入 PNG 的 SVG。 所有脚本位于此文件旁边的 scripts/ 目录中;请使用完整路径运行。

Windows: 使用 python 或 py -3,不要使用 python3(通常只会打开 Microsoft Store)。 Windows 上的准备工作、渲染器及常见问题:references/windows.md。

工作步骤

  1. 检查素材。 确保 PNG 文件可以打开。不要转换其他品牌拥有的徽标或角色,除非用户明确有权使用它们。

  2. 在转换前询问变体。 在用户选择变体之前,不要运行 SVG 生成过程。 运行: python scripts/png2svg.py input.png --list-options

    • source_type: color → 询问他们是否需要 原始颜色、白色、黑色 或这些选项的组合。
    • source_type: mono → 询问他们是否需要 黑色、白色 或两者。

    如果用户请求转换但未指定变体,则在检查选项后停止并提问;不要仅仅因为没有选择就选择 default。在用户回答后继续。如果用户明确要求直接转换,则使用 default。 每个变体的详细信息:references/variants.md。

  3. 在用户选择后转换。 仅在 --variants 中使用用户选择的变体,例如: python scripts/png2svg.py input.png out_dir --variants original,white --compare 如果用户要求 favicon 或应用程序图标,则添加 --icons。 对于单个文件夹,将 input.png 替换为文件夹名称。

  4. 读取 JSON 报告。 对于每个变体,有 similarity_pct 和 audit。

    • similarity_pct ≥ 97 且 audit.verdict = ok → 完成。
    • 否则,根据 references/tuning.md 调整 --colors 或 --speckle,最多尝试 3 次。
    • similarity_pct: null 表示没有渲染器:结果仍会生成,但需说明视觉检查已跳过。
    • 如果能够查看图像,请打开 *_compare.png(左侧为目标,右侧为结果)。
  5. 提交。 提供每个变体的 SVG 文件(如果要求,还包括 icons/ 文件夹),并附上简短摘要:方法、相似度、大小以及来自 notes 或 audit.issues 的备注。

规则

  • 永远不要更改原始文件;始终写入输出文件夹。
  • 白色/黑色变体是单色轮廓。形状内的不同颜色细节会合并;如果徽标有此类细节,请告知用户。
  • 附加脚本:scripts/svg_audit.py(审核任何 SVG)、scripts/render.py --which(检查可用的渲染器)、scripts/variants.py(从现有 SVG 生成变体)。
  • AION 仪表板中的复选框集成:references/aion-integration.md。

相关技能