實用創作流程
SVG 標誌適配深色模式：實測 currentColor
咖啡館的標誌在淺色賬單上很清楚，放進深色網站頁頭卻消失了。首先要確認網站如何插入 SVG：內聯標記與外部圖片接收頁面顏色的方式並不相同。
我們在 Ciyo 的檔案工作區製作虛構的 Cedar Cup 標誌，並保留可開啟的 HTML 示例。唯一的杯子路徑不變。本例測試的是明確的顏色編輯與瀏覽器行為，不是品牌重設計或整個網站審計。
保留未經修改的 SVG 原始母檔
編輯前先檢查原始檔，記錄 viewBox、路徑資料和固定填色。多種硬編碼填色、描邊或嵌入樣式可能需要分別決定；替換一個屬性不能證明整個主題系統已經完成。
原圖的 viewBox 為 0 0 120 100，唯一的路徑填色是 #303036。Ciyo 在程式碼旁渲染了預覽，用來辨認標誌；可靠編輯所需的資訊仍來自 SVG 原始碼。
只改填色，保留幾何
對這個單色標誌，Ciyo 只把 fill="#303036" 換成 fill="currentColor"。獨立檔案比較確認路徑和 viewBox 完全相同。原檔案為 266 位元組，編輯版為 271 位元組，這些數字只描述保留的兩份檔案。
currentColor 使用元素的 color 值。SVG 內聯時，CSS 可以從所在頁面環境提供該值。應明確選定淺色與深色版本的顏色，而不是依賴未說明的預設值。
保持這份 SVG 的 viewBox 和每條路徑不變，另存一份把唯一固定填色替換為 currentColor 的副本。製作真實 HTML，在淺色和深色區域分別展示固定填色與 currentColor 標誌，再加一個外部 img 對照。渲染並檢查 HTML，報告計算填色，回傳可編輯的 SVG 與 HTML 檔案。在真實 HTML 中測試兩種背景
保留的頁面在兩種對比背景上展示固定填色和 currentColor。淺色區域都使用 #303036；深色區域的 currentColor 使用 #FAF6ED，原版仍是炭灰色，因此問題很容易看出。
我們在 Chrome 開啟實際儲存的 HTML，核對內聯 SVG 的計算填色。這能驗證當前瀏覽器裡的這份標記和樣式，不能證明所有品牌色的對比度或所有發布工具的相容性。
| 區域 | 固定填色標誌 | currentColor 標誌 |
|---|---|---|
| 淺色 | #303036 | #303036 |
| 深色 | #303036 | #FAF6ED |
保留外部圖片作為對照
透過 img 載入的 SVG 是獨立圖片文件。父頁面宣告 color，並不等於指示其中的路徑改色。我們的外部圖片對照有意展示這一邊界。若網站需要帶主題色的外部檔案，可以明確匯出顏色版本，或採用合適的內聯實現。
第一次生成的 HTML 在資料 URI 中有錯誤的引號，Ciyo 在最終瀏覽器核對前修正了編碼。這說明應該檢視實際渲染的檔案，而不是僅憑看似合理的程式碼塊驗收。
整合前檢視儲存的頁面
開啟下面的示例，檢查兩種背景，再以目標尺寸核對實際頁頭標誌。顏色修改在技術上正確，小細節仍可能看不清。若標誌可互動，還應分別檢查焦點、連結名稱和可訪問文字。
HTML 自包含，原始碼沒有指令碼。其中的 CSS 與內聯標記是供開發者檢查的示例，不會自動更新線上網站。
隨檔案交付顏色規則
把未經修改的原始母檔、編輯後的 SVG 和核對過的 HTML 一起交付，寫清測試過的插入方式與每種背景對應顏色，避免同事把正確檔案放進無法繼承預期顏色的環境。
多色品牌應先約定哪些區域保留固定顏色。先從受控的單色標誌開始，保留刻意設計的品牌色關係，不要把所有填色都一律改為 currentColor。
實用問答
currentColor 會改變外部 img 的顏色嗎？
父頁面的 color 不會自動進入獨立 SVG 圖片文件。請測試插入方式，按需使用明確的顏色版本。
本例重畫標誌了嗎？
沒有。只改了一個 fill 值，路徑資料與 viewBox 和原始母檔一致。
深色模式顏色正確就足夠無障礙了嗎？
還不夠。請在最終介面檢查對比度、尺寸、名稱和連結行為。
在兩種背景上測試一個標誌
把已確認的 SVG 放進 Ciyo，要求保留瀏覽器示例，再把編輯檔案交給網站開發者。