背景
SVGをimgタグで読み込むとアニメーション実装ができず、インラインで必要な箇所にSVGのコードを入れて読み込むと記述量が多くソースが汚くなってしまいます。
それを回避するためにSVGをsymbolで定義し、useで使い回す方法が便利です。
実装方法
SVGのコードを取得する
今回は例としてGoogle FontsでハートアイコンのSVGをダウンロードしました。
Material Symbols and Icons - Google Fonts（新しいタブで開く）
取得したコードを整形すると以下のコードになっていました。
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"> <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>symbolでSVGを定義する
色の指定はcurrentColorにするとCSSで指定したcolorプロパティの値を表すので、設定することをおすすめします。
symbolにfill="currentColor"をつけるとまとめて指定できますが、アイコンによってはfill属性以外に色が指定されていることもあるので必要に応じて調整します。
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="display: none;"> <defs> <!-- ここにsymbolでSVGを定義する --> <symbol id="icon-favorite" viewBox="0 -960 960 960"> <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" fill="currentColor" /> </symbol> </defs></svg>まとめてSVGを定義するときはdefsの中にsymbolを増やし、1つのsymbolに対して1つのSVGアイコンを定義してください。
idは重複しないように変更してください。
useで定義したSVGを呼び出す
width、heightを指定しなくても使えますが、useに対してsvgのサイズがおかしくなるので設定しておいた方が良いです。
アイコンを使用したい箇所に以下の記述を書けば何回でも繰り返し同じアイコンを呼び出すことができます。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" role="img"> <use href="#icon-favorite" /></svg>以前はxlink:hrefで指定していましたが、SVG 2で非推奨になり、hrefに置き換えられました。
role="img"をつけたアイコンには、aria-labelなどで代替テキストをつけます。装飾だけのアイコンは、role="img"の代わりにaria-hidden="true"をつけて、読み上げの対象から外します。
CSSでサイズや色を調整する
色はcolorプロパティで指定できます。他にもSVGコードを直接埋め込んだときと同様にfillプロパティに色を指定するといった方法も使うことができます。
アイコンのサイズはaspect-ratio: 1;で正方形になるようにしておいても良いでしょう。
実装例
おまけ
PHPが使える環境の場合、svg-symbol.phpのようなファイルに定義するSVGをまとめておきます。
定義は1度だけで良いのでinclude_once()を使用してbodyタグ直下に記述し、1度しか読み込みが実行されないようにします。
<?php include_once('parts/svg-symbol.php'); ?>PHP: include_once - Manual（新しいタブで開く）
参考・引用
この記事は役に立ちましたか？