ウェブサイト制作の現場では、アセットとしてイラストアイコンやピクトグラムをSVGで書き出す機会は多いと思います。
そんな中、以前から稀にですが、書き出したSVGデータのパスが崩れてしまう事象に悩んでいました。線(パス)が不自然に細くなったり、R(アール)が崩れたりします。
この事象は、発生するイラストとしないものがあったため、これまでは「多分編集データが悪い」「多分作り方が悪い」と見て見ぬ振りをしてきました(爆)が、この度ちゃんと原因と対策を調べました。
原因はベクトル精度の設定
原因は、IllustratorからSVGを書き出す際のベクトル設定の精度でした。
「小数点以下の桁数」が初期設定の「1」のままでは、パスの精度が大幅に簡略化されていた結果です。
書き出し時に表示されるダイアログの「詳細オプション」→「小数点以下の桁数」で、数値(1～7)を上げることで精度を調整できます。ダイアログの説明欄にもある通り、この値を「1」から「3」に上げたところ、正しいパスでSVGが保存されるようになりました。
なお、数値を上げるほど精度は高くなりますが、その分データ容量も増えるため注意です。といってもベクターデータなので誤差の範囲ですが。
まずは「3」まで上げてみて、そこから調整していくのがベストだと思います。
