emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

iPhone safariやchromeでSVG画像が崩れるときの解決方法

f:id:emj1025:20180628181528p:plain

最近はWebサイトにロゴデータなどをSVGで設置する機会が増えました。

 

しかし下記のブラウザででSVGが崩れて表示されることがありました。

  • iPhone safari
  • iPhone chrome

部分的にパスが欠如して飛んでしまっていたり、曲線が不自然に曲がります
拡大、縮小するごとに怪しい挙動をしてパスが安定しません。


原因はIllustratorでSVGに書き出すときのパスの詳細設定にありました。

これだけが原因かどうかはわかりませんが、以下に解決した方法を書き残しておきます。

 

解決方法1 SVGファイルを別名で保存する方法

まず、崩れの起こるSVGファイルをIllustratorで開きます。

 

「ファイル」→「別名で保存」(shift + ctrl + S)をします。

 

すると以下のような「SVGオプション」ウィンドウが表示されます。

f:id:emj1025:20180628175956p:plain

「詳細オプション」の「小数点以下の桁数」の数値を増やします。


初期値は「1」になっていましたが、説明の推奨サイズに合わせて「3」にしました。

すると先程まで不安定だったSVGがしっかり安定して表示されるようになりました。

 

 

解決方法2 アセットのオプションから設定を変更する方法

こちらは後日発見した方法。

アセット書き出しのオプションを変更する方法です。

 

書き出したいデータをIllustratorで開きます。

 

メニューの「ウィンドウ」→「アセット」ウィンドウを開きます。

アセットウィンドウの右上のボタンからオプションを開き「形式の設定」をクリック。

f:id:emj1025:20180628180337p:plain

 

 

「形式の設定」ウィンドウが開くので、

左から「SVG」を選択し、「小数点以下の桁数」を「3」に変更します。

f:id:emj1025:20180628180442p:plain

Illustrator CC 2018の初期値は「2」でした。バージョンで初期値が微妙に異なるのかも?もしかすると「2」でも十分かもしれません。

 

 

スポンサードリンク

解説

「小数点以下の桁数」によるSVGの描画の変化は以下の記事で詳しくまとめられています。すごい!

d.hatena.ne.jp

 

要は桁数が多いほどより正確なSVGを描画できるということです。
しかしそれに伴って、ファイル容量も大きくなります。


現状、ブラウザによってSVGのレンダリング精度が異なるようなので、ブラウザベンダーには頑張ってほしいところです。

 

お疲れ様でした。

 

 

emuramemo(c) All Rights Reserved.