只有按下優化後,這個工具才會載入官方的 SVGO 瀏覽器引擎。它採用標準外掛預設,並移除指令碼與事件處理常式,讓 SVG 更適合一般網頁使用。如果 CSS、JavaScript、漸層、遮色片或外部參照依賴某些 ID,也可以選擇保留 ID。
免費 SVG 優化
全程在瀏覽器裡執行,免上傳、免註冊。
SVG 優化有什麼作用?
SVG 優化會移除編輯軟體的中繼資料、註解、重複屬性與多餘的小數位數,讓向量檔案更小。貼上標記或選擇檔案後,SVGO 會直接在瀏覽器中執行。比較原始與優化後的預覽,再複製或下載較小的 SVG,整個過程不必上傳作品。
使用方式
- 1加入 SVG. 貼上完整的 SVG 標記,把本機 .svg 檔拖到上傳區,或載入內建範例。
- 2選擇穩妥的設定. 設定小數精度,保留多次優化以爭取更多壓縮;若其他程式碼會參照 ID,請保留 ID。
- 3優化並比較. 執行 SVGO,接著查看處理前後的位元組數與兩張視覺預覽。
- 4複製或下載. 複製精簡後的標記,或下載新的 .optimized.svg 檔案,原始作品不會被更動。
適合誰用
- 前端開發者在把圖示、Logo 與插圖加入網站或元件庫前,先縮小檔案。
- 設計師清理 Figma、Illustrator、Sketch 或 Inkscape 匯出檔中的中繼資料與編輯器專用標記。
- 效能團隊在向量素材放入 Web 套件前,測量精確的 UTF-8 位元組節省量。
- 元件作者為 React、Vue、Svelte 或一般 HTML 準備精簡的內嵌 SVG 標記。
常見問題
這個 SVG 優化工具免費嗎?
免費。無需帳號、付費或安裝即可優化 SVG。工具會顯示精確的 UTF-8 位元組變化,也能直接在瀏覽器中複製或下載結果。
SVG 會上傳到伺服器嗎?
不會。檔案讀取、SVGO 處理、位元組測量與預覽產生都在瀏覽器本機完成。Logo、圖示與尚未公開的作品不會被這個工具上傳。
SVG 檔案最大可以多大?
最多可處理 5 MB 的 SVG 原始碼。這個上限能讓手機與一般筆記型電腦保持順暢。匯出的插圖如果特別大,可以先移除內嵌的點陣圖,或把作品拆成較小的素材。
優化 SVG 會改變圖片外觀嗎?
SVGO 的設計目標是在保留顯示結果的同時移除多餘資料,但大幅捨入數值或清理 ID 可能影響複雜檔案。請比較兩張預覽,並在實際的內嵌環境中測試優化後的 SVG,再替換正式檔案。
小數精度會影響什麼?
小數精度決定 SVGO 為座標、變形與相關數值保留幾位小數。數值越低通常越省空間,但細節很多或尺寸特別大的作品可能產生肉眼可見的偏移。對多數 Web 圖示與插圖而言,預設的 3 位很實用。
應該保留 SVG 的 ID 嗎?
當 CSS、JavaScript、aria 屬性、漸層、遮色片、濾鏡或外部文件會參照 ID 時,請保留它們。對沒有外部相依性的裝飾圖片,可以關閉保留選項,讓 SVGO 移除或縮短未使用的識別碼。
優化器會移除 SVG 指令碼嗎?
會。優化流程會移除 script 元素、事件處理常式屬性與 JavaScript 連結。這能讓匯出檔更適合一般網頁圖片,但依賴指令碼運作的 SVG 應用程式不適合使用這個工具。
多次優化有什麼作用?
只要每一輪還能縮小檔案,SVGO 就會再次處理輸出。有些轉換會為下一輪帶來新的清理機會,因此可能再省一些空間,不過大多數壓縮通常在第一輪就已完成。