dPhhAt3dkwNe57E0VIETCopNBAvS4qtY0z2O1th0
Bookmark

《Illustrator 轉 SVG 實戰小說》之四:多色與雙色處理邏輯的深水區討論

在順利解決單色 LOGO 後,Icekimo提出了下一個更進階的挑戰:一個包含紅色與黑色的雙色 LOGO。然而,這一次等待他們的,是一個誕生於 17 年前、完全不同世代的 Illustrator 舊格式檔案。


Icekimo

其實我只剩另一個檔案(LOGO.ai),它是雙色——紅色的徽標加上黑色的文字。這時候能用 CSS 定義雙色填入嗎?

13:00
Claude Opus

好問題!這正是我前面提到「多色處理邏輯完全不同」的實際案例。雙色需要不同的技巧,我先看一下這個新檔案的結構。

13:02

Claude Opus在本地終端機執行了 file 指令,然而輸出結果令人吃驚:

$ file LOGO.ai
LOGO.ai: ASCII text, with CRLF line terminators

「這不是 PDF 封裝,而是純文字格式!」Opus意識到,這個檔案與前一個大相逕庭: * PostScript/EPS 為基礎的舊格式:這是 2007 年用 Illustrator 8.0 存的老檔案(AI8 引擎)。 * CMYK 顏色模式:文件內部使用的是印刷用的 CMYK 顏色,而非網頁用的 RGB 顏色。

戰役一:無頭環境與 Ghostscript 的撞牆期

由於它不是 PDF 封裝,pdftocairo 直接報錯退場。舊版 EPS 基礎的 .ai 必須依賴 Ghostscript 將 PostScript 解譯成 PDF,再送去轉換。

Claude Opus嘗試執行 Ghostscript:

$ gs -dSAFER -dNOPAUSE -dBATCH -sDEVICE=pdfwrite -sOutputFile=temp.pdf -dEPSCrop LOGO.ai

結果產出的 temp.pdf 只有 2KB,重新渲染成 PNG 後是一片空白。 「這是因為這個 LOGO 的座標在很奇怪的位置(負座標、超大範圍),-dEPSCrop 沒抓對。」

Opus嘗試直接使用 Inkscape 的 EPS 匯入功能,但在 Linux 伺服器的無頭(Headless)環境下,Inkscape 缺乏 X11 display 連線,直接拋出錯誤中斷。

戰役二:代碼解析!挖出檔案內部的真相

為了找出畫不出東西的原因,Opus決定直接以文字檢視器切入,剖析這個 AI8 檔案的內部代碼結構:

$ grep -E "BeginLayer|Color|Gradient|Pattern" LOGO.ai
%AI5_BeginLayer
%%DocumentProcessColors: Cyan Magenta Yellow Black
%AI8_BeginBrushPattern
%AI8_BeginGradient

在深入檢查代碼後,Opus發現了幾個關鍵事實: 1. 結構正常:檔案確實包含了圖層(%AI5_BeginLayer)、漸層(%AI8_BeginGradient)、以及筆刷(%AI8_BeginBrushPattern),代碼也沒有損毀。 2. 私有協定的根本限制:它之所以畫不出來,是因為它深度依賴 Adobe 的私有初始化指令(如 %AI8_Begin 出現了 42 次,以及 Adobe_Illustrator_AI5 等 procset)。現代開源解譯器在沒有載入這些 Adobe 私有庫的情況下,根本無法執行其繪圖指令。

而最令人震驚的是它的顏色結構:

# 搜尋檔案中的 CMYK 色值
$ grep -o -E "[0-9\.]+ [0-9\.]+ [0-9\.]+ [0-9\.]+ k" LOGO.ai | sort | uniq
0.335 0.268 0.201 0.000 k
0.730 0.430 1.000 0.220 k
# ... (後面還有 20 多種不同的 CMYK 組合)

「這個 LOGO 內部有高達 20 多種不同的 CMYK 色值,還包含了一個 256 階灰階漸層!」

Icekimo

怎麼會這樣?我視覺上看明明只有紅跟黑兩個顏色啊?

13:30
Claude Opus

這是因為 LOGO 內部可能使用了細緻的漸層陰影、半透明疊色或是描邊,這在程式碼層面被定義成了數十種色值。這意味著它不是一個純色 LOGO,我們不能用簡單的單色 currentColor 來處理它。

13:32

面對這堵因為歷史格式與複雜色彩所築起的高牆,兩位冒險者不得不停下腳步,討論最終的應對路線。

導讀
選擇語音
1x
* 更改設定將重新朗讀文章。