SVG 壓縮最佳化工具 - SVGO 線上精簡與代碼複製

線上壓縮和精簡 SVG 檔案,基於瀏覽器端 SVGO 清理 Figma、Illustrator 等工具導出的冗餘向量代碼,並支援複製最佳化後的 SVG。

點擊進入沉浸模式
拖曳輸入 SVG 檔案,或點擊選擇

支援 .svg 檔案,也可以直接貼上 SVG 代碼;最佳化過程在瀏覽器本機完成。

最佳化模式

更穩妥的預設 SVGO 最佳化,適合大多數生產圖示。

貼上 SVG 代碼,或選擇一個 SVG 檔案開始。

SVG 檔案不會上傳伺服器。

原始體積
--
最佳化後體積
--
已節省
--

視覺預覽

最佳化後的 SVG 會顯示在這裡,便於核對圖形是否有明顯變化。

最佳化結果

載入 SVG 後會顯示精簡代碼、體積對比和預覽。

如何使用

  1. 點擊「加載示例 SVG」查看一個帶冗餘元資料的設計導出圖示如何被精簡,或拖曳輸入自己的 .svg 檔案。
  2. 也可以把從 Figma、Illustrator、Sketch 或代碼倉庫複製的原始 <svg> 代碼貼上到輸入框。
  3. 選擇「標準」進行更穩妥的預設最佳化;需要進一步減小體積時,再切換到「激進」。
  4. 查看「原始體積」「最佳化後體積」和「已節省」,並用右側預覽確認圖形沒有明顯變化。
  5. 點擊「複製 SVG 代碼」用於 HTML、React 或圖示組件,或點擊「下載 SVG」保存最佳化檔案。

示例場景:把設計工具導出的品牌圖示貼上進工具,確認節省比例和預覽效果後,複製精簡後的內聯 SVG 用於網頁導航欄或按鈕圖示。

核心功能

  • SVGO 驅動的 SVG 壓縮:使用瀏覽器端 SVGO 精簡向量標記,去除元資料、空分組和可壓縮屬性。
  • 清理 Figma / Illustrator 導出代碼:適合把設計工具導出的冗長 SVG 變成更適合上線的圖示代碼。
  • 即時體積對比:載入後顯示原始體積、最佳化後體積和節省比例,快速判斷是否值得替換資源。
  • 複製代碼或下載檔案:一鍵複製最佳化後的 <svg> 標記,也可以下載新的 .svg 檔案。
  • 本機處理保護設計資產:檔案讀取、SVGO 最佳化、預覽和導出都在當前瀏覽器內完成,不上傳圖示、Logo 或未公開插畫。

相關工具

財富自由計算機 2026 (剔除通膨版) - 退休金與複利模擬器

2026 最新 FIRE 財務自由計算機(剔除通膨版)。拒絕虛高數字,精準模擬實際購買力下的複利增長。支援 4% 法則驗證與退休金缺口反向推算。支援一鍵匯出 CSV,完美適配 Excel 或 Notion 財務看板。隱私優先,本機計算零上傳。

倉位計算機 - 按風險比例規劃交易倉位

根據帳戶資金、風險比例、進場價和停損價計算交易倉位。所有計算在瀏覽器本機完成,不上傳帳戶資料,可對比多檔風險方案。

複利計算機 | 免費定期定額收益與 APY 增長圖表

輸入本金、定期投入、年化報酬率和投資年限,計算複利增長結果,並用互動式圖表展示本金、利息和最終總額。資料僅在本機計算。

線上房貸/貸款計算機 - 即時圖表與還款明細(本息平均攤還/本金平均攤還)

使用 Loan Calculator/Mortgage Calculator 在瀏覽器本機計算每月還款額、總利息與還款明細。輸入貸款金額、年利率和期限,立即查看圖表與還款計畫表。

線上投資與 ROI 計算機 - 定期定額/複利收益視覺化

使用 Investment Calculator/ROI Calculator 在瀏覽器本機估算初始本金、每月定期定額、年化報酬率和通膨後的投資結果。立即查看複利圖表、本金/收益拆解、ROI 與年度明細。

APR 與 APY 換算計算機 - 名目利率與實質利率轉換

使用 APR to APY Calculator 在瀏覽器本機完成 APR/APY 雙向換算。輸入利率並選擇複利頻率,立即查看有效年利率、差值和多頻率比較表。

利潤率計算機 - 毛利率、加成率與售價線上換算

使用這款利潤率計算機在瀏覽器本機計算毛利、Margin 和 Markup。輸入成本和售價,或輸入成本與目標毛利率,立即推算售價並避免把加成率誤當利潤率。

CPM 與 CPC 計算機 - 廣告投放 CTR 與成本線上試算

使用 CPM 與 CPC 計算機在瀏覽器本機試算廣告花費、曝光數、點擊數、CPM、CPC 和 CTR。輸入預算與目標成本,快速推演可獲得的曝光或點擊。

計算邏輯

SVG 最佳化不是把向量圖轉成位圖,而是清理 XML 向量標記本身。本工具調用運行在瀏覽器端的 SVGO,常見處理包括刪除編輯器元資料、合併無意義分組、移除空屬性、壓縮路徑和捨入坐標。

「標準」模式偏向穩妥,適合大多數圖示和插畫;「激進」模式會啓用多輪最佳化並使用更短數值精度,體積可能更小,但極複雜路徑可能出現細微視覺差異。工具不會點陣化 SVG,最佳化後仍然是可複製、可下載的向量代碼。

常見問題

如何減小 SVG 檔案體積?

最常見的方法是移除設計工具寫入的元資料、空分組、冗餘屬性和可壓縮路徑。本工具會用 SVGO 在瀏覽器裏執行這些最佳化,並顯示節省比例。

如何清理 Figma 導出的 SVG 代碼?

把 Figma 導出的 .svg 檔案拖曳輸入工具,或直接貼上 <svg> 代碼。建議先用「標準」模式檢查結果,確認預覽正常後再複製或下載。

SVG 壓縮會降低圖片品質嗎?

通常不會。SVG 是向量標記,SVGO 主要移除不可見的元資料和冗餘結構。不過極複雜路徑在「激進」模式下可能出現細微變化,建議先看預覽再替換生產資源。

這個工具會上傳我的圖示或插畫嗎?

不會。檔案讀取、SVGO 最佳化、預覽、複製和下載都在瀏覽器本機完成。

可以把最佳化後的 SVG 直接用於 HTML 嗎?

可以。「複製 SVG 代碼」會複製完整的 <svg> 標記,適合內聯到 HTML、React 組件或圖示系統。

它能把 PNG 或 JPG 轉成 SVG 嗎?

不能。這個工具只最佳化已有 SVG 向量代碼,不執行位圖轉向量。