實用創作流程
重複顯示 SVG 徽章時，如何修正重複 ID
一枚 SVG 徽章單獨顯示正常，旁邊貼上第二份後卻可能變色或出現裁切錯誤。重複的漸層或裁切路徑 ID，會讓頁面中的參照產生歧義。
我們請 Ciyo 製作兩枚虛構的 Cedar Cup 徽章，同時提供刻意保留錯誤的對照組與修正組。修正版本保留幾何形狀，改用獨立的 ID 前綴。可編輯範例能讓你在瀏覽器中檢查兩種情況。
把 ID 和參照視為同一系統檢查
ID 用來識別文件內的元素，SVG 要求它保持唯一。同一個 HTML 頁面中的兩個內嵌 SVG 根元素，不能普遍豁免這項規則。
先列出漸層、裁切路徑、遮罩、濾鏡和其他具名定義，再收集全部參照，包括 url(#...)、href 片段及無障礙參照。只改定義名稱、不更新使用位置，可能把衝突變成資源遺失。
為每個實例指定明確前綴
第一枚徽章使用 cedar-a-gradient 與 cedar-a-clip，第二枚使用 cedar-b-gradient 與 cedar-b-clip，各自參照自己的定義。真正可重用的元件，應為每個實例產生穩定且唯一的前綴，而不是每次繪製都寫死相同前綴。
修正名稱時保持繪圖不變，結果更容易比較，也能降低視覺重新設計掩蓋實際參照問題的風險。
| 實例 | 漸層 | 裁切 |
|---|---|---|
| A | cedar-a-gradient | cedar-a-clip |
| B | cedar-b-gradient | cedar-b-clip |
請 Ciyo 同時提供對照與原始碼
建立獨立專案，要求提供錯誤與修正後的內嵌徽章對照。錯誤部分必須醒目標示，以免被當成最終元件。同時要求最終 HTML、獨立 SVG 原始碼與 PNG 預覽。
這次實際對話中，畫布可以接收 PNG 預覽，卻沒有提供 HTML 或 SVG 檔案下載。我們請代理將完整原始碼貼在回覆裡，再把它保存成下方連結的範例。若你的對話也有這項限制，可使用同樣的交付方式。
為虛構的 Cedar Cup 製作實用的 SVG 重複 ID 示範。只使用程式碼工具，不呼叫付費影像或影片生成。交付可下載 HTML，其中並排放置兩枚內嵌 SVG 徽章，各自使用不同漸層與裁切路徑，定義全域唯一 ID：cedar-a-gradient、cedar-a-clip、cedar-b-gradient、cedar-b-clip。兩枚 SVG 都使用 viewBox="0 0 120 120"，以 160px 顯示。包含明確標示、重複使用 ID 的錯誤對照，接著提供修正組和文字檢查清單。同時交付兩個修正後的獨立 SVG 檔案。把修正組的 PNG 預覽加入畫布。保持錯誤組和修正組的實際 SVG 幾何一致。以程式檢查 ID 唯一性與全部 url(#...) 參照。準確說明驗證了什麼，並提供下載連結。這是虛構的網站元件示範，不是效能基準。查看最終徽章，並保留原始碼
最終畫布保留一張修正預覽：綠色圓形徽章與琥珀色六角形徽章。第一版預覽裁掉了品牌文字，代理將圖形上移、檢查最終幾何，並移除舊預覽。兩组對照都採用這份最終幾何。
依元件實例為資源加前綴
我們保留回覆中的原始碼，將修正部分與刻意錯誤的部分分開檢查。修正組有四個唯一的定義 ID 與四個資源參照，每個參照都解析至各自 SVG 內的定義。不要把解說文字當成標記原始碼掃描。
讓兩份徽章同時存在，再測試頁面
在瀏覽器中開啟 HTML 範例，比較已標示的兩組徽章。獨立繪製不能證明兩份內嵌 SVG 共用文件時的行為。刻意重複的 ID 只應留在教學用錯誤部分。
我們另外在 Chromium 中檢查保存的頁面。正式元件應於每個支援的瀏覽器中複查，並在最佳化工具重寫 ID 後再次檢查。加入第三個實例、改變順序，確認參照仍可正確解析。
常見問題
不同 SVG 根元素會讓重複 ID 變安全嗎？
同一文件中的內嵌 SVG 不應依賴這一點。為每個實例使用唯一的定義 ID，並更新參照。
只改漸層名稱就夠了嗎？
也要更新對該漸層的全部參照，並檢查裁切路徑、遮罩等其他具名定義。
為何下載頁面的一部分刻意無效？
明確標示的錯誤對照用來呈現問題，只有修正組適合重用。
把重複 SVG 元件放在一起檢查
先在 Ciyo 中完成一個經過檢查的範例。保留原始檔，在自己的專案中使用前檢查匯出結果。