最近のWeb制作の現場では「SVGの扱いについて知っていることが当たり前で、お客さんにはSVGを使うメリット・デメリットについても解説できる技術が必要だ」と感じることが多くなってきました。（自分はまだまだ勉強中なので、とても焦る・・・！）

そんなSVGですが、今回はGulpを使ってSVGファイルの容量を減らす（軽量化する）方法について書きました。

私は複数のSVGファイル1つ1つをできるだけ軽量化して「SVGスプライトを作る前処理」に役立てています。

似たようなことがしたい、という方はご参考ください。

Gulpプラグインをインストール

SVGファイルを軽量化するGulpプラグインをいくつか試したのですが、私個人的に最も覚えやすくて効果があった「gulp-svgmin」をインストールします。

まずはコマンドプロンプト（ターミナル）を起動して、Gulpがインストールされているフォルダ（以下 作業フォルダ）まで移動して、以下のコマンドを実行します。

npm install --save-dev gulp-svgmin

gulp-svgminを読み込もう

次に、作業フォルダ内にgulpfile.jsファイルを作成してテキストエディターで開いて、gulpとgulp-svgminを読み込みます。

var gulp = require('gulp');
var svgmin = require('gulp-svgmin');

Gulpをインストールしていない場合は以下のページをご参考ください。

SVGファイルを軽量化するタスクを書こう

続けて、gulpfile.jsファイルにSVGファイルを軽量化するタスクを書きます。

gulp.task('svgmin', function () {
 return gulp.src('images/svg/*.svg') //「images/svg」フォルダ配下のSVGファイルをすべて処理
 .pipe(svgmin()) //SVGファイル軽量化
 .pipe(gulp.dest('images/svg/min')); //保存先は「images/svg/min」フォルダ配下
});

タスクを動かそう

タスクを書いたら、コマンドプロンプト（またはターミナル）を起動して、以下のコマンドを実行します。

gulp svgmin

タスクが実行されて「images/svg」配下にある「拡張子に『svg』が付くファイル」をすべて軽量化したものが「images/svg/min」フォルダ配下に作成されます。

応用：いらない属性を削除してみよう

例えばですが、SVGスプライトを作成する際には「ViewBox属性の指定を削除したい」場合があります。そんな時はsvgoをインストールして、以下のように「plugins」を指定してあげるとOKです。

gulp.task('svgmin', function () {
 return gulp.src('images/svg/*.svg')
 .pipe(svgmin({
  plugins:[{
   removeViewBox: true //ViewBox属性を削除する
  }]
 }))
 .pipe(gulp.dest('images/svg/min'));
});

「plugins」に指定できるものは他にもあります。一覧がありますので、ご参考ください。

まとめ

もちろんSVGファイルの内容にもよりますが、上記の方法でかなり軽量化できたものもありました。割と地味な作業ですが、こういった細かい作業の積み重ねが大事なんだなぁ～と改めて思っています。

もしWeb制作の現場で「SVGファイルの読み込み速度がネックになっている」場合は、ファイルを軽量化する方法の1つとしてご参考くださいますとうれしいです。

・・・軽量化に関する話題として、Gulpを使ってCSS,JavaScriptファイルの容量を減らす方法（軽量化）についても書いていますので、あわせてご参考ください。