SVG 最佳化器
純前端 SVG 瘦身工具:**移除註解 / metadata / 編輯器特有屬性**(Sketch / Figma / Inkscape)/ **預設屬性值**(opacity=1、stroke=none 等)/ 空 group + defs / **數字捨入到指定精度**,並 collapse whitespace。前後並排預覽 + 顯示節省 %。
啟用的最佳化
478 bytes
182 bytes−62%
原始預覽
最佳化後預覽
›如何使用
- 貼上 SVG 原始碼到左欄,或按 開檔 上傳
.svg檔。 - 右側網格切換 10 種最佳化(預設全開,可依需求關閉某些);精度 控制捨入小數位數(預設 2)。
- 右欄即時顯示最佳化後 SVG,節省 % 直接顯示綠色 −X%。
- 下方並排顯示 前後渲染預覽,確認最佳化沒破壞畫面(理論上不會,因為我們只移除無視覺影響的內容)。
- 複製 直接拿去用,或 下載 .svg。
Tips
- Sketch / Figma 匯出的 SVG 通常多 30-60% 編輯器專屬屬性,啟用「移除編輯器屬性」一個動作就可以大瘦身。
- 精度 2 通常足夠 — 路徑座標 0.123456 跟 0.12 在 1000px 圖上肉眼分不出來。極簡 icon 可調 1,複雜 illustration 才需要 3。
- 移除預設屬性值 涵蓋
opacity=1、stroke=none、stroke-width=1等,瀏覽器渲染時自動套用同樣的預設,所以可放心移除。 - 對標 svgo / svgomg:那邊功能更完整(70+ plugins),我們是「貼上即用、合理預設」的輕量版。
💡 完全本地處理,SVG 內容不會離開瀏覽器。並排預覽用 dangerouslySetInnerHTML 直接嵌入,只在這個工具內信任你貼上的 SVG(不會用在別處)。