【SVG】リンクのSVGがスマホで表示されない時がある

2019年7月5日2019年8月3日

PCでは表示されているのに、スマホで確認すると表示されたり、されなかったり・・

という現象が起こったので、その時の解決法を！

今回のSVG画像

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="27" viewBox="0 0 27 27">
　<image width="27" height="27" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/・・・・・・>
</svg>

SVG Image Tagを利用している画像です。

これをHTML側で、imgタグで表示をしていました。

<a href="/">
　<img src="/img/logo.svg" alt="logo">
</a>

このコードだとなぜかスマホで、２回に１回ぐらい表示されない現象が・・

原因までは変わらなかったのですが、下記のやり方で表示されるようになりました。

解決法

imgタグではなく、objectタグを利用する

<a href="/">
　<span>
　　<object data="/img/logo.svg" type="image/svg+xml"></object>
　</span>
</a>

objectタグをaタグで囲む場合

objectタグをaタグで囲ってもリンクにならないので、cssに下記を追加

object {
    pointer-events: none;
}

リンクになっても、画像全体がリンクにならない問題が起きます・・・・

さらにcssに下記を追加

object {
 pointer-events: none;
 position: relative;
 z-index: -1
}

a {
  display: inline-block;
  position: relative;
  z-index: 1;
}

a span {
 display: inline-block;
}

これで画像を全体をクリックできるようになり、スマホでSVGが表示されるようになりました。