LEARN · ARTICLE
PNG／AI 圖轉 SVG 向量的印前實測
作者：Rock Lee 實測素材日期：2026-11-07（Asia/Taipei）｜本文定稿：2026-11-09
為什麼寫這篇
搜「png 轉 svg」「圖片轉向量 ai」時，結果幾乎都是線上自動轉檔或一鍵描圖。我真正要的不是「看起來像向量」，而是印前可用的乾淨平色、封閉路徑、節點可控。
2026-10-23 我查過 Vectorizer.AI、VectoSolve、Ideogram Vector 的公開定價與 API 文件，並用無金鑰的方式探測：三家正式轉檔端點都回 HTTP 401，拿不到無浮水印的生產用 SVG。同日也做過本機 k-means＋VTracer 對照；節點與色塊太碎，只當內部對照，禁止當客戶稿。
因此我改走另一條路：2026-11-07 做了一次自主練習——不自動描圖、不自動減色、不呼叫付費服務，用手寫 Bézier＋skia-pathops 整理同色與鏤空，再做瀏覽器與 PDF 驗收。比較圖角落有標「自主練習・非客戶成果」。
實測環境
| 項目 | 內容 |
|---|---|
| 素材 | 範例練習資料夾（原圖、腳本與驗收輸出） |
| 幾何 | 手寫路徑；同色合併／差集用 skia-pathops |
| SVG→PDF／渲染 | CairoSVG 1.18.4（PDF Producer 字串） |
| 瀏覽器驗收 | Google Chrome ＋ Playwright |
| PDF 檢查 | pdfimages -list、pdffonts、pdfinfo |
| 路徑軟體抽查 | 免費線上編輯器 Vectorpea：兩色層各一路徑、錨點可編輯 |
明確不做的事：自動描圖、邊緣轉路徑、自動減色、付費雲端向量化、宣稱印刷打樣保證。
步驟
1. 看原圖、手選平色（不做自動減色）
原圖先取樣兩個平色，對照像素座標寫進驗收檔：
| 用途 | 原圖像素 | RGB | HEX |
|---|---|---|---|
| 深藍 | (625, 250) | (9, 42, 86) | #092a56 |
| 珊瑚 | (750, 413) | (244, 100, 82) | #f46452 |
眼部用透明差集挖空，不加第三個白色填色。少一色少一次對位風險；鏤空處會露出承印底色，必須跟客戶講清楚。
2. 手寫 Bézier，再只用 pathops 整理
鳥身、羽尖、叉尾、眼部鏤空、胸部與浪形都是看圖後手寫曲線與端點；接著才用 skia-pathops 做同色聯集與差集。這一步不是從影像自動抽路徑。工作座標 viewBox 為 0 0 1024 576。
3. 輸出交付檔
| 檔案 | 用途與實測規格 |
|---|---|
sample.svg | 透明背景、兩層按色分組、可編輯路徑；無 <image>、無漸層 |
sample.pdf | CairoSVG 輸出 PDF 1.7；768×432 pt；真向量，但是 RGB，不是 CMYK／PDF-X |
sample.png | RGBA 2000×1125，背景透明 |
compare.jpg | 對照圖；角落標「自主練習・非客戶成果」 |
重建指令（需本機 Pillow、fontTools、skia-pathops、CairoSVG、Playwright／Chrome；不需付費 API）：
cd <範例練習資料夾> python3 build_sample.py python3 verify_sample.py
4. 瀏覽器與 PDF 驗收
- Chrome 實際開啟 SVG：page error＝0。
pdfimages -list：0 列影像。pdffonts：0 列字型。- 機讀結果在
verification.json。
5. 路徑軟體抽查（Vectorpea）
本機 Inkscape 安裝未完成，改用免費線上編輯器 Vectorpea 開啟同一份 SVG：兩個色層各一條路徑，錨點可編輯。這不能替代印刷打樣，只代表路徑打得開、選得動。
結果
最終藝術面只有 2 種平面填色（與 verification.json 一致）：
| 項目 | 數值 |
|---|---|
<path> | 2 |
| 封閉子路徑 | 7 |
| 輪廓節點（on-curve） | 91 |
| 控制點 | 129 |
| 兩色交集面積（SVG 平方單位） | 0.0 |
深藍層 1 path／5 子路徑／55 節點；珊瑚層 1 path／2 子路徑／36 節點。兩層 fill-rule="nonzero"，無 gradient、filter、stroke。
這代表什麼： 結構乾淨、可編輯、PDF 沒嵌點陣。 這不代表什麼： 不能保證印廠上機顏色，也不能宣稱全桌面向量軟體完整相容。
踩坑紀錄
- 自動減色當客戶稿＝踩雷 — k-means／VTracer 只做內部對照。
- 雲端工具沒金鑰就停在 401 — 預覽≠可下載生產檔。
- RGB 向量 ≠ 印刷完稿 — 無出血、非 PDF/X。
- 透明鏤空會吃底材顏色。
- 桌面 Inkscape 未裝成，改用 Vectorpea 抽查 — 仍不要宣稱完稿保證。
常見問題
Q1：為什麼不用一鍵 AI 轉向量？ 要印前分色與節點可控時，我優先「色數手選、路徑可編、能驗收」。
Q2：這份 PDF 可以直接給印刷廠嗎？ 不行當完稿保證。 它證明是向量、沒嵌圖、沒字型，但色彩是 RGB、無出血與 PDF/X。
Q3：和商業雲端工具比誰比較好？ 本篇主線是本機手繪清理的可重現數字；當時沒完成付費下載並排試驗，不在這裡硬排名。
讀者可勾的驗收清單
- [ ] 平色數量可控（本練習＝2）
- [ ] SVG／PDF 無嵌入點陣（
pdfimages0 列） - [ ] 無 gradient／filter；路徑封閉
- [ ] PDF 無未轉曲字型（
pdffonts0 列） - [ ] 已標示 RGB／非 PDF-X／無出血
- [ ] 至少用一種路徑編輯器確認可選錨點（本次：Vectorpea）
複製這段給你的 AI agent
目標：把一張平面插圖整理成印前友善的 SVG／向量 PDF 草稿（練習或內部稿）。 前提： - 只在本機作業；不要呼叫需金鑰的雲端轉檔 API。 - 不要讀取或輸出任何密碼、Token、API key。 - 不要執行刪除系統目錄、格式化、改全域權限等破壞性指令。 - 禁止把 k-means／quantize／posterize／自動描圖結果當成「客戶交付稿」。 步驟： 1. 讀原圖，手選 2～4 個平色 HEX（寫下取樣座標）；需要白色區域時優先用差集鏤空。 2. 手寫或明確參數化 Bézier 路徑；只用 path boolean（如 skia-pathops）做同色聯集與鏤空差集。 3. 輸出 sample.svg（透明底、按色分組）、用 CairoSVG（或同等工具）輸出 PDF，並做 PNG／對照圖。 4. 跑驗收：統計 path／封閉子路徑／節點；pdfimages 與 pdffonts 應為 0 列；記錄 RGB 或 CMYK。 5. 用可取得的路徑編輯器開啟 SVG，確認色層與錨點可編輯；若某軟體裝不起來，改用替代工具並在報告標明。 驗收：報告裡要有色碼、路徑／節點數字、pdfimages／pdffonts 結果、路徑編輯器抽查說明，以及「RGB／非 PDF-X／無出血」等限制句。 安全：不要貼金鑰；付款、訂閱、印廠對帳由人類自己做。