svgを圧縮するgulpプラグイン「gulp-svgmin」



gulpやgrunt等のタスクランナーは
今やWeb開発にとって 切っても切れない重要なツールの1つとなりました。

babel, type-script, coffee-scriptのコンパイル、cssやjavascriptの圧縮。

上記のassetファイル以外にも
jpegやpng,SVGファイルのロスレス圧縮もよく耳にするようになりましたね。

特にSVGはファイルサイズがとても小さいので重宝しています。
( * 画像と言っても、実態はxmlファイルです )

その上、画像編集ソフトを使って編集する時も
レイヤー毎にパーツがちゃんと分けられている状態なので凄く使いやすいです。

今回は そのSVGに集点を置いてgulpでSVGファイルの圧縮を出来るプラグイン
gulp-svgmin」の紹介をしていきます。


gulp-svgminのインストール

gulp-svgminのインストールはコマンドライン上で行うか
package.jsonに記載する方法の2種類です。
( node.jsとgulpの導入は事前に済ませておいてください )

# コマンドラインで行う場合
npm install gulp-svgmin --save-dev
# package.jsonのdevDependencies内に追加
# 下記の情報を追加した後、コマンドライン上で npm install が必要
"gulp-svgmin": "^1.2.1"

以上でgulp-svgminのインストールは完了です。


gulp-svgminの使い方

svgminはgulpのプラグインなので、"gulpfile.js"内で作業を行っていきます。

今回はどれぐらいsvgファイルを小さく出来たか検証する為に
人気のjsフレームワーク「Ember.js」のマスコットキャラクター tomster君を使いました。

* 記事に載せるためjpeg形式にしています

圧縮前のSVGファイルは56KB
カラー然り、色々なパーツが組み合わさっているせいかSVGにしては大きめです。

圧縮させるために"gulpfile.js"は下記のようにしました。

/* gulpfile.js */
var gulp = require('gulp');
// svgminのインポート
var svgmin = require('gulp-svgmin');

/*
*  node.js: v5.5.0
*  gulp: v3.9.1
*/
gulp.task('svg', () => {
  
    return
        // 読み込むsvgファイル
        gulp.src("resources/svg/tomster.svg")
        // svgを圧縮
        .pipe(svgmin())
        // 圧縮したsvgを static/imgフォルダに展開
        .pipe(gulp.dest("static/img/")); 
});


コマンドライン上でgulpを動かせばsvgファイルの圧縮の完了&指定フォルダに展開されます!

$ gulp svg # わかりやすくする為 "svg"というコマンド名にしました

[22:49:18] Using gulpfile ~/YourProjectFolder/gulpfile.js
[22:49:18] Starting 'default'...
[22:49:19] Finished 'default' after 323 m


ジャン!!

56KB -> 41KB 約23%ファイルサイズが小さくなりました

* 左が圧縮前、右が圧縮後


Summary

Webサイト等で実際に使う場合は "gulp-imagemin"等を使って
imgフォルダ全体のロスレス圧縮を行う場合が多いと思われますが、
今回はsvgの圧縮にフォーカスを当てたので"gulp-svgmin"を使いました。

"gulp-svgmin" はWeb開発だけでなく、
SVGファイルで画像を扱っているデザイナーさんにも使えると思うので
"ファイルサイズを小さくしたい ..."とお考えのかたはゼヒ×2チェックしてください!

何よりSVG形式の画像は
中身はXMLなので、画像の劣化の心配がないのがいいですね。

GitHub: ben-eb/gulp-svgmin

 

この記事のカテゴリ
プログラミング

この記事のタグ