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 或周邊文字。