SVG 最佳化工具

在 vector markup 進入 component、icon set 或靜態資源 bundle 前先整理乾淨。

最佳化設定

數值精度2 位小數

較低精度可進一步縮小檔案,但過度四捨五入可能讓 path 變形。2 或 3 是不錯的預設值。

原始
無預覽
最佳化後
無預覽
輸出 code

SVG 最佳化如何運作

移除不影響渲染的資料

設計工具匯出的檔案常包含 metadata、comments、editor namespaces 和看不見的 markup,這些會增加 bytes,但不改變畫面。

降低 path 精度

像 10.5432109 這種座標,常能四捨五入到 10.54 而看不出差異,尤其是小尺寸 icon。

上線前先檢查

當 viewBox、fills、strokes、ARIA labels 和重要 IDs 會影響渲染、樣式、動畫或無障礙時,最佳化應保留它們。

常見問題

最佳化後 SVG 會變模糊嗎?

不會。SVG 是 vector,最佳化是修剪 markup,不會 rasterize 圖片。唯一風險是 path 值四捨五入太激進。

為什麼最佳化後 SVG 有時反而更大?

如果原始檔已經壓得很緊或手動最佳化,可移除的內容可能很少。這種情況下輸出大小可能接近,甚至偶爾稍大。

支援批次最佳化嗎?

這頁設計給單檔檢查和調整。批次最佳化請在 pipeline 使用 SVGO 這類 build-step 工具。

SVG 最佳化會弄壞動畫或樣式嗎?

有可能。如果 optimizer 移除 CSS 或 JavaScript 依賴的 IDs、classes、metadata 或 precision,就可能出問題。互動 SVG 請預覽結果並保留重要屬性。

裝飾性 SVG 需要 accessibility labels 嗎?

裝飾性 SVG 通常可對輔助科技隱藏。有資訊意義的 icons 和 illustrations 應保留有意義的 titles、labels 或周邊文字。