Chrome、VivaldiなどのBlink rendering engine搭載のブラウザーにて、キャッシュされたSVG画像が別の箇所に表示されてしまうバグへの対処。
特にソーシャルメディアのアイコンにSVG画像を使用し、アンカータグで囲ってリンクを追加し、そのリンクをクリックした後戻るボタンで戻った時に、キャッシュされた画像が違うところに出現したりする。(お化けのよう)
これへの対処は、
- SVG画像をobjectタグで読み込む
- objectタグ内に、name属性を追加し、ユニークな名前を設定する
特に、name属性を追加することで解決できる。
ソース:Google Chrome randomly shuffles SVG images in <object> tags