SHT21_1

一部のAndroidブラウザでSVGを横幅100%で表示するとアスペクト比が崩れる問題


一部のAndroidブラウザでSVGを横幅100%で表示するとアスペクト比が崩れて表示されてしまう場合があります。この場合の対処方法をご紹介します。
※Android2以前ではそもそもSVGに対応していません。

イラストレーターでSVGを作って、100%表示で配置する

1

[SVGファイルの作り方はこちらを参照] SVG 形式で書き出す方法 (Illustrator CC) – Adobe

Nexus5(Android4.4 Chrome)

問題無し
nexus5

ARROWS Z ISW13F(Android4.1 Chrome)

上下にマージンはあけていないのに、スキマが出来てしまう。比率も合っていません。
ISW13F_1

AQUOS PAD SHT21(Android4.1 Chrome)

アスペクト比率がおかしい
SHT21_1

解消方法

SVGファイルをテキストエディタ等で開き、名前空間(<svg></svg>)の宣言のところに「preserveAspectRatio=”none”」を追記します。

追記前

追記後

※「xmlns:xlink=〜」の記述の直後に「preserveAspectRatio=”none”」を追記

これで全ての端末で正常に表示できるようになりました。

nexus5_2ISW13F_2SHT21_2

「preserveAspectRatio=”none”」を追記する位置に注意

「preserveAspectRatio=”none”」の追記を一番最後にしてしまうと、端末によっては下記のようになってしまいます。
縦に伸び過ぎ。
※NG例

ISW13F_3

「preserveAspectRatio」とは?

「preserveAspectRatio」はviewBoxで指定したサイズと実際の描画サイズが異なる場合に、アスペクト比をどう制御するかを設定するためのプロパティです。「preserveAspectRatio=”none”」を設定する事で、HTMLで設定したサイズを反映してくれるようになります。
※尚、iOSの場合は特に「preserveAspectRatio=”none”」の記述が無くてもHTMLでの記述通りに表示されます。

以下、@ITさんからの引用。

viewBoxで指定した表示範囲とwidth、height属性のアスペクト比が異なる場合、デフォルトではアスペクト比を維持しながら表示範囲がすべて見えるようにスケーリングし、中央寄せして表示します。この挙動を変更するのがpreserveAspectRatio属性です。属性値としてはnone、もしくはx[Min|Mid|Max]Y[Min|Mid|Max]が指定できます。noneの場合はアスペクト比を崩してviewBoxが表示サイズにフィットするように変形します。

[引用]@IT 10分でわかるSVG 基礎編

Related Posts

About Blog

スマホサイト制作のフロントエンド・UIについてのノウハウをご紹介しています。

mobile-design Pinterest

スマートフォンサイトのデザインまとめPinterest。株式会社hi-posiのスタッフが日々更新中。