スマートフォンやタブレット端末の高解像度化によりSVGを使用するサイトも段々と増えてきました。 ※SVGの説明については省略します。

ただ、Modernizrなど、何らかの対策をしない限り、PCブラウザではIE8以下、スマートフォンではAndroid3.0未満で表示ができないのが現状です。

IllustratorなどでアイコンなどをSVG形式で書き出せますが、そのまま使用するには無駄な記述があり容量が少し多めです。そこでsvgoを使用して軽量化します。

svgoの使い方

GUIのツールもありますが、 そんなに難しくないので今回は黒い画面を使用します。

svgoのインストール

ターミナルを開いて下記のコマンドを入力すればインストールは完了します。

sudo npm install -g svgo

SVGの圧縮

cdコマンドでSVGファイルがあるディレクトリまで移動します。 移動した後以下のコマンドを打ちます。 これでsvgファイルの軽量化は完了します。

svgo sample.svg

複数のファイルがある場合、上記のコマンドで一個一個やるのはとても面倒です。 そのためフォルダごとの指定もできます。

フォルダの中にあるsvgのファイルをSVGOで軽量化をしたいときは、 以下のようにf-のあとに現在地から対象フォルダまでのパス入力をしてください。

svgo -f works/source/hoge/img[/code]

他にも色々なオプションがあるので、 詳しくは以下のリンク先を参考にしてください。

早く全てのブラウザでSVGが使えるようになってほしいですね。


※この記事は WordPress に投稿した記事を変換したものです。一部不自然な表示があるかも知れません。ご了承ください。