你的 SVG 比需要的大 10 倍

從 Illustrator 匯出一個圖示。檢查檔案大小。在文字編輯器中打開它。

你會發現:沒人需要的元資料、精確到 15 位小數的小數點、空群組、編輯器特定的垃圾,以及 2019 年的註解。一個簡單的 Logo 重達 50KB,而它可以是 3KB。

SVG 只是 XML。每個不必要的字符都是你的使用者下載的位元組。

設計工具添加了什麼

Illustrator、Figma、Sketch——它們都嵌入額外的資料:

<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;" xml:space="preserve">

這些對於渲染都不是必需的。這是設計工具正確重新打開檔案的元資料。

精確度問題

設計工具使用高精度座標:

<path d="M12.374892749237,45.293847293847 L67.293847293847,89.374892749237"/>

瀏覽器無論如何都會四捨五入到大約 1-2 位小數。所有這些數字都是浪費的位元組。

更好:

<path d="M12.37,45.29 L67.29,89.37"/>

相同的視覺結果,大小的一小部分。

空群組和 ID

匯出通常創建這樣的結構:

<g id="Layer_1">
  <g id="icon">
    <g>
      <path d="..."/>
    </g>
  </g>
</g>

三個巢狀群組來容納一個路徑。每個群組都增加位元組。除非它們在做某事(如應用變換或樣式),否則移除它們。

ID 類似。每個元素上的 id="XMLID_847_" 累積起來。保留你在 CSS 或 JavaScript 中引用的 ID。移除其餘的。

要優化什麼

移除元資料。 註解、編輯器資訊、你不使用的命名空間。

減少精度。 2-3 位小數通常足夠。

展平群組。 不必要的巢狀沒有目的。

清理 ID。 保留引用的,移除自動生成的垃圾。

合併路徑。 可以是一個路徑的多個路徑應該組合。

移除隱藏元素。 你在設計工具中隱藏但沒有刪除的圖層。

何時保持檔案大小

有時更大是正確的:

動畫。 ID 和群組通常作為動畫目標。不要盲目移除它們。

CSS 樣式。 如果你用外部 CSS 樣式化 SVG,你需要那些 ID 和類別。

未來編輯。 超級優化的 SVG 難以編輯。保留原始檔案,優化生產版本。

比較

簡單圖示,優化前:

原始:24KB
移除元資料後:8KB
減少精度後:4KB
清理結構後:2KB

這是 12 倍小。載入更快。解析更快。每次頁面載入,每個使用者。

內聯 vs 外部

小型 SVG(優化後 1KB 以下)通常最適合直接內聯在 HTML 中。沒有額外的 HTTP 請求。

較大的 SVG 或重複使用的圖示更適合作為可以快取的外部檔案。

平衡點取決於你的情況。一般來說:如果你使用 SVG 一次且它很小,內聯它。如果你重複使用它或它很複雜,外部檔案。

---

SVG 優化是免費的效能。在發布前通過優化器運行你的圖示。花幾秒鐘,在每次頁面載入時永遠節省位元組。