AndroidでSVGが正しく表示されていなかった問題を解決

昨日動作検証などに使う白ロムのAndroid端末「AQUOS PHONE SERIE(アクオスフォン セリエ) SHL21」を購入しました。早速このサイトを見てみたところ、ブラウザ・Chrome共にロゴが正しく表示されていない事が分かりました(ブラウザではロゴの上下に大きな空間が表示され、Chromeは次の画像のようにつぶれて表示されていました)。 SHL21のChromeでSVGのロゴが正常に表示されていない様子

Chromeでリモートでバッグを使って確認したところ、ロゴのNatural Image Heightが1,000px台の値となっており、これが不具合の原因になっているように思えました。Webグラフィックをハックする(2):10分でわかるSVG 基礎編 (1/5) - @ITの「表示サイズとスケーリング」の項を読んだりしたところ、width / height属性でHTML上に表示するサイズを定義できる事を知ったのですが、このサイトのロゴにはその指定がありませんでした。そこでひとまずsvg要素にviewBox属性と同じ幅・高さを指定してAndroidで確認してみたところ、正常に表示されるようになりました。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477 279" width="477" height="279"> SHL21のChromeでSVGのロゴが正常に表示された様子

Illustratorで書き出したときにwidth / height属性があったかどうかは今確認できないので、次回作成時は注意したいと思います。

この記事のタグ