《Illustrator 轉 SVG 實戰小說》之二：關鍵 QA 與三步優化決策
在釐清了開源工具的基本版圖後，Icekimo與Claude Opus針對專案的實際環境進行了對答，並迅速收斂出了一條針對網頁優化的「三步處理流程」。
這些 SVG 主要的用途是什麼？這會決定該優化向量精度還是檔案乾淨度。
網頁/UI 使用（要乾淨、可被 CSS 控制、檔案小）。
大概的轉換量級？
單檔或少數幾個。
定案：針對「網頁/UI 用途 + 少量單檔」的優化路線
既然是網頁與 UI 用途，我們的關鍵不是像素級的印刷還原，而是乾淨、語意正確、且能被 CSS 動態控制的程式碼。
Claude Opus為此量身打造了本地的三步流程：
第一步：轉出（Inkscape，輸出 plain SVG）
inkscape input.ai --export-type=svg --export-plain-svg --export-filename=output.svg
使用 --export-plain-svg 是關鍵，它會去掉 Inkscape 自家的 sodipodi:、inkscape: 等編輯器專有命名空間。
如果某個檔案 Inkscape 轉出來路徑有問題（如漸層、效果跑版），我們會退一步用 PDF 路線進行交叉驗證：
pdftocairo -svg input.ai output.svg
第二步：清理壓縮（svgo）
轉換器直接產出的 SVG 通常含有大量冗餘的 transform、過長小數以及無用的群組。我們將使用 Node.js 的 svgo 進行深度清理。然而，這裡有一個隱藏的陷阱：svgo 的某些預設會破壞你想保留的東西，例如拿掉 viewBox 會使響應式縮放失效、合併所有路徑會導致無法分別上色。
因此，我們需要客製化 svgo.config.mjs，關掉這些破壞性預設：
npx svgo --config svgo.config.mjs output.svg -o cleaned.svg
第三步：currentColor 注入
這是前端工程師最常踩的坑（例如 Affinity Designer 匯出對 currentColor 支援不佳）。為了讓圖示（icon）能跟隨 CSS 的文字顏色變化，我們需要將寫死的 fill="#xxxxxx" 替換成 fill="currentColor"。這可以透過 svgo 的插件來做，或是直接用簡單的 shell 腳本進行 sed 替換。
聽起來非常合理！那我們直接動手吧。
沒問題，最有效率的方法是你直接上傳一個代表性的 .ai 檔案，我在環境裡實跑這三步，將實際輸出、檔案大小前後對比，以及適合的 svgo 設定一次測試出來。實測一個檔，比空談十個情境有用！
這場實戰，就在Icekimo準備好的第一個單色 LOGO 下正式拉開序幕。