如何為網頁最佳化 SVG 檔案

網頁上大多數的 SVG 都比實際需要大 2–4 倍。Figma、Illustrator 與 Inkscape 匯出時都會塞入 metadata、隱藏圖層以及冗長的路徑資料，而這些重量最後都會送到使用者手上。好消息是：SVG 最佳化完全是機械式的流程，在瀏覽器裡就能完成。

哪些東西會被移除

一個典型的最佳化器會跑 30–40 條規則，每條只做一件事。最明顯的幾項收益來自：

• Metadata —— <metadata>、<title>、<desc>、Inkscape 命名空間和 Figma 留下的註解。對視覺完全沒有影響。
• 註解與 CDATA —— 從來不會顯示，正式環境不需要。
• 隱藏圖層 —— 被匯出工具漏下的 display="none" 或透明度為 0 的元素。
• 多餘的 transform —— 一個什麼都不做的 translate(0,0) 或可以合併的矩陣。
• 精度 —— 路徑座標從 6 位小數取整到整數像素。
• 預設屬性 —— 本來就是黑色的元素上還寫著 fill="black"。
• ID —— 沒有被引用或是自動產生的 ID。

要保留的部份

• viewBox —— 少了它，響應式縮放就會壞掉。
• 無障礙標題 —— 如果 SVG 是內容（而不是裝飾），要為螢幕閱讀器保留 <title> 與 <desc>。
• 語意化類別名稱 —— 如果你用 CSS 為 SVG 做動畫或樣式，不要讓最佳化器重新命名它們。

執行最佳化器

把你的 SVG 貼進 SVG 最佳化器 然後按下最佳化。它在瀏覽器裡跑（不會上傳），並會顯示最佳化前後的大小對比。

一個典型的 Figma 匯出通常可以縮小 30–60%。手寫 SVG 的空間會比較小（一般 10–20%），因為本來就沒什麼可以剝掉的東西。

最佳化出狀況時

過於激進的最佳化可能會影響幾件具體的事：

• 用 ID 參照元素的動畫 —— 如果 ID 被改名，動畫會停止運作。
• 查詢特定類別的腳本 —— 如果類別名稱被壓縮，腳本就會失敗。
• 帶有少見效果的濾鏡 —— 如果精度被壓得太低，渲染結果會不一樣。

如果最佳化後的 SVG 看起來怪怪的，先把 cleanupIds: false 或 removeHiddenElems: false 當作起點，再用二分法找出真正造成問題的那條規則。

自動化

對建置流程來說，最直接的方法是把 npm 上的 svgo 套件加到資源管線裡。對一次性的小任務，瀏覽器裡的工具更快。目標其實是一致的：只送瀏覽器真正需要的內容。