SVG 瘦身 / 清理
只做三件事:刪掉註釋、XML 聲明與 <metadata> 元數據塊,並壓縮標籤之間的結構性空白。文字內容與屬性值逐字節保留;id / class 一律不刪(它們可能被 CSS / JS / url(#…) 引用)。全程本地,不聯網。
關於「SVG 瘦身 / 清理」
這個工具只做三件事:刪註釋、刪 XML 聲明、刪 <metadata> 元數據塊,再壓縮標籤之間的結構性空白。文字內容與屬性值逐字節保留,id 與 class 一律不刪——它們可能正被 CSS、JS 或 url(#…) 引用,刪了就會靜默壞樣式。
它不做路徑數據優化(那類工具會重算曲線控制點,收益更大但風險也更高,容易讓圖標在個別渲染器裏變形)。所以這裏的定位是「安全清理」:把設計軟件導出時塞進來的一堆廢話去掉,不改變圖形本身。壓縮幅度取決於源文件的囉嗦程度,從設計工具直接導出的文件通常能減掉不少。
三個常見用法
- Figma / Sketch / Illustrator 導出的 SVG 帶大量註釋與 metadata,先清一遍再上線。
- 要把圖標內聯進 HTML 時,減少標籤間空白能明顯縮小頁面。
- 排查「爲什麼這個 SVG 比同類大十倍」——多半是元數據或編輯器私有節點。
常見問題
會破壞動畫嗎?
不會。SMIL 或 CSS 動畫依賴的元素與屬性不在刪除範圍內,只刪註釋與元數據。
爲什麼不能刪 id?
id 可能被 <use>、濾鏡、蒙版或外部 CSS 引用,刪掉會出現「某些圖標突然沒顏色/沒陰影」。
能壓掉多少?
取決於源文件。導出工具留下的註釋與 metadata 越多,收益越大;手寫精簡過的 SVG 幾乎沒有可刪的。