SVGスプライト雑に使ってみたい
こんにちわ、ななきです。
今までSVGをimgタグで読み込んでその度に色が変わった等の変更に苦しんでいました。
色が違うだけで形が一緒ならば一つのものを使いまわしたいというのは誰もが思うことだと思うので、
知ってはいたけど何故かつかてなかったSVGスプライトについてざっくり調べたのでメモ代わりにまとめてみます。
SVGスプライトって何?
そもそもSVGスプライトって何よって感じですよね。
その昔CSSスプライトと言う、背景画像素材を一枚の画像ファイルにまとめて必要な箇所だけをCSSで表示するという手法がありました。
それのSVG版みたいな感じです。
SVGスプライトで出来ることは一つのファイルから指定の画像を指定して描画したり、CSSを用いてfillやstrokeを変更したりです。
また、インラインで何箇所も同じコードを書く必要もないので見通しも良くなります。
そんなわけで実際のSVGスプライトの記述は下記な感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- ↓SVGスプライトの記述 --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="symbol-circle" viewbox="0 0 100 100"> <circle cx="50" cy="50" r="50"></circle> </symbol> <symbol id="symbol-rect" viewbox="0 0 100 100"> <rect x="25" y="25" width="75" height="75"></rect> </symbol> </defs> </svg> <!-- ↓実際に描画されるとこの記述 --> <svg xmlns="http://www.w3.org/2000/svg"> <use xlink:href="#symbol-circle" /> </svg> <svg xmlns="http://www.w3.org/2000/svg"> <use xlink:href="#symbol-rect" /> </svg> |
そんな感じ(?)で円と四角形のスプライトを用意しました。
タグ毎に解説していきます。
defs
は
等の実際に描画しないものをwrapするタグです。
1 2 3 4 5 6 7 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol> .... </symbol> </defs> </svg> |
## symbol
基本的には
で一つの画像をwrapしてあげます。
内は実際には描画されず、描画する場合はタグを用いてsymbol内を参照し描画します。
タグを用いて参照する際には
タグにidを付与し、それを参照するような形になります。
また、gタグと違いviewboxを指定することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="symbol-circle" viewbox="0 0 100 100"> <circle cx="50" cy="50" r="50"></circle> </symbol> <symbol id="symbol-rect" viewbox="0 0 100 100"> <rect x="25" y="25" width="75" height="75"></rect> </symbol> </defs> </svg> |
use
symbolの項でも出てきたタグですね。
インラインでSVGを埋め込む場合はpathだったり直接記述すると思いますが、そこがタグに置きおかわり
タグを参照させるイメージです。
1 2 3 4 5 6 7 8 9 |
<!-- .svgの中を参照する場合 --> <svg xmlns="http://www.w3.org/2000/svg"> <use xlink:href="./images/symbol.svg#symbol-circle" /> </svg> <!-- インラインの参照の場合 --> <svg xmlns="http://www.w3.org/2000/svg"> <use xlink:href="#symbol-circle" /> </svg> |
上記のような書き方になります。
またスプライトの読み込みですが、スプライトをHTML内に書いて置く方法と.svg
ファイルに書いておく方法があります。
使うサイトや仕様によってどちらか使い分けるといいと思います。
まとめ
なんかいざ調べてみると意外とカンタンに出来てわりと便利だなー(小並感)という印象でした。
ただ、CSSでfillを変更出来たりするだけでも便利なので適宜使っていければと思ってます。