ChromeなどのBlinkレンダリングエンジン搭載のブラウザーでSVG画像がキャッシュされて別のSVG画像が表示されてしまうバグへの対処法

Chrome、VivaldiなどのBlink rendering engine搭載のブラウザーにて、キャッシュされたSVG画像が別の箇所に表示されてしまうバグへの対処。

特にソーシャルメディアのアイコンにSVG画像を使用し、アンカータグで囲ってリンクを追加し、そのリンクをクリックした後戻るボタンで戻った時に、キャッシュされた画像が違うところに出現したりする。(お化けのよう)

これへの対処は、

  1. SVG画像をobjectタグで読み込む
  2. objectタグ内に、name属性を追加し、ユニークな名前を設定する

特に、name属性を追加することで解決できる。

ソース:Google Chrome randomly shuffles SVG images in <object> tags