Community影像github.com

alvici/png-to-svg

PNG 轉 SVG — 將 PNG 圖片(標誌、圖示、平面插圖、線條藝術、漸層形狀)轉換為乾淨的向量 SVG,支援單一檔案或整個資料夾,並可選擇色彩變體(原始/白色/黑色),同時能產生 favicon 與應用程式圖示。

png-to-svg 是什麼?

這是一個專為 AI 代理(如 Claude Code、Cursor 等)設計的技能,用於將 PNG 圖片(特別是標誌、圖示、平面插圖、線條藝術與漸層形狀)轉換為真正的向量 SVG(路徑),而非嵌入 PNG 的 SVG。技能支援單一 PNG 檔案或整個資料夾批次處理,並提供原始顏色、白色、黑色等色彩變體選項,還能額外生成 favicon 與應用程式圖示。轉換後會產出 JSON 報告,包含相似度百分比(similarity_pct)與稽核結果(audit),若品質未達標(相似度 < 97 或稽核 verdict 非 ok),可依據 tuning 指南調整參數(如 colors、speckle)最多三次。技能也包含輔助腳本(svg_audit.py、render.py、variants.py)以及 Windows 平台專用注意事項。

相容平台~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。

相關技能