最佳化是一輪檢查,不是一句無損承諾
位元組變少,圖形真的沒變嗎?先比較再下載。
較小的 SVG 只是候選輸出。sanitize 是針對成對 script、帶引號 event 屬性與 javascript: href 的窄清理,不是完整安全掃描;multipass 會重跑選定的 SVGO pipeline,而精度、ID reference、外部 CSS、互動與實際渲染仍要逐項確認。
<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>
<svg width="64" height="64" viewBox="0 0 64 64"><title>Signal mark</title><path fill="#bfd456" d="M8 32h48"/></svg>
檔案少了什麼
把最佳化結果拆成 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 04ID 與重複使用的 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 可能有不只一個使用者。
- defs、gradient 與其他 paint server
- mask、clipPath 與 filter
- 文件內外的 CSS selector 與 script
- 動畫、互動與外部 fragment
交付前檢查流程
壓縮的最後一步,是看得見也測得到的證據。
執行最佳化
在瀏覽器 Web Worker 中執行選定的 SVGO pipeline。
比較位元組
Before/After 計算原始 UTF-8 大小;不包含 gzip。
並排預覽
頁面以 data URL 放進 img 顯示前後版本;這不是 inline SVG 互動或多尺寸測試。
檢查名稱與 reference
核對 title、ID、gradient、mask、filter、CSS 與動畫 hook。
複製、下載並回歸
有輸出後可複製或下載 optimized.svg;重要資產仍要跑視覺與互動測試。