Gulp imagemin-svgoで圧縮したSVGのwidthとheightがなくなる問題を解決する

画像を自動で圧縮できるGulpのimagemin。その中でSVGを圧縮するimagemin-svgoがあります。

しかし、imagemin-svgoでSVGを圧縮するとwidthとheightも一緒に削除されてしまいます。IE11ではwidthとheightがない場合、表示が崩れてしまう問題が発生してしまうので、削除されないようにします。

そのためには、オプションを追加して対処します。オプションは以下のように記述します。

imagemin.svgo( { plugins: [ { removeViewBox: false } ] } ),

gulpfile.js

関連情報

imagemin-svgo
https://www.npmjs.com/package/gulp-imagemin

石井秀幸@WEBデザイナー
WordPress公式『横浜 WordPress Meetup』主宰/株式会社ノクチ基地 取締役/モンゼンクリエイティブ合同会社 代表。WEB制作に関する技術や役立つ情報を発信していきます。10年にわたるWordPress歴を背景に、幅広いアイデアを形にするお手伝いをしています。