昨日動作検証などに使う白ロムのAndroid端末「AQUOS PHONE SERIE（アクオスフォン セリエ） SHL21」を購入しました。早速このサイトを見てみたところ、ブラウザ・Chrome共にロゴが正しく表示されていない事が分かりました（ブラウザではロゴの上下に大きな空間が表示され、Chromeは次の画像のようにつぶれて表示されていました）。
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">
Illustratorで書き出したときにwidth / height属性があったかどうかは今確認できないので、次回作成時は注意したいと思います。