Webpack 4 svgo-loader を使い、SVG を最適化する

Webpack で SVG を最適化してサイズ削減できないか調べていたところ rpominov/svgo-loader: svgo loader for webpack というライブラリがあり、SVG のサイズを削減できることを知りました。

試しに使ってみましたので、使用方法と SVG のサイズの削減結果について記載します。

---

インストール、設定

• インストール
  svgo に依存しているため、svgo-loader と合わせてインストールが必要になります。
  

  npm i -D svgo svgo-loader
  

• 設定
  rpominov/svgo-loader: svgo loader for webpack の記述を参考に、以下設定を追加しました。
  設定したオプションは、svg/svgo: Node.js tool for optimizing SVG files でデフォルト OFFの オプションを ON にしています。
  

  module.exports = {
    ...,
    module: {
      rules: [
              // 修正前は、(ttf|eot|svg) の記載で svg も含まれていた    
              { test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
              // svg のみ svgo-loader を使うように記載    
              { test: /\.svg(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                  use: [
                    {loader: 'file-loader'},
                    {
                      loader: 'svgo-loader',
                      options: {
                        plugins: [
                          {removeXMLNS: true},
                          {removeOffCanvasPaths: true},
                          {removeDimensions: true},
                          {reusePaths: true}
                        ]
                      }
                    }
          ]}
      ]
    }
  }
  

• 設定したオプションの説明
  有効にしたオプションについて説明します。

  • removeXMNS
    xmlns="http://www.w3.org/2000/svg" という記述を除去します。

  • removeOffCanvasPaths
    viewBox の外側の要素を削除します。

  • removeDimensions
    viewBoxが存在する場合はwidth / height属性を削除します。

  • reusePaths
    重複した要素を見つけてリンクに置き換えます。

---

svgo-loader 適用前と、適用後の SVG のサイズの比較

35 KiB 小さくなりました。

• 適用前
  65bcbc899f379216109acd0b6c494618.svg 280 KiB

• 適用後
  acb8abdff01f0068e49d02e255cb18b8.svg 245 KiB

---

参考

以下、記事作成時に参考にしました。
* 名前空間の速修講座 - SVG: Scalable Vector Graphics | MDN * svg/svgo: Node.js tool for optimizing SVG files

以上です。