SVG形式で書き出すと描画した図形と形状が微妙に変わってしまう

IllustratorでSVG形式で書き出すと描画した図形と形状が微妙に変わってしまう現象と対処法を紹介します。

現象の確認

Illustratorで下図の図形を描画します。つぶれた円形です。


楕円形ツールで楕円を描画した後、ダイレクト選択ツールでハンドルを操作して微妙に図形をゆがませています。


この図形をSVG形式で書き出します。[ファイル]メニューの[書き出し]のサブメニューの[書き出し形式]をクリックします。
保存ダイアログが表示されますので、SVG形式で書き出します。


書き出したSVGファイルをWebブラウザで開きます。下図の画面が表示されます。Illustratorで描画した図形と違い、楕円にゆがみが無くなってしまっています。


重ねた状態です。楕円部分はあっているようですが、ハンドルを操作した変形が反映されていないように見えます。

対処方法

図形をアウトライン化してからSVGに出力するとこの現象を回避できる場合があります。
描画した図形を選択し、[オブジェクト]メニューの[パス]サブメニューの[パスのアウトライン]の項目をクリックします。


パスがアウトライン化され、下図の表示になります。アウトライン化した状態で、SVG形式で書き出します。

書き出された、SVGファイルをWebブラウザなどで開いて表示を確認します。左側がアウトライン化する前の状態で書き出したSVGファイル、 右側がアウトライン化してから書き出したSVGファイルです。
図形のゆがみ部分が反映されていることが確認できます。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。