Pumi's Blog

SVGスプライトで実現する保守性の高いSVGアイコン管理

study
124 views

SVGスプライトで実現する効率的なアイコン管理

SVG画像を使う一番のメリットはホバー時に色を変えれる点です。
ただし、そのままSVG画像を構成するコードをHTMLに記述すると保守性が良くないです（画像差し替えする時に手間がかかりますし、何より見づらいです）。
SVGファイルとしてそのまま保存し、画像として読み込ませると色を変えれません。

SVG画像の保存方法に手を加えてHTMLに記述することで、保守性が良くそして色を変えることができる「SVGスプライト」という技術について紹介します。

SVGスプライトとは

SVG画像に専用のタグをつけてHTMLやCSSから読み込ませるための技術です。以下の手順でスプライト化します。

  • SVG画像側の対応
    <symbol>タグを使用してスプライト化
  • HTML側の対応
    <use>タグを使用してSVG画像を参照
  • CSSの対応
    fill設定を行い色を変える
  • その他
    アクセシビリティのためのaria-label追加

SVG画像側に<symbol>タグを使用してスプライト化

SVG画像は<svg>タグで囲まれてますが、配下の全要素を<symbol>タグで囲みます。

  1. <svg>タグ
    display:none;を設定する
    viewBoxを削除　※<symbol>タグに移動
  2. <symbol>タグ
    idを付与（id名は後でcss設定する時に使用）
    viewBoxを追加
●スプライト化前

<svg  viewBox="0 0 100 100">

    <g>【〜省略〜】</g>

</svg>
●スプライト化後

<svg style="display: none;">
  <symbol id="icon-baseball" viewBox="0 0 100 100">
    <g>【〜省略〜】</g>
  </symbol>
</svg>

HTML側に<use>タグでSVG画像を参照

HTML画像でSVG画像を読み込む時に、<svg>タグの中身は<use>タグのみ記載し、<use>タグはファイルのパス、idを設定します。

<svg class="category-icon" aria-label="野球アイコン">
  <use xlink:href="/images/baseball.svg#icon-baseball"/>
</svg>

CSSでfill設定

SVGに設定したクラス名を使ってCSS設定します

<style>
.category-icon {
  fill: white;
}

.p-category__button.active .category-icon {
    fill: green;
}
</style>

アクセシビリティのためのaria-label追加

<svg>タグにaria-labelを設定することで、<img>タグのalt属性と同様の役割を持たせることができます。

まとめ

直接HTMLにコードを書く方法でも実装自体は可能ですが、見た目が悪いです。
見た目が悪いことは、納品チェックの注意力や、修正が必要になった際の対処スピードに悪影響を及ぼします。
SVGスプライトの方法を使っておけば、品質の向上、対応スピードの向上に繋がるので、積極的に使用していきたい技術だと思います。

関連記事