svgを軽量化してくれるsvgoの使い方

svgoを使うとsvgファイルがおよそ50%軽量化されるのでその使い方をまとめました。
macのterminalを使って実践します。

フロー

• svgoをインストール
• svgoコマンドを使ってsvgを軽量化

svgoをインストール

command

$ [sudo] npm install --save-dev svgo
$ svgo -v                      //　バージョン表示確認

svgoを使う

・svgファイル1枚ずつを軽量化

command

// svgを格納しているディレクトリまで移動
$ svgo test.svg                  // test.svgが軽量化
$ svgo test2.svg test2-min.svg   // test2.svgがtest2-min.svgと名前を変えて軽量化

・フォルダに格納されているsvgファイルを軽量化

command

$ svgo -f hoge　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  // hogeディレクトリに格納されている全てのsvgが軽量化
$ svgo -f hoge -o hogehoge     　// 新たにhogehogeディレクトリを作ってそこに軽量化されたsvgを移動

・コメントを削除して複数のソースコードのパスをマージして軽量化

command

$ svgo test.svg --enable='removeComments,mergePaths'  // ファイル1枚を軽量化
$ svgo -f hoge --enable='removeComments,mergePaths'　　　　 // ディレクトリを軽量化

##　参考サイト

• svgo公式サイト
• [Webサイトを遅くするダメなSVG画像をスッキリ最適化する手軽な方法] (https://www.webprofessional.jp/three-ways-decreasing-svg-file-size-svgo/)