跳到工具區
Web 開發

SVG 壓縮與最佳化工具

以 SVGO 縮減 SVG markup,透過 Before/After 預覽、位元組與設定明細逐項檢查結果。

Web Worker 僅在本機處理工具
輸入0 個字元
結果
預覽本機影像解碼
最佳化前
尚無預覽
最佳化後
尚無預覽
就緒

最佳化是一輪檢查,不是一句無損承諾

位元組變少,圖形真的沒變嗎?先比較再下載。

較小的 SVG 只是候選輸出。sanitize 是針對成對 script、帶引號 event 屬性與 javascript: href 的窄清理,不是完整安全掃描;multipass 會重跑選定的 SVGO pipeline,而精度、ID reference、外部 CSS、互動與實際渲染仍要逐項確認。

最佳化前151 B
<svg viewBox="0 0 64 64" width="64" height="64">
  <!-- Figma export -->
  <title>Signal mark</title>
  <path fill="#BFD456" d="M8 32 L56 32" />
</svg>
最佳化後115 B
<svg width="64" height="64" viewBox="0 0 64 64"><title>Signal mark</title><path fill="#bfd456" d="M8 32h48"/></svg>
減少 23.8% RAW BYTES

檔案少了什麼

把最佳化結果拆成 plugin 造成的變更。

Conservative 只移除註解與 metadata;maximum 的 preset-default 還會改寫結構、style、ID、數值與 path。sanitize 則在 SVGO 前移除特定主動內容。這些是待檢查的類別,不代表每份輸入都含有、或一定會移除每一類。

Metadata

PLUGIN 01

編輯器標記、產生器內容與註解

確認不需要來源脈絡後再移除

Markup

PLUGIN 02

空群組、隱藏元素與多餘屬性

檢查 CSS、動畫及互動 hook

Values

PLUGIN 03

色彩、數值、transform 與 path 精度

對照細線、小圖示與邊界像素

References

PLUGIN 04

ID 與重複使用的 paint server

連同外部 CSS、script 與 fragment 一起檢查

尺寸約定

viewBox 管座標系,width / height 管固有尺寸。

removeDimensions 必須主動開啟:已有 viewBox 時會移除最外層 width 與 height;若缺少 viewBox,但兩個尺寸都是純數字,則先建立 viewBox 再移除。帶單位或不完整的尺寸不保證會改寫,CSS 排版也可能因此改變。

viewBox預設保留/可能補上

座標系與縮放範圍

width / height可選移除

固有尺寸;外部 CSS 不一定已接手

aspect ratio需要檢查

meet、slice 與對齊方式會影響取景

<title>預設保留非空內容

是否構成可及名稱仍取決於嵌入情境

Reference 風險圖

同一個 ID 可能有不只一個使用者。

#brandGradient<linearGradient>fill="url(#brandGradient)"CSS #brandGradient<animate href="#mark">
  • defs、gradient 與其他 paint server
  • mask、clipPath 與 filter
  • 文件內外的 CSS selector 與 script
  • 動畫、互動與外部 fragment

交付前檢查流程

壓縮的最後一步,是看得見也測得到的證據。

01

執行最佳化

在瀏覽器 Web Worker 中執行選定的 SVGO pipeline。

02

比較位元組

Before/After 計算原始 UTF-8 大小;不包含 gzip。

03

並排預覽

頁面以 data URL 放進 img 顯示前後版本;這不是 inline SVG 互動或多尺寸測試。

04

檢查名稱與 reference

核對 title、ID、gradient、mask、filter、CSS 與動畫 hook。

05

複製、下載並回歸

有輸出後可複製或下載 optimized.svg;重要資產仍要跑視覺與互動測試。

直接回答

什麼是 SVG 壓縮與最佳化工具?

在瀏覽器本機以 SVGO 壓縮 SVG,比較最佳化前後的位元組與預覽;可移除特定 script/event、啟用 multipass 或 removeDimensions,輸出仍須檢查 ID、互動與渲染。

它能做什麼?

  • 最佳化
  • 格式化

如何使用 SVG 壓縮與最佳化工具

  1. 01

    選擇任務

    在工作區選擇最佳化和格式化。

  2. 02

    提供輸入

    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#7C3AED"/></svg>。內容會留在瀏覽器端的處理流程中。

  3. 03

    檢查結果

    執行工具、檢查結果與診斷資訊;頁面提供複製或下載功能時,也能直接匯出。

常見問題

SVG 壓縮與最佳化工具是什麼?
在瀏覽器本機以 SVGO 壓縮 SVG,比較最佳化前後的位元組與預覽;可移除特定 script/event、啟用 multipass 或 removeDimensions,輸出仍須檢查 ID、互動與渲染。
SVG 壓縮與最佳化工具能做什麼?
SVG 壓縮與最佳化工具支援最佳化和格式化,所有模式都能直接在目前頁面使用。
SVG 壓縮與最佳化工具會上傳我的資料嗎?
SVG 壓縮與最佳化工具會在瀏覽器中處理輸入內容。DevSexy 不會增加上傳、登入或伺服器處理步驟。
DevSexy 會在瀏覽器中處理工具輸入:不追蹤貼上的內容、不需帳號,也不會上傳。