svgスプライトの作り方から使い方まで

#なぜやるか

cssスプライトと違って、

* スタイルの変更がcssでできる
* ベクター画像なのでサイズ変更可能
* retina対応のための画像を作ることが不要
* 色変更のために作り直すことが不要

#svgブラウザ対応状況
<img width="1366" alt="f7bb38e1-c418-615e-fce6-a44ca90b6476.png" src="https://qiita-image-store.s3.amazonaws.com/0/70283/950dc705-65ea-201d-4dd4-434d63f5a803.png">

<img width="1348" alt="ff1828a0-c2cc-27cf-465b-b3971a34a4d6.png" src="https://qiita-image-store.s3.amazonaws.com/0/70283/3d6582a3-a0bb-b618-ba57-b3ce07aaaa34.png">

[svg - Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#search=svg)

IE9-Edge12、Safari 5.1-6には<use xlink：href>による外部ファイルの参照をサポートしていません。
IEで読み込むためには、polyfillが必要です。詳細は[IEに対応する](#ieに対応する)で説明します。

> polyfills（ポリフィル）というのは、数年前から言われている概念なので、 知っている人もいくらかいるのではないかと思いますが、 モダンブラウザで普通に出来て、レガシーブラウザで出来ない機能を、既存の技術で（あるいはそれらの組み合わせで）同等のものを提供する、という手法です。

(引用元: [jQuery から卒業するための第1歩を polyfills から学ぼう - ばうあーろ](http://girigiribauer.com/archives/1233/))

#svgアイコンを作成

まずは、illustratorでアイコンを作成します。

<img width="1181" alt="ba812210-4e13-fe3f-c1ca-02de1696aaa7.png" src="https://qiita-image-store.s3.amazonaws.com/0/70283/ea564211-b483-0d17-7b27-3c58cf20c465.png">



ここでのポイントはパスのアウトラインを作成しておくこと。
これをしないと、CSSで色を当てることができません。

<img width="567" alt="c363a0ec-3589-cd9d-7e61-0c14623b65af.png" src="https://qiita-image-store.s3.amazonaws.com/0/70283/026ec72d-b4a7-cd58-5069-589077f8715d.png">



オブジジェクト > パス > パスのアウトラインを作成 でできます。
※ここまでたどるのが億劫なので、私はshift + option + command + O でショートカットキーを割り当てています。


<img width="722" alt="2ba7e226-cdf5-9eea-cfd6-598fb5cb4e45.png" src="https://qiita-image-store.s3.amazonaws.com/0/70283/4889cff9-a3f4-26e3-de67-7d81c5685add.png">



#svgスプライトを作成

[IcoMoon](https://icomoon.io/app/#/select)に作成したアイコンをimportする。

![_01.png](https://qiita-image-store.s3.amazonaws.com/0/70283/8c6efab0-2116-a895-a3dd-e7dbb5388493.png)



「Generate SVG & More」をクリック

![_02.png](https://qiita-image-store.s3.amazonaws.com/0/70283/2781cbab-8fb2-c3d9-7ef0-b9fe97d5cc4f.png)



「Preferences」クリック

![_03.png](https://qiita-image-store.s3.amazonaws.com/0/70283/5ab52303-d58b-ff66-7464-5a2a731eb770.png)



prefixなどはここで作成可能

設定完了したのちにDownload

![7c3d6608-3a94-2da9-384b-8e2c92510f1b.png](https://qiita-image-store.s3.amazonaws.com/0/70283/3ab83c8d-9af0-b6df-b45a-7c17335b4507.png)



ダウンロードしたファイルから、symbol-defs.svgを使用します。

#svgアイコンを読み込む

パスを指定してファイルを読み込みます。
使いたいアイコンのファイル名を指定。

```html:svg-html
<svg class="ico-svg">
  <use xlink:href="/svg/symbol-defs.svg#ico_girls"/>
</svg>
```

xlinkを使用することで、外部ファイルから、図形の参照することができます。
この機能を使って、まとめておいてある、svgファイルから、図形の参照をするのがsvgスプライトの考え方です。

スタイルの変更も可能です。

```css:svg-css
.ico-svg {
  fill: red; /* 色の変更可能 */
}
```

![5e643ff9-0b1f-db97-09d4-0de955289572.png](https://qiita-image-store.s3.amazonaws.com/0/70283/052026f7-c126-16c0-777a-ec9c701555cc.png)


#IEに対応する

今回は[svgxuse](https://github.com/Keyamoon/svgxuse/blob/master/readme.md)というものを使用します。

```
bower install --save svgxuse
```
scriptを読み込む

```html

<script defer src="/vendor/svgxuse/svgxuse.js"></script>

```

#完成

<img width="359" alt="26065798-2c47-2e45-9397-bb2a02583e53.png" src="https://qiita-image-store.s3.amazonaws.com/0/70283/5cc5c643-5e78-c498-5b57-d06f8cf90db1.png">


gulpを使ってspriteを作成しようと思いましたが、IcoMoonの対応状況が良くて、
割と簡単にできそうだったので、IcoMoonを使用しました。

#参考

* [SVG `symbol` a Good Choice for Icons](https://css-tricks.com/svg-symbol-good-choice-icons/)
* [Icon System with SVG Sprites](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)