《Illustrator 轉 SVG 實戰小說》之三：第一個單色 LOGO 的優化對決 (pdftocairo vs Inkscape)
Icekimo傳來了第一個測試目標——一個由最新版 Illustrator 匯出的單色 LOGO。這本是一場預期中的簡單轉換，卻意外在向量結構的優化上，演變成一場多工具鏈的對決。
這是第一個單色的 LOGO（2026桌曆LOGO.ai），我想把它做成能用 CSS 控制顏色的 SVG。
收到，我先來看一下這個檔案的基底結構。
Claude Opus在沙箱執行了初步分析：
$ file 2026桌曆LOGO.ai
2026桌曆LOGO.ai: PDF document, version 1.6, 1 pages
$ pdfinfo 2026桌曆LOGO.ai
Creator: Adobe Illustrator 28.7 (Windows)
Producer: Adobe PDF library 17.00
Page size: 141.732 x 141.732 pts (rotated 0 degrees)
幾個關鍵情報被解讀出來： 1. 最新的檔案格式：來自 Illustrator 28.7（2024 版）。 2. 無嵌入字型：字型列表為空白，代表文字已在儲存時被轉為外框路徑，這省去了缺字與授權的煩惱。 3. 極度不正常的檔案體積：畫板僅有 141×141 pt（約 50mm 見方），但檔案卻高達 2.0 MB。裡面顯然塞滿了點陣縮圖或冗餘的 PDF 結構。
戰役一：pdftocairo 與 62 個 clipPath 的泥淖
因為Claude Opus當時尚未在無頭 Linux 環境安裝桌面級的 Inkscape，Opus首先嘗試了輕量級的 PDF 轉換路線：
$ pdftocairo -svg 2026桌曆LOGO.ai raw_cairo.svg
產出的 SVG 依然高達 680 KB。Opus挖開程式碼結構尋找肥大原因：
* 無點陣圖：搜尋 <image> 標籤無果，代表這 680 KB 全是純向量路徑。
* 致命元凶：62 個重複的 clipPath：
在代碼中，clip-1、clip-3、clip-5 的路徑資料完全一致，那一長串代表 LOGO 外圍圓形輪廓的路徑被重複定義並套用了數十次。這是 pdftocairo 的典型行為：它把 Illustrator 的每個繪圖操作都包上了一層 clip，產生大量冗餘。
Claude Opus嘗試使用 svgo 預設規則進行清理：
$ npx svgo raw_cairo.svg -o clean_cairo.svg
檔案大小僅能從 680K 壓到 192 KB。原因在於 svgo 為了保證視覺不跑版，預設不敢去移除這些被引用的 clipPath。
戰役二：Inkscape 與 2 個 clipPath 的救贖
「與其用 svgo 硬猜，不如換個更聰明的策略：用 Inkscape 的『以裁切路徑實際運算』能力把 clip 烘焙掉。」Opus決定在環境中安裝 Inkscape，進行交叉驗證。
$ sudo apt-get install inkscape
$ inkscape 2026桌曆LOGO.ai --export-type=svg --export-plain-svg --export-filename=inkscape_plain.svg
結果出乎意料！Inkscape 自帶的匯入引擎在解讀 PDF 封裝時，成功將 clipPath 的數量從 62 個直接降為 2 個。雖然原始輸出有 432K（保留了較多群組），但因為沒有了那堆冗餘的 clip 結構，這份 SVG 變得非常適合 svgo 壓縮。
戰役三：currentColor 的注入與單位修復
但在進行最後清理與 currentColor 注入時，Opus碰到了兩個問題：
1. currentColor 注入失敗：Inkscape 把顏色寫成 style="fill:#d4310f" 的內聯樣式，而 svgo 4.x 的 convertColors 對 style 屬性內的填色處理有限制，導致 hex 色值殘留。
2. viewBox 單位比例偏移：Inkscape 匯入時因為 pt 與 px 單位換算（72 vs 96 dpi 比例），導致 viewBox 被放大了（141.73 變成了 188.98）。
為了解決這兩個問題，Opus在 svgo 壓縮後，寫了一段精準的 sed 替換指令，直接在文字層面進行安全重構：
# 1. 執行 svgo 進行向量簡化（保留 viewBox）
$ npx svgo inkscape_plain.svg -o clean_ink.svg
# 2. 用 sed 將唯一的色值 #d4310f 徹底換成 currentColor，並移除無用的樣式雜訊
$ sed -i 's/fill:#d4310f/fill:currentColor/g' clean_ink.svg
$ sed -i 's/fill-opacity:1//g; s/stroke:none//g' clean_ink.svg
接著，將 viewBox 對齊原始尺寸 0 0 141.73 141.73。
最終驗證
為了確保這一系列的代碼清理沒有損壞視覺，Opus在伺服器上使用 rsvg-convert 將優化後的 SVG 渲染成 PNG，與原始設計進行像素級比對：
$ rsvg-convert -w 500 -h 500 clean_ink.svg -o final_preview.png
視覺比對結果出來了，完全一致！所有細節、文字外框與齒輪邊緣都完好無損。
太棒了！檔案大小從 2MB 瘦身到 180K，程式碼變得非常乾淨，在網頁上用 CSS color 就能直接換色了。
第一場轉換完美收工，但Icekimo緊接著丟出了第二個難題——一個雙色、且歷史悠久的舊格式檔案。