2020/08/07

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

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

がしかし！！

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

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

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

SVG画像とは？

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

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

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

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

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

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

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

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

さて、ここからが本題。

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

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

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

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

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

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

ことがキモです。

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

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

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

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

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

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

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

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

「この記事が役に立った！」方はこちら

フォロー