POSTED: / UPDATED:2019年03月16日

SVGスプライトの使い方【SVGを１つのファイルにまとめる】

今やSVGは画像と同じくらいよく使う技術になりました。
最も効率的にSVGを使う方法である、SVGスプライトの使い方をご紹介します。

SVGスプライトは、同じ図形であれば、1つ登録しておくだけで、色や大きさなど、CSSから自由に操作ができます。
私はロゴ、アイコンには必ず使っています。SNSのアイコンなどにもいいですね。
下記のインデックス手順でご紹介します。

SVGスプライトのベースファイルを作る

まず、ベースとなるソースコードは下記の通りです。

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>

<!-- ここから -->
<symbol symbol id="" viewBox="">
<!-- ここにSVGソース貼り付ける -->
</symbol>
<!-- ここまでで1つ -->

</defs>
</svg>

このソースコードを、インクルードにして、全ページに読み込ませるのが使いやすいです。
いくつものsymbolが並ぶことになるのと、複雑な図形は膨大なテキスト量になるためです。

読み込ませる位置ですが、私は<head>の中で読み込ませています。

SVGのデータを作る

SVGのデータはイラストレーターから作ります。
図形を作って、別名保存からSVG形式を選択すればいいのですが、２点、注意があります。

  • 図形の塗りと線は無しの状態にする
  • 図形に対してアートボードをぴったりの大きさにする

この２点です。下記のような状態で書き出します。

塗りと線を無しの状態にするのは、あとからCSSで操作するためです。これをつけた状態にすると、SVGのソースの中に色データが入ってしまいます。

アートボードぴったりにするのは、ViewBoxの値を合わせるためです。この説明は後述します。

別名保存でSVG形式を選択し、出てきたダイアログの”SVGコード…”というボタンを押します。
すると、コード下記のようなコードが表示されます。


ここからコピーしてくるのは、青く塗った2点です。
viewBoxと<path>です。<path>は図形によってはとても複雑で、<g>というタグで囲われている場合には、それも含めて丸ごとコピーします。
<g>はグループで、イラストレーターで複数の図形がグループ化されているときに出てきます。

SVGスプライトに図形のパスをセットする

最初に作ったSVGスプライトの中に、図形のパスをセットしていきます。
下記のようなソースコードになります。

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>

<symbol symbol id="heart" viewBox="0 0 130.43 112.48">
<path class="st0" d="M111.38,4.58C106.1,1.67,100.06,0,93.58,0c-11.41,0-21.6,5.19-28.35,13.35C58.45,5.19,48.26,0,36.82,0
	C30.4,0,24.35,1.67,19.06,4.58C7.69,10.87,0,22.96,0,36.87c0,3.97,0.65,7.78,1.83,11.35c6.31,28.44,63.41,64.27,63.41,64.27
	s57.03-35.83,63.37-64.27c1.17-3.56,1.83-7.37,1.83-11.35C130.43,22.96,122.74,10.89,111.38,4.58z"/>
</symbol>

</defs>
</svg>

先ほど作ったハート型の図形のパスとviewBoxをペーストしました。
idは呼び出すための符号となるので、任意で解りやすいものを入れておきます。

この時の注意点ですが、<g>や<path>にclassが付いている場合があります。これは削除してしまって大丈夫です。あとからcssでその部分にだけスタイルをかけることができますので、任意で使う場合だけ書いておきます。

とりあえずこれで、1つシンボル(図形)を設置できました。

SVG(symbol)の呼び出し方

先ほど設置したsymbolをhtml上で呼び出します。呼び出すには下記のようなソースを使います。

<svg class="svg_heart">
<title>ハート</title><desc></desc>
<use xlink:href="#heart"/>
</svg>

<svg>タグの中で、idを指定して先ほどの図形を呼び出します。#heartとなっている部分が、SVGスプライトの中でsymbolにセットしたidです。

<title>と<desc>は、imgのalt属性のようなもので、表示はされませんが、マウスホバーで説明が出たり、読み上げツールなどで読まれたりします。titleとdescの併用は可能なので、どちらも書いておきます。

呼び出したSVG (symbol) を操作する

このままでは、透明で線も見えない図形が置かれている状態ですので、CSSでスタイリングしていきます。

呼び出したときにsvgにclass=”svg_heart”を付けましたので、これで指定します。

svg.svg_heart{
   fill:#d40000;
   stroke:#000;
}

svgの色はfillというプロパティで指定します。線はstrokeというプロパティです。
実際の表示はこのようになります。

ハート

指定通りに表示されました。
大きさなどは通常のcssプロパティで指定できます。

まとめと応用

一つ図形を設置できれば、あとは何個でもsymbolを増やしていくだけです。

例えばロゴの場合、縦型や横型など、形が何パターンかあり、それぞれ白抜きや黒ベタの使い方をしたりすると、画像だといくつも作って書き出さないといけません。

今回の、塗りと線を透明にしたSVGスプライトであれば、形だけ登録しておけば呼び出すごとに別のclassを付け、状況に応じてcssでカスタマイズするだけで済みます。しかも表示もきれい。

スタイリングする上では、比率の問題や線がきれいに出なかったりと、問題がある場合もあります。これはまた別の記事で紹介したいと思います。

ぜひ透明SVGスプライトを活用してください。

この記事をシェアする

  • Twitterにシェア
  • facebookにシェア
  • LINEにシェア
  • POCKETにシェア

関連記事