なぜやるか

cssスプライトと違って、

svgブラウザ対応状況

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

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

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

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

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

IcoMoonに作成したアイコンをimportする。

「Generate SVG & More」をクリック

「Preferences」クリック

prefixなどはここで作成可能

設定完了したのちにDownload

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

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

svg-html

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

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

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

svg-css

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

今回はsvgxuseというものを使用します。

bower install --save svgxuse

scriptを読み込む


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

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