SVGスプライト雑に使ってみたい

こんにちわ、ななきです。

今までSVGをimgタグで読み込んでその度に色が変わった等の変更に苦しんでいました。

色が違うだけで形が一緒ならば一つのものを使いまわしたいというのは誰もが思うことだと思うので、
知ってはいたけど何故かつかてなかったSVGスプライトについてざっくり調べたのでメモ代わりにまとめてみます。

SVGスプライトって何？

そもそもSVGスプライトって何よって感じですよね。

その昔CSSスプライトと言う、背景画像素材を一枚の画像ファイルにまとめて必要な箇所だけをCSSで表示するという手法がありました。
それのSVG版みたいな感じです。

SVGスプライトで出来ることは一つのファイルから指定の画像を指定して描画したり、CSSを用いてfillやstrokeを変更したりです。

また、インラインで何箇所も同じコードを書く必要もないので見通しも良くなります。

そんなわけで実際のSVGスプライトの記述は下記な感じです。

そんな感じ(？)で円と四角形のスプライトを用意しました。

タグ毎に解説していきます。

defs

は 等の実際に描画しないものをwrapするタグです。

## symbol

基本的にはで一つの画像をwrapしてあげます。

内は実際には描画されず、描画する場合はタグを用いてsymbol内を参照し描画します。
タグを用いて参照する際にはタグにidを付与し、それを参照するような形になります。

また、gタグと違いviewboxを指定することができます。

use

symbolの項でも出てきたタグですね。

インラインでSVGを埋め込む場合はpathだったり直接記述すると思いますが、そこがタグに置きおかわりタグを参照させるイメージです。

上記のような書き方になります。

またスプライトの読み込みですが、スプライトをHTML内に書いて置く方法と.svgファイルに書いておく方法があります。
使うサイトや仕様によってどちらか使い分けるといいと思います。

まとめ

なんかいざ調べてみると意外とカンタンに出来てわりと便利だなー(小並感)という印象でした。

ただ、CSSでfillを変更出来たりするだけでも便利なので適宜使っていければと思ってます。