深入理解SVGO-Loader：優化SVG文件的利器

SVG 是一種基於 XML 的矢量圖形語言，在Web開發中，用於實現矢量圖形。相較於位圖，它能無損放大且在Retina屏幕下保持清晰。而SVG圖片的優化也顯得非常重要，不僅可以減輕網頁加載時的負擔，還能優化網站的性能，縮短頁面的加載時間。SVGO-Loader就是一款優化SVG文件的利器，本文將從多個方面對它進行詳細闡述，幫助讀者更好地理解並應用它。

一、安裝和配置SVGO-Loader

SVGO-Loader 是 webpack 的一個 loader，用於優化 SVG 文件。下面，我們將從安裝、配置兩個方面來介紹如何使用 SVGO-Loader。

1、安裝

npm install --save-dev svgo-loader svgo

2、配置

module: {
  rules: [{
    test: /\.svg$/,
    use: [
      'file-loader',
      {
        loader: 'svgo-loader',
        options: {
          plugins: [
            { removeTitle: true },
            { convertColors: { shorthex: false } },
            { convertPathData: false }
          ]
        }
      }
    ]
  }]
}

在上述代碼中，我們首先安裝了 svgo 和 svgo-loader。然後在 module.rules 中配置規則，當文件後綴為 .svg 時，使用 svgo-loader 進行優化。我們可以通過 options 配置選項來對 SVG 進行優化。在本例中，我們使用了三個插件，分別是 removeTitle（刪除標籤中的 title ），convertColors（轉換顏色），convertPathData（轉換路徑數據）。

二、使用SVGO-Loader進行SVG優化

SVGO-Loader作為webpack的一個loader，可以在自動化構建項目過程中對SVG進行優化校驗，以實現快速web應用。SVGO-Loader的優化特點大致如下：

1、刪除無用信息：SVGO-Loader可以刪去SVG裏面一些不必要的（寬高默認值的z軸坐標等等）信息。

<svg version="1.1" ... height="128px" width="128px">
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <path fill="#333333" d="M64 ...z"></path>
</svg>

優化後的結果：

<svg xmlns="http://www.w3.org/2000/svg">
  <path fill="#333333" d="M64 ...z"></path>
</svg>

2、轉換顏色格式：SVGO-Loader可以將所有顏色格式轉換為你所需要的格式。比如從rgb或rgba轉為#HEX顏色。

<path fill="rgb(255, 255, 255)"></path>

通過SVGO-Loader, 可以將上述代碼轉換為：

<path fill="#ffffff"></path>

3、優化路徑：SVGO-Loader 通過調整路徑結構來減少代碼行數和縮小文件大小。

<path d="M20,40 L10,30 L20,20 L30,10 L40,20 L50,30 L40,40 L20,40"></path>

優化後的結果：

<path d="M20,40L10,30L20,20L30,10L40,20L50,30L40,40Z"></path>

三、SVGO-Loader的插件與配置

SVGO-Loader的 options 中的 plugins 屬性是一個插件數組，通過這個數組你可以很容易地控制對SVG的優化。下面羅列了一些常用的插件及其功能。

1、removeTitle

用於刪除 <title> 標籤

{ removeTitle: true }

2、removeDesc

用於刪除 <desc> 標籤

{ removeDesc: true }

3、convertColors

color 指的是 SVG 中的填充和描邊顏色。這個插件可以將這些顏色格式轉換為你所需要的格式。它有以下幾個選項：

shorthex: 是否使用短格式的#RGB，如為 false，則使用完整的 6 位 hexadecimal。

{ convertColors: { shorthex: false } }

4、convertPathData

用於將 path 數據進行優化，它有兩個選項：

noSpaceAfterFlags：布爾，默認為 true，該插件可以優化 path 數據，刪除無用空格。

floatPrecision：整數，保留多少小數位。

{ convertPathData: { noSpaceAfterFlags: true, precision: 2 } }

5、removeAttrs

用於將指定的屬性從 SVG 中刪除，有三個選項：

attrs：數組，要刪除的屬性列表。

element: 字符串，表示要刪除屬性的標籤。

options：配置屬性對象。下面是一些可用的配置：

preserveCurrentColor：是否保留currentColor屬性。

inheritStyleFromElement：是否從XML父級組件中繼承內斂樣式。

removeAttributesByRegex：可使用正則表達式刪除屬性。

{ removeAttrs: { attrs: ['fill', 'stroke'], element: 'path', options: {inheritStyleFromElement: false} } }

四、性能優化分享

優化 SVG 文件同時也是優化 Web 性能的一部分。下面是一些有關 SVG 以及 SVG 優化的最佳實踐。

1、避免使用壓縮的 SVG

將 SVG 壓縮後會使 SVG 文件變小，但是反過來也會增加文件解壓的時間。因為SVG文件需要在將其渲染前先解壓縮。一些現代的瀏覽器已經開發支持壓縮格式的 SVG，因此，並不需要將 SVG 壓縮。

2、規範化 SVG 的 viewBox 屬性。

使用 viewBox 來定位 SVG，而不是將 SVG 的坐標數組直接嵌入頁面。

3、減少 SVG 文件中的節點數量。

SVG文件能夠隨意擴大或縮小而不失真，與之對應的，它的代碼也更加優雅緊湊。因此，減少SVG中節點的數量是一種常見的最佳實踐。同時使用 SVGO-Loader 可以幫助我們更好地實現。

4、基於 Data URI 的 SVG 加載。

數據 URI 減少了對外部資源的請求，可以將 SVG 直接嵌入到頁面中。而且，它還可以在需要時動態加載。

五、總結

SVGO-Loader 是像 webpack 這樣的構建工具的極好選擇，用於優化 SVG。它可以快速進行 SVG 的處理、實現優化SVG文件的特定操作。使用SVGO-Loader可以輕鬆地操縱SVG文件來滿足你的需求，讓你的網站更快、更精緻。