アイコン画像をSVGスプライトにしたい話

# SVGスプライトにしたい理由
- スプライト生成を自動化したい
- アイコンのちょっとした色変更などでPhotoshopを開くのがつらい

### アイコンフォントかSVGかData URIかビットマップか
- **SVG**
	- 多色にも対応したいから
	- 楽にレイアウトしたいから
	- HTMLを汚したくないから
	- モダンな感じにしたいから

### SVG画像呼び出しの選択肢
- 個別ファイル
- スプライト
	- fragment identifiers方式（一般的なCSSスプライトと同じ）
	- stacks方式（SVGでレイヤーを重ねて、その表示／非表示を指示する）
- インライン記述：
	- HTML内にXML形式で記述するため、CSSやJavaScriptでの制御に対応
	- defs方式（ `defs` タグで記述）
	- symbols方式（ `symobls` タグで記述）

### どれにするか
- 上記のなかだったら、**インライン記述**が良さ気かな…？
	- 個別ファイルだとリクエスト増えるし、モダンじゃない感
	- stacks形式はまだバグが多そう（[参考](http://simurai.com/blog/2012/04/02/svg-stacks/)）
	- スプライトだとCSSによる色変更などができない？のでインラインのほうが良さ気
	- インラインだったらsymbols方式が良さ気（[参考](http://css-tricks.com/svg-symbol-good-choice-icons/)）

	> - The viewBox can be defined on the symbol, so you don't need to use it in the markup (easier and less error prone).
	> - title and desc tags can be added there as well, making accessibility easier to do right.
	> - Symbols don't display as you define them, so no need for a <defs> block.

	>	 - symbolごとにviewBox（画像の表示範囲と表示サイズを指定する属性）を指定できるので色々な形状の画像に対応してるし、titleタグとdescタグを書いておけばアクセシビリティもアップするよ、という話

### タスクランナー
- **Gulp**
	- コミュニティが活発だから
	- プラグインがそれなりに多いから
	- Gruntよりモダンな感じがするから（雰囲気）


# Gulpのプラグイン
### 使いたい
- [shakyShane/gulp-svg-sprites](https://github.com/shakyShane/gulp-svg-sprites)
	- 個別SVGファイルを結合してスプライト化する（	Gruntプラグインの「grunt-svgstore」と同等）
	- symbols方式でも書き出し可能
	- フォールバック用pngの書き出し可能

- [ben-eb/gulp-svgmin](https://github.com/ben-eb/gulp-svgmin)
	- [svgoプラグイン](https://github.com/svg/svgo)でSVG画像容量圧縮


### 気になる
- [nfroidure/gulp-iconfont](https://github.com/nfroidure/gulp-iconfont)
	- SVGからアイコンフォントを生成

- [akoenig/gulp-svg2png](https://github.com/akoenig/gulp-svg2png)
	- SVGからフォールバック用PNGを生成

- [sindresorhus/gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin)
	- PNG、JPEG、GIF、SVGの画像容量圧縮
	- PNGはoptipng、GIFはgifsicle、JPEGはjpegtran、SVGはsvgoで圧縮


# 参考リンク
### SVGスプライト化
- **[SVG "symbol" a Good Choice for Icons](http://css-tricks.com/svg-symbol-good-choice-icons/)**
- [Icon System with SVG Sprites](http://css-tricks.com/svg-sprites-use-better-icon-fonts/)
- [Better SVG Sprites With Fragment Identifiers](http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/)
- [SVG Stacks](http://simurai.com/blog/2012/04/02/svg-stacks/)
- [03-画像形式との比較.md](https://github.com/cognitom/symbol-font-in-web/blob/master/src/markdown/03-画像形式との比較.md)
- [Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II](http://alistapart.com/article/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii)
- [WebKitでのSVGを背景画像にすると起こるバグ](http://hail2u.net/blog/webdesign/svg-background-image-bug-on-webkit.html)
- [GULP SVG SPRITES - ALTERNATIVE WORKFLOW](http://quick.as/3v0svmo)
- [HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ](http://t32k.me/mol/log/reduce-http-requests-webfont/)

### SVG概論
- **[A Compendium of SVG Information](http://css-tricks.com/mega-list-svg-information/)**
- [アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう](http://www.webcreatorbox.com/tech/svg-vector/)
- [どっちのベクターSHOW!! SVG vs Webフォント を比較する](http://wp-e.org/2014/06/04/2650/)
- [Retina対応にSVGは本当に使えるのか？](http://parashuto.com/rriver/responsive-web/is-svg-good-for-high-res-screen-solutions)
- [スマートフォンサイトにおける画像の最適化と使いどころ](http://cssnite.jp/lp/lp27/CSSNiteLP27-s6-matsuda.pdf)
- [SVG MANIAX - CSS Nite After dark7](http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite-after-dark7-svgmatsuda)
- [How to Use SVG Image Sprites](http://www.sitepoint.com/use-svg-image-sprites/)
- [ドットインストール｜SVG入門（全14回）](http://dotinstall.com/lessons/basic_svg)

### タスクランナー
#### GruntとGulpの比較
- **[Gruntとgulp.jsでサイトパフォーマンスを向上させる](http://wazanova.jp/items/1128)**
- [Gruntに置き換わるか？新生ビルドシステム「gulp」v3.5.2入門](http://re-dzine.net/2014/02/getting-started-with-gulp/)
- [- Gruntとgulpを比較 〜 JSおくのほそ道 #008](http://qiita.com/setzz/items/badaee6d0de448ba9770)