svg画像を使うとiOSのSafariだと小さくなる

logwのSNSアイコンはSVGを使っています。今までAndroidもSafariも問題なくみれていたのですが、ある日突然Safariだとアイコンが豆粒みたいな小ささになりました。

WordPress5.5以降だとなる？

WordPress5.5, SVGの画像が小さく表示されるのを直すだとどうやらWordPress5.5以降はSVGが小さく表示されるっぽいです。自分のサイトも突然なったので、これなのかな？と勝手に思いました

widthとheightのサイズがおかしい

記事にあるように

原因は、のwidth, height属性値が小さくなるから。HTMLはこんな感じになります。 SVG画像のサイズがデフォルトで 60～70前後になるらしい。小さすぎます。

とあります。実際にlogwのサイトでもiOSで見ると70px近くとかなり小さくなってました

該当箇所コード

<li>
<a class="twitter-button" href="https://twitter.com/share?url=<?php echo urlencode(get\_permalink()); ?>&text=<?php echo urlencode(get\_the\_title()); ?>" ><img src="<?php echo get\_template\_directory\_uri(); ?>/images/common/up\_twitter.svg" width="210" height="60"></a></li>
<li>
<a title="facebookでシェアする" href="http://www.facebook.com/sharer.php?u=<?php echo("https://" . $\_SERVER["HTTP\_HOST"] . $\_SERVER["REQUEST\_URI"]); ?>&t=<?php echo trim(wp\_title( '', false)); ?>" target="\_blank">
<img src="<?php echo get\_template\_directory\_uri(); ?>/images/common/up\_facebook.svg" width="210" height="60"></a></li>
<li>
<a href="http://line.naver.jp/R/msg/text/?<?php the\_title(); ?>%0D%0A<?php the\_permalink(); ?>"><img src="<?php echo get\_template\_directory\_uri(); ?>/images/common/up\_line.svg" width="210" height="60"></a>
</li>

となってました。Androidなどでは問題なく見れるのですがiPhoneのiOSだとアイコンが異常に小さくなります。

WordPressが原因？

正直WordPressが原因なのか？と言われるとわからないといのがあります。ただ今回は違うのではないかなと思います。

WordPressのSVGサポートはアップロードの問題

WordPressのSVG問題はアップロードできないなどの問題です。logwではテーマにSVGを入れているのでアップロード機能はつかっていません。なので関係ないかなと

iOSをアップデートしてから起きた可能性もある

ある日突然小さく表示されるようになったのですが、そもそもこれはiOSをアップデートした事でおきた可能性も否定できません。気づいたらおきているため。また、PC版のSafariではSVGの画像を問題なく表示できていました

iPhoneのSafariの問題となります

解決策

結論：スタイルシートにサイズを指定

これだけです

.blog\_info{
li{
display:inline;
font-size:@text\_font\_side\*10;
width: 210px;
height: 60px;
img{
margin-bottom: 0;
width: 100%;
}
}
}

※該当箇所ののみ抜粋

これでSVGがちゃんと表示されるようになりました。もしSVGがうまく表示されないって方は参考までに