[Front-End General] SVG まわりの状況と、SVGO によるファイル最適化
現在の状況について調べたら、既に SVG は実用レベルなのかもと思った。
[markdown]
SVG って、どんなものでしたっけ。
> * [SVG入門 (全14回) – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_svg)
仕様、そして職人芸。すごい。
> * [今年こそついにSVG元年？まだ間に合う！SVGの学習に役立つサイト紹介 – 聴く耳を持たない(片方しか)](http://d.hatena.ne.jp/rikuo/20131028)
> * [Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ – 聴く耳を持たない(片方しか)](http://d.hatena.ne.jp/rikuo/20131203)
実践するにはという考察。
> * [Retina対応にSVGは本当に使えるのか？ – Rriver](http://parashuto.com/rriver/responsive-web/is-svg-good-for-high-res-screen-solutions#browser-support)
mod_rewrite を使って、非対応ブラウザには png を表示させる。
> * [SVG導入のためのレガシーブラウザ振り分け -Blog //ヴォルフロッシュ](http://wolfrosch.com/text/2012/03/17)
実務で svg 扱えるようになっていたのかも。
使ってるよ、という方の話も聞いてみたい。
## インストール
> * [svg/svgo · GitHub](https://github.com/svg/svgo)
“`prettyprinted
% npm install -g svgo
“`
## つかいかた
下記の SVGファイルで試します。
> * [Rocket clip art – vector clip art online, royalty free & public domain](http://www.clker.com/clipart-rocket.html)
### 元のSVGファイル
pitr_Rocket_icon.svg
中身は、4465 バイトの xml ファイルです。
“`xml
“`
### 実行結果
“`prettyprinted
% svgo pitr_Rocket_icon.svg pitr_Rocket_icon.min.svg
Done in 152 ms!
4.36 KiB – 71.8% = 1.228 KiB
“`
* 1257 pitr_Rocket_icon.min.svg
* 4465 pitr_Rocket_icon.svg
pitr_Rocket_icon.min.svg は、こんなにスッキリしている。
“`
“`
### gzip 圧縮で svgz
ちなみに gzip 圧縮すると、このようなサイズになりました。
“`prettyprinted
% svgo pitr_Rocket_icon.svg -o – | gzip -cfq9 > pitr_Rocket_icon.svgz
“`
* 528 pitr_Rocket_icon.svgz
### png だとどれくらい？
なお、png を ImageOptim で最適化すると、こんなサイズ。
* 2924 pitr_Rocket_icon.svg.thumb.png
> * [ImageOptim-CLI で画像ファイルを最適化する | deadwood](https://www.d-wood.com/blog/2013/12/12_5109.html)
## 出力されたファイルの比較サンプル
サンプル画像にリンクを張ってあります。
|Format|byte|
|:———–|————:|
|[.png](https://www.d-wood.com/demo/20131212/pitr_Rocket_icon.svg.thumb.png)| 2924 |
|[.svg](https://www.d-wood.com/demo/20131212/pitr_Rocket_icon.svg)| 4465 |
|[.min.svg](https://www.d-wood.com/demo/20131212/pitr_Rocket_icon.min.svg)| 1257 |
|[.svgz](https://www.d-wood.com/demo/20131212/gzip/pitr_Rocket_icon.svgz)| 528 |
## Grunt
> * [sindresorhus/grunt-svgmin](https://github.com/sindresorhus/grunt-svgmin)
## gzip圧縮したSVGファイル（.svgz）を表示するには
Apache の設定が必要になります。
今回確認のために実行した手順を記載しておきます。
> * [How to Configure Apache to Serve SVG/SVGZ the Right Way | kaioa.com](http://kaioa.com/node/45)
### .htaccess
画像フォルダに、下記の .htaccess ファイルを用意する。
“`
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
“`
### 確認方法
Chrome Developer Tools などで確認します。
> * [Chrome Developer Tools で HTTP Header を確認する方法 | deadwood](https://www.d-wood.com/blog/2013/12/06_5088.html)
Response Header に下記の2つが含まれているか確認します。
* Content-Type: image/svg+xml
* Content-Encoding: gzip
#### .svg の場合
“`
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:4465
Content-Type:image/svg+xml
Date:Wed, 11 Dec 2013 18:24:27 GMT
ETag:”23aa3b-1171-4ed45c2927b51″
Keep-Alive:timeout=3, max=50
Last-Modified:Wed, 11 Dec 2013 17:42:59 GMT
Server:Apache
X-Content-Type-Options:nosniff
X-XSS-Protection:1; mode=block
“`
#### .svgz の場合
“`
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:528
Content-Type:image/svg+xml
Date:Wed, 11 Dec 2013 18:30:33 GMT
ETag:”23aa3d-210-4ed45c29482d7″
Keep-Alive:timeout=3, max=50
Last-Modified:Wed, 11 Dec 2013 17:42:59 GMT
Server:Apache
X-Content-Type-Options:nosniff
X-XSS-Protection:1; mode=block
“`
[/markdown]