Webpack で
試しに
インストール、 設定
インストール
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
参考
以下、
* 名前空間の
以上です。
コメント