跳到工具區
Web 開發

SVG 壓縮與最佳化工具

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

輸入0 個字元
結果
預覽本機影像解碼
最佳化前
尚無預覽
最佳化後
尚無預覽
就緒

想要更順手的原生工作流程?

把「SVG 壓縮與最佳化工具」放進一個快速鍵。

DevSexy Mac 版保留同樣私密的本機處理,同時提供全域快速鍵;不用管理瀏覽器分頁,需要時直接叫出。

全域快速鍵可離線使用本機處理
免費試用 Mac 版

目前的瀏覽器工具仍然免費。

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

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

較小的 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 保守最佳化的變化,再單獨決定是否移除顯式尺寸。

使用範例會替換目前輸入、參考輸入、操作與選項。以下均為公開示範資料。

移除註解並保留 viewBox

保守模式、啟用清理、保留尺寸。

輸入

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- public note --><path d="M0 0h24v24H0z"/></svg>

路徑與 viewBox 仍在,應在實際使用位置比較原始碼和渲染。

viewBox="0 0 24 24"
<path

移除 width 和 height

對已經帶有 viewBox 的源圖啟用移除尺寸。

輸入

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>

viewBox 保留;CSS 或容器佈局需要負責實際顯示尺寸。

viewBox="0 0 24 24"

繼續處理相關任務

SVG 與 Android VectorDrawable 轉換工具

在瀏覽器本機雙向轉換 SVG 與 Android VectorDrawable 的相容 path、基礎圖形及純色 paint 子集,遇到未支援特性就停止。

HTML/SVG 轉 JSX/TSX 工具

在瀏覽器本機改寫常見 HTML/SVG attribute 與簡單 inline style,輸出 Fragment、JSX component 或 TSX component 骨架。

CSS 色碼與色彩空間轉換器

轉換 HEX、RGB、HSL、OKLCH 與 Display P3 等 CSS 顏色,檢視色域映射、sRGB fallback,並計算 Alpha 合成後的 WCAG 對比。

在 DevSexy Mac 應用程式中重複處理

反覆處理本機資料時,可透過 Option 快捷鍵開啟原生應用程式,離線使用工具。

直接回答

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

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

它能做什麼?

  • 最佳化
  • 格式化

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

  1. 01

    準備輸入

    保留原 SVG,選擇保守或最大最佳化策略。

  2. 02

    選擇操作

    分別決定是否清理內容和移除尺寸。

  3. 03

    核對結果

    發布前檢查 ID、引用、無障礙文字及實際渲染。

常見問題

清理選項是完整的安全淨化器嗎?
不是。它移除特定 script、事件屬性和 javascript 連結模式,不能為任意不可信 SVG 或所有嵌入場景提供完整安全保證。
移除尺寸時為什麼保留 viewBox?
viewBox 定義座標系;移除 width 與 height 後,佈局接管顯示尺寸。丟掉座標系可能破壞回應式顯示。
最佳化會影響外觀或引用嗎?
可能。應在真實使用位置檢查 ID、遮罩、濾鏡、外部引用與樣式,最佳化成功不等於視覺等價。