同じSVGを使い回す

2021/10/23（土）

たとえば汎用的なアイコンを同一ページ内のありとあらゆる場所で表示したい時は往々にしてあると思います。そんな時は<symbol>タグを用い定義し、<use>タグで参照すると複数の場所において同じSVG要素の表示が可能です。

例

以下のSVGの矢印アイコンがあったとします。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <line x1="5" y1="12" x2="19" y2="12" />
  <line x1="13" y1="18" x2="19" y2="12" />
  <line x1="13" y1="6" x2="19" y2="12" />
</svg>

このSVGタグをそのままページ内に複数挿入するとその分ページサイズが増えますし、重複タグも発生します。何より管理が面倒になりそうです。

<symbol>タグを用い定義してしまいます。idには参照する際のユニークな文字列を指定します。

<div style="display: none;">
  <svg style="position: absolute">
    <!-- svgタグをsymbolタグに書き換え、idを追加します -->
    <symbol id="ico-arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
      <line x1="5" y1="12" x2="19" y2="12" />
      <line x1="13" y1="18" x2="19" y2="12" />
      <line x1="13" y1="6" x2="19" y2="12" />
    </symbol>
  </svg>
</div>

あとは<use>タグで参照するだけです。

<svg viewBox="0 0 24 24" width="24" height="24">
  <use xlink:href="#ico-arrow-right"></use>
</svg>

実際の運用時には以下のように大量のSVG要素を扱う事も多いため、svg-spriteなどを用い自動化する形が多いです。

<body>
  <div style="display: none;">
    <svg style="position: absolute">
      <symbol id="ico-hoge1" xmlns="http://www.w3.org/2000/svg">...</symbol>
      <symbol id="ico-hoge2" xmlns="http://www.w3.org/2000/svg">...</symbol>
      <symbol id="ico-hoge3" xmlns="http://www.w3.org/2000/svg">...</symbol>
      ...
      <symbol id="ico-hoge20" xmlns="http://www.w3.org/2000/svg">...</symbol>
    </svg>
  </div>
</body>

一度定義してしまえば心置きなく使いまわしができ、ページサイズの削減にも貢献できるため活用できる場合は積極的に使ってみたいタグです。