SVGスプライト SVGの扱い方-すたすた式

SVGの追加や変更のとき、その都度調べているので忘れがちなことをまとめておきます。

SVGスプライト

SVGスプライトは1つのSVGファイルに複数のアイコンを記述し、<use>要素で参照する方法です。

必要なアイコンは1箇所にまとめられるため、HTMLファイルの煩雑化を防ぎつつ、アイコンの色変更などSVG自体が持つ恩恵を享受できることがメリットです。

SVGスプライトを作成するためのビルドプロセスが複雑になることがデメリットです。

ライセンス

ライセンスに抵触しないように。（CC BY 4.0、MIT License、Apache License 2.0など）

クレジット表記として提供元のライセンスやライセンスがあるURLを忘れずに書くこと。

また、ライセンス上クレジット表記の必要がなくても、保守性の観点から提供元の名前やURL、使用したSVGの名前、URLなどを記載した方がよいと考えます。

下のSVGのライセンスなど

License:https://github.com/tabler/tabler-icons/blob/main/LICENSE（MIT license）

Tabler Icons heart https://tablericons.com/icon/heart

SVG

元のSVG例：

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-linecap="round"
  stroke-linejoin="round"
  width="24"
  height="24"
  stroke-width="2"
>
  <path
    d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
  ></path>
</svg>

元のSVGからsymbolタグで利用するもの

pathタグの内容
viewBox属性と値

pathタグのほかにgタグなどもある。

SVG 要素リファレンス - SVG: スケーラブルベクターグラフィック | MDN

fill、stroke、width、heightなどはCSSで指定する。

HTMLに直接記述する場合

ページのどこかで、SVGの呼び出し元コードを読み込んでおく。

ここでは表示しない、あくまで呼び出し元なので、symbolタグでくくっておく。

symbolタグは、その場で表示するのではなく、あとでuseタグで呼び出す用として定義だけをするものです。

例：id="upVoteIcon"を指定しているsymbolタグの内容を、useタグのhref="#upVoteIcon"で呼び出す

SVGの呼び出し元:

<svg style="display: none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="upVoteIcon" viewBox="0 0 24 24">
            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
        </symbol>
    </defs>
</svg>

useタグで呼び出す:

<svg role="img" aria-label="いいねアイコン" class="upvote-icon" width="24" height="24">
    <use href="#upVoteIcon"></use>
</svg>

JavaScript,CSSはclass="upvote-icon"を指定して利用可能。

HTMLに直接記述する場合はxmlns="http://www.w3.org/2000/svg"はなくてもいいらしです。

Namespace — SVG 2

Webコンテンツをよりアクセシブルにするためのrole、aria-*属性は適宜指定。

WAIARIAAttributes — SVG 2

Accessible Rich Internet Applications (WAI-ARIA) 1.1

HTML5 & CSS3 リファレンス - role属性　（要素の役割（WAI-ARIA））

defsタグはアクセシビリティ、可読性のためにあったほうがいい。

DefsElement — SVG 2

xlink:href属性があった場合、非推奨なので削除可能。

XLinkRefAttrs — SVG 2

複数のSVGがある場合

複数のSVGがある場合、defsタグの内側に書いていく。

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="upVoteIcon" viewBox="0 0 24 24">
            <path d="..."></path>
        </symbol>
        <symbol id="upVoteCounter" viewBox="0 0 24 24">
            <path d="..."></path>
        </symbol>
    </defs>
</svg>

SVGのsymbolタグの設置場所

HTMLファイル内で<symbol>タグを配置するのに最適な場所は、<body>タグ内の先頭付近。

<body>
<svg style="display: none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="upVoteIcon" viewBox="0 0 24 24">
            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
        </symbol>
    </defs>
</svg>

外部ファイルに記述する場合

icons.svg ファイルに記述する場合

icons.svg:

<svg xmlns="http://www.w3.org/2000/svg">
   <defs>
       <symbol id="upVoteIcon" viewBox="0 0 24 24">
           <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
       </symbol>
   </defs>
</svg>

HTML:

<svg role="img" aria-label="いいねアイコン" class="upvote-icon" width="24" height="24">
    <use href="icons.svg#upVoteIcon"></use>
</svg>

参考サイト

Scalable Vector Graphics (SVG) 2

SVGをuseタグで使いまわす #CSS - Qiita

SVGスプライト SVGの扱い方