SVG タグについて

SVGタグの書き方には、いくつかの方法があり、どれがベストかの判断が難しいため、下記のような区分で書き分けます。

重要な意味合いを持つ SVG

ロゴなどの重要な意味を持つSVG画像に関しては img 要素で読み込んで alt 属性を付与します。

<img src="path/to/your/svg.svg" alt="Your SVG description" />

重要な意味合いを持たない SVG

前に戻る

上記のSVGは実際にマークアップしたサンプルです。以下の要求を満たすため下記の書き方にします。
※CSSはTailwindを使う前提です。

• Tooltipとしての表示（titleタグ）
• 要素のテキストカラーと同じ色で塗りつぶせる（fill）
• 音声の読み上げ（.sr-only）
• テキストのコピー（.sr-only）

<svg
  aria-hidden="true"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  height="24"
  width="24"
  fill="currentColor"
>
  <title>前に戻る</title>
  <path
    d="M5.82843 6.99955L8.36396 9.53509L6.94975 10.9493L2 5.99955L6.94975 1.0498L8.36396 2.46402L5.82843 4.99955H13C17.4183 4.99955 21 8.58127 21 12.9996C21 17.4178 17.4183 20.9996 13 20.9996H4V18.9996H13C16.3137 18.9996 19 16.3133 19 12.9996C19 9.68584 16.3137 6.99955 13 6.99955H5.82843Z"
  ></path>
</svg>
<span class="sr-only">前に戻る</span>

参考

URL	備考
インライン SVG の代替テキストはどうするべきか