illustratorでSVGを書き出し、ブラウザで確認すると、予想より縦横のサイズが大きてびっくりすることがある。原因は書き出し方にあるので、今回はその方法を記載。
まず「アセットの書き出し」の設定を確認する
illustratorでSVGを書き出す前に、まず「アセットの書き出し」を開き「形式の設定」を開け、SVGの箇所を確認する。すると、デフォルトで「レスポンシブ」にチェックが入っている。
※「アセットの書き出し」が見つからない場合は、ツールバー＞ウィンドウ＞アセットの書き出し で表示させる。
レスポンシブ設定とは？
レスポンシブ設定とは、widthとheight属性を削除して書き出し、widthとheightを100％のように表示する設定。
IEやAndroidで表示が崩れることもあるので、あまりおすすめできない。
SVGの縦横のサイズを保持したい場合
この「レスポンシブ」のチェックを外して書き出すと、もともとの縦横サイズで書き出してくれる。
