無需上傳, 100% 本機處理, 無需帳戶

SVG 優化器

貼上或放入 SVG 並使用 SVGO 縮減大小。一切保留在你的瀏覽器中。

SVG 優化器 的運作方式

SVG 最佳化工具在你的瀏覽器的 Web Worker 中執行 SVGO（SVG Optimizer），在不上傳 SVG 檔案的情況下對其進行壓縮和清理。SVGO 套用一組可設定的外掛，移除注釋、折疊空白、合併相同路徑、將形狀轉換為最精簡的表示形式，並去除沒有視覺效果的屬性。結果是一個與原始 SVG 渲染效果完全相同、但體積更小的 SVG。

Figma、Illustrator 或 Inkscape 等設計工具產生的 SVG 檔案通常包含大量多餘內容：編輯器特定的中繼資料、空的群組、冗餘的轉換屬性，以及瀏覽器不需要的命名空間聲明。SVGO 的預設外掛集可靠地移除這些多餘內容。最佳化後的檔案以下載形式提供，並顯示大小縮減百分比，讓你確認最佳化是否有價值。

作者 Bastien Sulyan

SVG 優化器 的分步使用說明

  1. 將 SVG 檔案拖曳到上傳區，或點擊瀏覽。
  2. SVGO Web Worker 使用預設外掛集立即執行最佳化。
  3. 查看縮減百分比以及原始與最佳化後的檔案大小。
  4. 點擊「下載」將最佳化後的 SVG 儲存到你的裝置。
  5. 如果特定外掛導致渲染問題，請調整外掛設定後重新最佳化。

常見使用情境

  • 前端開發者在提交到生產資產管線前，先最佳化從 Figma 匯出的圖示，將每個圖示從 4 KB 縮減到 1 KB 以下。
  • 網頁設計師清理從 Illustrator 匯出的 SVG 插圖，這些插圖包含在瀏覽器中看不見但會讓檔案臃腫的多層編輯器中繼資料。
  • 從 SVG 字符構建圖示字型的開發者，確保每個來源 SVG 在字型構建步驟前都是乾淨且結構一致的。
  • 效能工程師審計 HTML 中的內嵌 SVG，並將每個臃腫的原始檔案替換為 SVGO 最佳化版本，以改善頁面大小。

常見問題

SVGO 會改變我的 SVG 的外觀嗎？

SVGO 的預設外掛設計為視覺上無損：最佳化後的 SVG 在所有標準瀏覽器中渲染效果與原始圖片完全相同。某些激進的外掛（例如對路徑座標進行大幅取整的外掛）可能會引入細微的渲染差異。如果你發現視覺變化，請在瀏覽器中比較原始和最佳化後的檔案，並停用導致問題的特定外掛。

SVG 檔案會傳送到伺服器進行最佳化嗎？

不會。SVGO 在你的瀏覽器分頁的 Web Worker 中執行。SVG 文字從你的本機磁碟讀取，在 JavaScript 記憶體中處理，輸出返回到頁面供下載。檔案內容不會離開你的裝置。

我的 SVG 會縮小多少？

縮減程度取決於來源。從帶有編輯器中繼資料的設計工具匯出的 SVG 通常縮減 30 至 70%。本來就很精簡的手寫 SVG 可能只縮減 5 至 15%。工具顯示精確的位元組數和百分比，讓你可以逐個檔案評估。

最佳化會影響 SVG 動畫或檔案中的 JavaScript 嗎？

SVGO 的預設設定保留動畫元素和 SMIL 屬性。它確實會移除 script 元素：這個工具在 SVGO 預設集之上加入了 removeScripts 外掛，因為即將嵌入的 SVG 不應帶有可執行程式碼。某些清理屬性的外掛可能在動畫以 ID 引用這些屬性時產生互動；在最佳化使用複雜動畫的檔案後，請檢查渲染輸出。

我可以一次最佳化多個 SVG 檔案嗎？

目前版本一次處理一個 SVG 檔案。拖入一個檔案，下載結果，然後拖入下一個檔案。本版本不提供在單次工作階段中批次處理多個檔案的功能。

工具使用的是哪個版本的 SVGO？

工具在 Web Worker 中捆綁了 SVGO。捆綁的版本在工具的關於資訊中有說明。SVGO 持續維護，外掛 API 在 v1、v2 和 v3 之間有重大變化；目前的工具使用 v3 外掛格式。