svgの実装方法

CSS

補足：SVGのメリット

・いくら拡大しても画像が劣化しない

・カラー変更できる

・ホバー効果やダークモードに対応しやすい

インラインSVG

<svg width='30' height='30'>
  <path d='M20.035 13.5 13.5 19.802l-1.307-1.26 4.37-4.214H6.965v-1.782h9.466l-4.238-4.087 1.307-1.26 6.535 6.301Z'/>
</svg>

CSSやJSで直接操作できるが、外部ファイルの読み込みには対応していない

<img>

<img src='sample.svg' width='30' height='30' />

外部ファイルを読み込めるが、CSSやJSで直接操作できないし、インラインSVGと違ってHTTPSリクエストが発生するため、読み込み時間がかかる

background-image

.icon-arrow {
  background-image: url('icon-arrow.svg')
}

<use>

割愛

BACK