SVG
illustrator
SVGスプライト

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

なぜやるか

cssスプライトと違って、

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

svgブラウザ対応状況

f7bb38e1-c418-615e-fce6-a44ca90b6476.png

ff1828a0-c2cc-27cf-465b-b3971a34a4d6.png

svg - Can I use... Support tables for HTML5, CSS3, etc

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

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

(引用元: jQuery から卒業するための第1歩を polyfills から学ぼう - ばうあーろ)

svgアイコンを作成

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

ba812210-4e13-fe3f-c1ca-02de1696aaa7.png

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

c363a0ec-3589-cd9d-7e61-0c14623b65af.png

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

2ba7e226-cdf5-9eea-cfd6-598fb5cb4e45.png

svgスプライトを作成

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

_01.png

「Generate SVG & More」をクリック

_02.png

「Preferences」クリック

_03.png

prefixなどはここで作成可能

設定完了したのちにDownload

7c3d6608-3a94-2da9-384b-8e2c92510f1b.png

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

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; /* 色の変更可能 */
}

5e643ff9-0b1f-db97-09d4-0de955289572.png

IEに対応する

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

bower install --save svgxuse

scriptを読み込む

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

完成

26065798-2c47-2e45-9397-bb2a02583e53.png

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

参考