DevToolbox

免費線上 SVG Optimizer

SVG 壓縮 / 格式化工具——線上最佳化、壓縮和清理 SVG 檔案。移除 Inkscape / Illustrator 元資料、注解、空群組和多餘屬性,即時預覽結果。免費,100% 用戶端執行。

100% 用戶端處理 · 資料永不離開您的瀏覽器

Optimization Options

Optimized output will appear here

使用說明 SVG Optimizer

將 SVG 程式碼貼到 輸入 SVG 區域,選擇最佳化選項,然後點擊 最佳化 或按 Ctrl/Cmd+Enter

  • 移除注解 — 刪除 <!-- ... --> 注解區塊。
  • 移除元資料 — 移除 Inkscape / Illustrator 嵌入的 <metadata> 元素。
  • 移除編輯器屬性 — 刪除 inkscape:*sodipodi:*data-name 屬性及其命名空間宣告。
  • 壓縮空白 — 規範化屬性值和標籤間的多餘空格與換行符。
  • 移除空群組 — 移除無子元素的 <g></g> 元素。
  • 四捨五入數字 — 降低路徑座標的小數精度(如 123.456789 → 123.46)。

統計列顯示原始大小與最佳化大小及節省比例。使用 格式化 將壓縮的 SVG 美化輸出。按 Ctrl/Cmd+K 清空。

常見問題

SVG 最佳化具體做了什麼?

SVG 最佳化會移除渲染時不需要的資料:編輯器元資料、XML 注解、空容器元素、多餘的命名空間宣告和多餘的空白符。還可對路徑資料中精度過高的小數進行四捨五入,最終得到更小但瀏覽器渲染結果完全相同的 SVG。

為什麼 Inkscape 或 Illustrator 匯出的 SVG 含有這麼多額外資料?

Inkscape 和 Adobe Illustrator 會嵌入私有命名空間屬性(inkscape:*、sodipodi:*、ai:*)以及元資料區塊,用於儲存編輯狀態:圖層名稱、格線設定、字型資訊和文件屬性。這些在編輯器中必要,但對瀏覽器渲染毫無意義。

最佳化會改變 SVG 的外觀嗎?

本工具的選項設計為視覺無損。移除注解、元資料和編輯器屬性不會改變渲染結果。將路徑數字四捨五入到 2 位小數在一般顯示尺寸下肉眼看不出差異(誤差小於 0.01px)。建議部署前始終預覽輸出結果。

路徑資料精度為何影響檔案大小?

向量繪圖工具通常以 6–10 位小數匯出路徑座標,而網頁顯示只需 1–2 位小數。對於含有大量路徑段的複雜插圖,四捨五入可顯著減少字元數量。

安全最佳化和不安全最佳化有何差異?

安全最佳化保留視覺輸出:移除注解、元資料、編輯器屬性和空群組。不安全最佳化可能改變外觀:移除 viewBox 屬性、修改被 CSS 覆寫的顏色,或移除 JavaScript 引用的 id 屬性。本工具只套用安全最佳化。

與 SVGO 相比如何?

SVGO 是業界標準的 Node.js 最佳化器,擁有數十個外掛程式,包含進階路徑合併。本瀏覽器工具涵蓋最具影響力的最佳化項目,無需安裝。生產建置流水線建議使用 SVGO 或 svgo Vite/webpack 外掛;本工具適合處理單一檔案。

相關工具