最近はWebサイトにロゴデータなどをSVGで設置する機会が増えました。
しかし下記のブラウザででSVGが崩れて表示されることが。
- iPhone safari
- iPhone chrome
部分的にパスが欠如して飛んでしまっていたり、曲線が不自然に曲がります。
拡大、縮小するごとに怪しい挙動をしてパスが安定しません。
原因はIllustratorでSVGに書き出すときのパスの詳細設定にありました。
これだけが原因かどうかはわかりませんが、以下に解決した方法を書き残しておきます。
解決方法1 SVGファイルを別名で保存する方法
まず、崩れの起こるSVGファイルをIllustratorで開きます。
「ファイル」→「別名で保存」（shift + ctrl + S）をします。
すると以下のような「SVGオプション」ウィンドウが表示されます。
「詳細オプション」の「小数点以下の桁数」の数値を増やします。
初期値は「1」になっていましたが、説明の推奨サイズに合わせて「3」にしました。
すると先程まで不安定だったSVGがしっかり安定して表示されるようになりました。
解決方法2 アセットのオプションから設定を変更する方法
こちらは後日発見した方法。
アセット書き出しのオプションを変更する方法です。
書き出したいデータをIllustratorで開きます。
メニューの「ウィンドウ」→「アセット」ウィンドウを開きます。
アセットウィンドウの右上のボタンからオプションを開き「形式の設定」をクリック。
「形式の設定」ウィンドウが開くので、
左から「SVG」を選択し、「小数点以下の桁数」を「3」に変更します。
Illustrator CC 2018の初期値は「2」でした。バージョンで初期値が微妙に異なるのかも？もしかすると「2」でも十分かもしれません。
スポンサードリンク
解説
「小数点以下の桁数」によるSVGの描画の変化は以下の記事で詳しくまとめられています。すごい！
要は桁数が多いほどより正確なSVGを描画できるということです。
しかしそれに伴って、ファイル容量も大きくなりますし、桁数が多すぎることでブラウザがうまく描画してくれないこともあります。
現状、ブラウザによってSVGのレンダリング精度が異なるようなので、ブラウザベンダーには頑張ってほしいところです。
お疲れ様でした。
