トップページ > ソフトウェアの操作 > Illustrator で SVG ファイルを作成する方法

Illustrator で SVG ファイルを作成する方法

[初回公開] 2021年03月20日

一般的に画像ファイルというと JPEG や PNG といったバイナリ形式の不可逆なファイルを指すが、SVG も取り扱い方は画像ファイルと同様ながらもその実態はテキストファイルとなっているものの、SVG 形式として書き出すことができるソフトウェアに限りがあるためその方法について紹介する。

このページの目次

SVG とは
SVG ファイルの使い方
SVG ファイルの作成方法
書き出した SVG ファイルの中身

SVG とは

SVG ファイルとは Scalable Vector Graphics の略で、GIF、JPEG、PNG といった画像ファイルの一種となる。
GIF、JPEG、PNG は元のサイズから拡大すると荒くなり、反対に縮小すると部分的に欠損するように見えるのに対して、SVG ファイルは元のサイズから拡大縮小しても見た目に影響を受けない「ベクタ型」となっているのが特徴である。

SVG ファイルの使い方

SVG ファイルはテキストエディタで開くことができ、その中身は XML 形式でイラストの色や線・塗りつぶしをコード化したものであるが、HTML 内では画像表示に利用する img タグで GIF、JPEG、PNG で表示することができる。
CSS でのサイズ等の調整も適用されるので画像ファイルの取り扱いと同様である。
また、img タグではなく SVG ファイルの中身であるコードを HTML 内にそのまま記載しても画像として表示することができる。

SVG ファイルの作成方法

SVG にするイラストや文字列を Illustrator に用意する

SVG ファイルを用意するために今回は Adobe Illustrator を利用する。
まずは上図のようにキャンバスにイラストや文字列を配置する。

SVG ファイルの作成方法

選択オブジェクトをキャンバスに合わせる

Illustrator のキャンバスに絵画したイラストや配置した文字列をそのまま SVG にするとイラストや文字列とキャンバスの間の空白も SVG のコード値に含まれてしまうため、キャンバスとオブジェクトの大きさを同じにしておく。
キャンバスとオブジェクトの大きさを同じにするためにはオブジェクトを選択した状態で、上部メニューより「オブジェクト -> アートボード -> 選択オブジェクトに合わせる」でキャンバスの余白が自動調整される。

オブジェクトの大きさにキャンバスが合った状態

「選択オブジェクトに合わせる」を実行すると上図のようにオブジェクトの最大幅と最大高に合わせてキャンバスが自動調整されて余白が無い状態となる。

SVG ファイルに書き出す

SVG ファイルを書き出すためには上部メニューより「ファイル -> スクリプト -> ドキュメントを SVG として保存」を選択すると任意の場所に SVG ファイルが生成される。
無事に SVG ファイルが書き出すことができれば下図のように「ドキュメントは SVG 形式として書き出されました」と表示される。

問題無く SVG ファイルが書き出された時の表示