a-little-log

Web制作では、よく使うアイコンを画像として用意する方法もありますが、SVGスプライトを使うと管理や表示が格段に便利になります。

さらに、CSSで色やサイズを自由に変更できるため、デザインの変更やホバーアニメーションにも柔軟に対応できます。

参考：デモページ

1. SVGスプライトとは

SVGスプライトとは、複数のSVGアイコンを1つのSVGファイルにまとめたものです。

これにより、アイコンごとにファイルを分けずに済むので、管理が簡単です。

さらに、imgタグで個別画像を読み込む場合と比べてHTTPリクエストやファイルサイズを減らせるためページの読み込みが速くなります。

2. SVGスプライトの作成

今回はこちらのサイトのアイコンを参考にしています。

1,100+ FREE SVG icons | Untitled UI Icons

<symbol> を使うことで、1つのスプライト内に複数のアイコンを効率的に管理できます。

<symbol> は直接表示されず、必要な場所で <use> を使って複製して表示できるため、同じアイコンを何度もコピーする必要がありません。

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <symbol id="icon-arrow" viewBox="0 0 24 24">
    <path d="M21 12L14 5V9H3.8C3.51997 9 3.37996 9 3.273 9.0545C3.17892 9.10243 3.10243 9.17892 3.0545 9.273C3 9.37996 3 9.51997 3 9.8V14.2C3 14.48 3 14.62 3.0545 14.727C3.10243 14.8211 3.17892 14.8976 3.273 14.9455C3.37996 15 3.51997 15 3.8 15H14V19L21 12Z"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"/>
  </symbol>
  <symbol id="icon-other" viewBox="0 0 24 24">
    <!-- 他のアイコンもここに定義可能 -->
  </symbol>
</svg>

• <symbol> で個々のアイコンを定義
• id がアイコンの識別子になる

ポイント

• 塗りつぶしを消す
  <path> に fill="none" を追加することで、ブラウザが勝手に黒で塗りつぶすのを防ぎます。
• 線の色をCSSで変更可能
  <path> に stroke="currentColor" を指定すれば、CSSの color プロパティで線の色を自由に変更できます。

補足：<symbol> とは

<symbol> は SVGスプライト内でアイコンなどのグラフィックを定義しておくための要素 です。

直接表示されることはなく、<use> を使って必要な場所で複製して表示します。

• 非表示で定義しておけるので、複数の場所で同じアイコンを効率的に使える
• viewBox を設定しておくと、複製先でサイズを自由に調整可能

3. SVGスプライトをHTMLで使う方法

<use> タグを使うと、スプライト内のアイコンを呼び出せます。

<svg class="icon icon-arrow" width="40" height="40">
  <use href="#icon-arrow"></use>
</svg>

• href でスプライト内のアイコンIDを指定
• 複数の場所で同じスプライトを使い回せる

補足：<use> とは

<use> は SVG内の既存の要素を参照して複製し、指定した場所に表示するタグ です。

スプライト内の <symbol> を呼び出すことで、同じアイコンを何度もコピーせずに使えます。

• 参照先の要素を複製して表示するので、元の要素は変更されない
• 複製先のサイズや色はCSSで自由に変更可能

4. CSSで色やサイズを自由に変更

SVGはCSSで色やサイズを自由に変更可能です。

<path> に stroke="currentColor" を指定しておくと、CSSの color プロパティを変えるだけで線の色を簡単に切り替えられます。

.icon-arrow {
  color: #ff6600; /* 別の色に変更可能 */
  width: 32px;
  height: 32px;
}

• クラスごとに色やサイズを簡単に切り替えられる
• CSSアニメーションも使える

5. 外部SVGスプライトファイルの管理方法

スプライトファイルをHTMLに直接埋め込むのではなく、外部ファイルとして管理することもできます。

<svg class="icon icon-arrow">
  <use href="sprite.svg#icon-arrow"></use>
</svg>

• sprite.svg がスプライトファイル
• 複数ページで同じスプライトを共有可能

まとめ

SVGスプライトは、Web制作におけるアイコン管理を効率化する素晴らしい方法です。

CSSで色やサイズを自由に変えられるので、デザインの自由度も高く、ページのパフォーマンスも向上するのでオススメです。

参考

• <use> - SVG | MDN
• <symbol> - SVG | MDN