專題 C5:影像處理
SVG 最佳化與轉換最佳實踐
SVG 很高效,但設計工具輸出的檔案常帶著多餘 metadata、冗長 path 與不穩定的 viewBox。沒有管線,效能和渲染都會慢慢惡化。
最佳化要以安全變換為主
真正適合正式環境的最佳化,是移除編輯器 metadata、未使用定義與過多精度,而不是一開始就做激進重寫。
每次調整最佳化 preset,都要檢查圖示對齊、筆畫與 viewBox 是否仍然正確。
轉換應該發生在交付邊界
- 設計主資產盡量維持 SVG 為唯一真源。
- 只有目標平台必須使用點陣圖時,才導出 PNG 等衍生版本。
- 不要把點陣輸出反過來當主資產繼續編輯。
實用輸入/輸出範例
輸入
120KB 匯出的 SVG,包含設計工具 metadata 目標:網站圖示 + 社群預覽 PNG
輸出
最佳化後 SVG <20KB 依目標尺寸輸出 PNG 衍生檔