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 の代替テキストはどうするべきか