SVGアイコンはインラインで表示すると、CSSで色を変えられたり色々便利です。
しかし、コードが長くなってしまうため、たとえばボタンの矢印部分をSVGアイコンで繰り返し使う場合などは、記述量が多くなってしまいソースが読み辛くなりがちです。
そこで、SVGアイコンを一箇所にまとめて定義しておき、useタグを使って必要な場所で呼び出す方法が便利です。
今回は、symbol・useタグを使って、HTMLを汚すことなく効率的にSVGアイコンを使い回す方法を解説します。
symbol・useタグを使ってSVGアイコンを使い回す方法
今回は、以下のようにページ内の複数箇所で利用される想定のボタンを用意しました。
<a href="#" class="btn">
<span>ボタン</span>
<svg width="70" height="8" viewBox="0 0 70 8">
<polygon fill="#333" points="61 0 61 6 0 6 0 8 61 8 70 8 61 0" />
</svg>
</a>.btn {
position: relative;
z-index: 1;
display: inline-block;
border: 2px solid #333;
width: 200px;
padding: 10px 0;
text-align: center;
color: #333;
background-color: #fff;
text-decoration: none;
}
.btn svg {
position: absolute;
z-index: 1;
bottom: 10px;
left: calc(100% - 50px);
}
このボタンを毎回インラインSVGを含めて記述すると、HTMLコードが長くなってしまうため、symbolタグ内に一回だけSVGアイコンを定義し、useタグを使って呼び出せるようにします。
まず、bodyタグの開始直後にSVGコードを移動させます。
<body>
<svg width="70" height="8" viewBox="0 0 70 8">
<polygon fill="#333" points="61 0 61 6 0 6 0 8 61 8 70 8 61 0" />
</svg>
<a href="#" class="btn">
<span>ボタン</span>
<!-- 以下のコードをbodyタグ直下に移動 -->
<!-- <svg width="70" height="8" viewBox="0 0 70 8">
<polygon fill="#333" points="61 0 61 6 0 6 0 8 61 8 70 8 61 0" />
</svg> -->
</a>
</body>続いてsvgコードの中に<symbol></symbol>タグを記述し、viewBoxをsymbolタグに移動させます。
symbolタグには後からuseタグを使ってSVGアイコンを呼び出せるように、id属性も付けておきます。
<body>
<svg width="70" height="8">
<symbol viewBox="0 0 70 8" id="arrow">
<polygon fill="#333" points="61 0 61 6 0 6 0 8 61 8 70 8 61 0" />
</symbol>
</svg>
<a href="#" class="btn">
<span>ボタン</span>
</a>
</body>また、こちらはSVGアイコンの定義が目的で画面上には何も表示させないため、width属性とheight属性の値を0にし、display: noneとしておきます。
<body>
<svg width="0" height="0" style="display: none">
<symbol viewBox="0 0 70 8" id="arrow">
<polygon fill="#333" points="61 0 61 6 0 6 0 8 61 8 70 8 61 0" />
</symbol>
</svg>
<a href="#" class="btn">
<span>ボタン</span>
</a>
</body>あとは、SVGアイコンを呼び出したい部分で<use />タグを使用します。
<svg></svg>タグで<use />タグを囲い、href属性の中に使用したいアイコンのid属性を指定すればOKです。
<body>
<svg width="0" height="0" style="display: none">
<symbol viewBox="0 0 70 8" id="arrow">
<polygon fill="#333" points="61 0 61 6 0 6 0 8 61 8 70 8 61 0" />
</symbol>
</svg>
<a href="#" class="btn">
<span>ボタン</span>
<svg width="70" height="8">
<use href="#arrow" />
</svg>
</a>
</body>useタグを利用すると、同じアイコンを複数箇所で繰り返し呼び出すことができます。
複数のSVGアイコンをまとめて定義したい場合は、1つのアイコンに対しsymbolタグを追加する
上の例では、矢印アイコンの1つのみsymbolタグを使って定義していますが、symbolタグを追加していくことで、複数のSVGアイコンを定義することができます。
<body>
<svg width="0" height="0" style="display: none">
<!-- 矢印アイコン -->
<symbol viewBox="0 0 70 8" id="arrow">
<polygon fill="#333" points="61 0 61 6 0 6 0 8 61 8 70 8 61 0" />
</symbol>
<!-- 丸アイコン -->
<symbol viewBox="0 0 100 100" id="circle">
<circle cx="50" cy="50" r="48" fill="#666" />
</symbol>
<!-- 四角アイコン -->
<symbol viewBox="0 0 100 100" id="square">
<rect x="10" y="10" width="80" height="80" fill="#999" />
</symbol>
</svg>
</body>PHPが利用できる環境であれば、インラインSVGを別ファイルに分割しておくと便利
PHPが利用できる環境であれば、インラインSVGを別ファイルとして定義し、include_once() などを使って読み込むことで、ソースコードを煩雑にせずにインラインSVGを利用できます。
<body>
<?php include_once('svg-symbol.php'); ?>
<a href="#" class="btn">
<span>ボタン</span>
<svg width="70" height="8">
<use href="#arrow" />
</svg>
</a>
</body>まとめ
今回はsymbolタグとuseタグを使って、ソースコードを汚すことなくインラインSVGを使い回す方法を解説しました。
CSSで柔軟にスタイルを変更できるインラインSVGを活かしつつ、HTMLの記述量を減らしたい方は、ぜひ試してみて下さい。
今回は以上になります。最後までご覧頂き、ありがとうございました。
