ウェベン!

【symbolとuse】1つのSVG画像で色を変えて使いまわす便利な方法

SVG画像はとても便利です。
SVG画像を使えば、ロゴやアイコンなどの画像をPC用・スマホ用と出し分けることなくRetinaディスプレイでもキレイに表示することができます。

がしかし!!

それだけではありません!!

同じ画像を、何回も色を変えて使いまわしたい時ってありますよね?
ヘッダーロゴはカラーでフッターロゴはモノクロで、とか。

それも1つのSVG画像でできちゃうんです!!!

SVG画像とは?

SVG画像

XMLをベースにしたベクトルグラフィックスの記述言語。

簡単に言うと、「点」と「それをつなぐ線」・「塗り」の情報でできているので、拡大しても荒くならない&データが軽い&いろいろできる!ということです♪

まずは難しいことは考えずに、イラレで作ったデータなどをSVGで書き出して使うといいと思います!

また、SVG画像には画像サイズという概念がないので、幅と高さを必ず指定してあげないと画面いっぱいに表示されてしまいます。

とりあえず表示する方法をおさらい。

imgタグで読み込む

色を変えたりせずに使う場合は、これまでの画像を表示させる時と同じくimgタグで読み込むのが簡単です!

インラインで読み込む

svg画像をエディタで開いてもらうとずらーっとコードが出てきます。
これをHTMLに直接コピペして書き込んでも表示することができます。

ただし、複雑な画像の場合、HTMLがすごく読みづらくなります・・・

objectタグで読み込む

画像を表示させるだけの場合は、imgタグでOKです。アニメーション等を使いたいときに選択肢に入れるといいです。

1つの画像で色を変えて使いまわしもできる!

さて、ここからが本題。

色違いでアイコンやロゴを複数使いたい場合。

今までは以下の2つの方法で対応していました。

  • インラインでコピペ
  • SVG画像を複数作る

ただインラインで都度コピペして書き込むと、コードが長く見にくくなり・・・

SVG画像を複数作るのは、なんかSVGの良さを活かせていない気が・・・

そんな時に見つけたのが「symbolタグ」と「useタグ」を使う方法でした!
これらを使えば、1つインラインで書いておくだけで使いまわしができる&色変えもCSSでできるんです!

まずはsymbolタグで呼び出し元を定義

ページの邪魔にならないところで、SVGの元となるコードを読み込ませておきます。
symbolタグで括ることで、その場では表示されず、読み込む準備ができたことになります。

  • pathをsvgタグ > symbolタグで括る
  • あとで呼び出す用にsymbolタグにidをつけておく
  • symbolタグにカンバスサイズ(=viewbox)を入れておく

ことがキモです。

この状態ではまだ画像は表示されていません。

useタグで画像を呼び出す

先ほど準備していたsymbolタグのなかの画像を、useタグを使って呼び出します。

  • 呼び出したいところにuseタグで呼び出す。
  • 読み込みたいsymbolのidをxlink:href=”#icon_bento”に指定。

するのがポイントです。(id部分は各自好きなものに変えてください)
svgタグのrole=”img”とaria-labelledby=”bento-title”はアクセシブルにするためで、表示するだけであれば不要です。

色を変えるには一工夫が必要

表示しただけでは色は変えられません。
今度は少し応用。

読み込み元(=symbol)のpathをパーツごとにgタグで括り、idで名前を付けます。

それをuseで読み込むときに、パーツごとに読み込みます。

CSSでスタイルを付けたら完成♪
それぞれのsvgタグにclass名を付けておくと、色を変えることができます。

パーツがたくさんある場合でも色が同じなら1つのgタグで括ってOKです!

キーワード: