《Illustrator 轉 SVG 實戰小說》之五：最終抉擇與雙色 CSS 分組方案
面對 2007 年 Illustrator 8.0 舊格式（AI8）在headless開源工具鏈上的解析障礙，Icekimo與Opus終於迎來了這場實戰的終局。他們必須從理論的泥淖中走出來，做出最務實的技術抉擇。
既然開源工具解不開舊格式的 AI8，那我們該怎麼辦？
我們不需要繼續在伺服器上硬碰硬。針對這個舊檔案，有三條務實的路線可以走。
Claude Opus給出了三個重建方案：
選項 A：用 Illustrator 另存新格式（最推薦）
這是保證向量精度的最佳路徑。在本地端的 Illustrator 中打開該舊檔，另存為新版 PDF 相容格式的 .ai、或是直接匯出為標準 .svg。新版的 Illustrator 對舊格式的相容性極高，存出後就能直接用我們在第三章跑通的 Inkscape CLI 流程進行完美轉換與清理。
選項 B：提供其他可用格式
如果該 LOGO 有輸出過其他格式（例如新版 EPS、高品質 PDF、或是高解析度 PNG/SVG），直接提供該格式，我們就能直接接手後續的優化流程。
選項 C：點陣圖自動描圖（不得已的下策）
如果這真的是唯一的孤本，且完全無法取得 Illustrator 軟體。我們可以用開源的 potrace 或 Inkscape 的自動描圖功能，將點陣圖（PNG/JPG）重新向量化。但這會大幅損失原始向量的邊角精度，且對於雙色 LOGO 的邊界處理非常不理想，非到最後關頭不建議使用。
明白了，我之後會想辦法用 Illustrator 把檔案另存。但在那之前，你能先教我真正的雙色 LOGO 如何在網頁上用 CSS 控制顏色嗎？畢竟 `currentColor` 只能綁定一個顏色。
沒問題！這正是多色向量控制的核心。當我們拿到新格式的雙色 SVG 後，我們不能無腦將 fill 全部換成 `currentColor`，而是要用「CSS 變數 + Class 分組」的做法。
雙色/多色 SVG 控制方案實作
在標準的 SVG 中，我們可以手動或透過指令，將代表「紅色（主色）」與「黑色（副色）」的路徑分別歸類，並標記不同的 class：
<!-- 雙色 SVG 程式碼範例 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.73 141.73" class="logo">
<!-- 紅色徽標路徑 -->
<path class="logo-primary" d="M10 10 H 90 V 90 H 10 Z" />
<!-- 黑色文字路徑 -->
<path class="logo-secondary" d="M15 15 H 45 V 45 H 15 Z" />
</svg>
接著，在網頁的 CSS 中定義這些 Class，並將其填色（fill）連結至 CSS 自訂屬性（變數），同時指定預設值：
/* 定義 SVG 內部的填色邏輯 */
.logo .logo-primary {
fill: var(--logo-red, #d4310f); /* 預設為原本的橘紅色 */
}
.logo .logo-secondary {
fill: var(--logo-black, #1a1a1a); /* 預設為深黑色 */
}
這個架構的美妙之處在於，當切換到深色主題（Dark Mode）時，我們只需要一行 CSS 就能讓文字變色，而保留紅色徽標不變：
/* 深色模式下，將黑色文字部分變為白色，而紅色部分維持原樣 */
.dark .logo {
--logo-black: #ffffff;
}
/* 甚至在特定活動頁面，可以將整個 LOGO 的色系任意抽換 */
.xmas-theme .logo {
--logo-red: #2d7a46; /* 變為聖誕綠 */
--logo-black: #c8a2c8;
}
這樣一來，SVG 的色彩控制權就徹底交回了前端 CSS 的手中。
太實用了！這套 CSS 變數控制雙色的結構我先收下了。等我拿到新格式的 .ai 檔，我再回來找你！謝謝！
沒問題，期待下次帶新檔案回來，我們再把這套雙色控制在你的 LOGO 上實現。下次見！
本次實戰進度備忘
- 第一個檔案（齒輪圓形徽標）：已完成！輸出為 180K 乾淨單色 SVG，已注入
currentColor，並完成視覺驗證。 - 第二個檔案（LOGO）：舊格式 AI8 無法在開源無頭環境還原。待開發者取得新版格式或 SVG 檔後，再行對應 Class 分組與 CSS 變數處理。
這場開源工具與 Adobe 私有格式的遭遇戰就此落幕。