Adobe Illustratorで画像をSVG形式に書き出す方法

動点P

SVG形式の画像ファイルはどうやって作ればいいの？

動点Qちゃん

Illustratorという画像編集ソフトを使ってSVG画像に書き出す方法を教えます・・・

そもそもSVG画像とは何？という方は以前のブログ記事SVGとはをご覧ください。

今回はAdobe Illustratorを使って画像を書き出していく方法です。

ベクター画像を編集できる無料の画像編集ツールもありますので、 Adobe Illustrator を持っていないという方は探してみてください。Inkscape (インクスケープ)が Adobe Illustrator に大体似たような無料ツールだと言われています。

Illustrator で画像を作成する
SVG形式で保存する
SVGデータの内容、軽量化
SVGファイルの圧縮

Illustrator で画像を作成する

まずは画像を作成します。簡単なロゴマークなどの想定でやってみます。

このとき気を付けるのは

カラーをRGBで作成する

SVGはWeb用の画像形式なので、RGBで設定するとそのままの色で画像を表示することができます。

レイヤーを一つにまとめる

レイヤーが複数あるとSVG内のデータが複雑になるので、あえてレイヤーを分ける必要がある場合以外は一つにまとめた方が容量も軽くなります。

アートボードのサイズを画像に合わせる

アートボードのサイズの情報もSVG内のデータに入ってしまいますので、周りに余白を残すと余白がついた画像として表示されます。 Adobe Illustrator の上部のメニューにある、オブジェクト＞アートボード＞オブジェクト全体に合わせる　などの機能を使い、余白をなくしておくと後で画像を配置しやすくなると思います。サイズは後で変えることもできるしCSSで変えることもできますので、適当でも大丈夫かなと思います。

以上の3点に気を付けてパスや図形ツールなどで画像を作成してください。

SVG形式で保存する

画像が作成できたら、一旦AIデータで保存しておいてから、別名でSVG形式で保存します。

Web用に保存する、ではなく、別名で保存をクリックし、ファイル名をつけ、

ファイルの種類：SVGを選択して保存してください。

SVGの圧縮形式SVGZ形式もありますが、圧縮は後からでもできるのでここではSVG形式で保存します。

保存を押すとSVGオプションウィンドウが開きます。下部にある詳細オプションをクリックし、詳細オプション設定画面を開いてください。

詳細オプションの中で小数点以下の桁数の数値は、画像データのパスなどの位置の座標をどれほど厳密に設定するかということなので、数値が多いほどキレイで作成データに忠実な画像ができます。

しかし、あまり数値を大きくしても、コードの記述量が増えて容量が無駄に増えるだけになります。2桁としても100分の1ピクセルくらいの誤差なので、複雑なデータなら容量を軽くするために1にしても自分は大丈夫だとおもっています。シンプルなもので余裕があるなら3、というわけでこの枠の数値は1～3の範囲で決めると良いと思います。1にすると一番容量が軽くなります。

あとの設定は初期値でいいと思います。

決まったらOKを押し、SVG画像を保存します。

これでSVG形式の保存は完了です。あとはこの画像ファイルをリンクさせたりアップロードするだけで拡大しても劣化しないロゴや画像などを表示させることができます。

※WordPressはセキュリティ上SVGファイルはアップロードできません。