SVGスプライトの読み込み方の検証

SVGがサポートされていないブラウザで表示されます。

スプライト画像の全貌

• 以下、<img>を使ってスプライト全体を読み込んでいます
• SVGでは<g>や<rect>などの要素にIDが振られています

Modernブラウザでは使えそうな読み込み方

同じスプライト画像をCSSからポジションを指定して読み込んだ場合

同じスプライト画像を<use>でfragment identifierを使って読み込んだ場合