イラレSVG書き出し、ファイル/アートボード/オブジェクト単位で行う方法。

元ファイルは残して書き出し。

こんにちは、「ふ」です。
イラストレーターを使っていると、「ファイル内の必要な部分だけをSVGで書き出したい！」 といったケースがあるかと思います。
そこで今回は⬇︎、３通りのSVG書き出し方法について紹介していきます。

・ファイル全体をSVGで書き出し
・アートボードを選択して書き出し
・オブジェクトやグループ要素単位で書き出し

〜これらを使い分けることで、作業効率をアップさせましょう。

元ファイルは残したままで。

時に。
現在開いているイラレファイルを「保存」または「別名で保存」を使って、SVGファイルとして保存することも可能です。

ただそれは、ai形式のファイルをsvg形式のファイルに変更してしまうことになり、「元の編集用ファイル」と「成果物としてのSVGファイル」が同一のものとなってしまいます。
再編集の際には何かと不便することでしょう。

今回紹介する方法はいずれも「元のaiファイルを残したままSVGファイルを書き出す」ものです。
再編集の際に困らないよう、以下紹介する手順を知っておいてください。

ファイル全体を書き出し。

はじめに、イラレファイルをまるごとSVGで書き出すパターン。
元ファイルとは別にSVGファイルを書き出す場合の、もっともシンプルなもの。「複製を保存」と「書き出し形式」の２種類を紹介します。

イラレで⬆︎のような画像を作りました。

複製を保存。

ファイルメニューから、「複製を保存」を選択。またはショートカットで⌘+⌥+s（winはalt+crl+s）を叩きます。

保存用のダイアログが開きます。
下のほうにある「ファイル形式」の青い部分をクリック。

「SVG」を選択しましょう。

ファイル名のところの拡張子も「.svg」に変更されています。
ファイル名と保存場所を指定し、右下のSave（保存）をクリックします。

「保存」をクリックするとオプション指定用のウインドウが表示されます。
これは、テキストや埋め込み画像に関するものです。書き出す内容が通常のベクターデータであれば、そのまま右下の「OK」をクリックしましょう。これで操作完了です。

書き出し形式。

もう１つの方法です。
ファイルメニューから「書き出し形式」のところにカーソルを合わせると、右に３つ項目が出てきます。真ん中にある「書き出し形式...」を選択しましょう。

以降は「複製を保存」のときとほとんど同じです。
書き出し用のウインドウが表示されるので、ファイル形式から「SVG」を選択。ファイル名と保存場所をしていしたら、ウインドウ右下の「書き出し」をクリック。

ここでもSVGオプションのダイアログが表示されます。
右下の「OK」をクリックして完了です。

どっちを使えばいい？

作業中のaiファイルをまるごと、SVGで書き出す方法を２つ紹介しました。
で、どっちを使うのが正しいのか？というと、どっちでもいいです。
いずれの方法も結局のところ、別個svgファイルを作成して保存するということで、本質的には同じ操作です。

サイト制作の際にSVG画像を乱発する「ふ」としては前者の「複製を保存」を使っています。やっぱりキーボードのショートカットが割り当てられているところが、メリットです。

アートボードごとに書き出し。

↑のように、複数のアートボードを配置して作業を進めることもよくあることです。

このような状態でSVGを書き出すと、そのときアクティブになっているアートボードを基準としたSVGが１枚、生成されることになります。

アクティブになっていたのは、正方形オブジェクトが置かれているアートボードでした。出力されたSVG画像は、見た目は正方形が配置されたアートボードそのものですが、「可視範囲の外側に丸や三角や星が存在している」状態です。
つまり、余計なオブジェクトの情報までSVGファイルに含まれることになります。

複数あるアートボードのうち、必要なものだけを選んで尚且つ、アートボードごとにSVGを書き出したいときは以下の処理を行って下さい。

はじめにアートボードには、通し番号が振られています。目的のアートボードの通し番号を確認しておきましょう。
shift+oを叩いて、アートボードモードにします。

アートボードモードになりました。各アートボードの左上に「01.アートボード1」「02.アートボード2」といったラベルが表示されます。
この「01」「02」というのが通し番号になります。

前のセクションで紹介した「複製を保存」または「書き出し形式」の操作をして、保存設定のダイアログを表示します。
ファイル形式のところで「SVG」を選択。

SVGを選択すると、その下の「アートボードごとに作成」にチェックが入れられるようになります。チェックしましょう。

「アートボードごとに作成」にチェックが入るとその右に「すべて」もしくは「範囲」を選ぶチェックボックスが有効になります。初期状態だと「すべて」のほうにチェックが入っているので、「範囲」に切り替え。

その右にあるテキストボックス内に、書き出すアートボードの範囲を指定します。

たとえば、通し番号02と03を書き出したい場合。画像のように、「2-3」と半角数字をハイフンでつなげて記述してください。
書き出したいアートボードが１つの場合は、数字だけで構いません。通し番号２のアートボードであれば「2」と記述してください。
指定が完了したらSave（保存）をクリック。

SVGオブションのダイアログが表示されるので、何も考えずに「OK」をクリックしましょう。

ファイルの場所を確認します。
今示した例では、

・ファイル名：sample.svg
・場所：フォルダ1
・書き出したアートボード：２と３

としていました。
該当フォルダを開いてみると、「sample-02.svg」「sample-03.svg」として保存されています。ちゃんと別々のSVGファイルとして保存されており、アートボードの通し番号も付けられています。

オブジェクトやグループ単位で書き出し。

オブジェクトまたはグループ化した要素を、単独でSVGとして書き出す方法です。
アイコンデザインなどの場合はこの方法が最適。

星型オブジェクトを３つ作りました。
ここから真ん中の青い星だけを、SVGで書き出したい。そのためには「アセットの書き出し」機能を使いましょう。

上部のメニューから、ウインドウ→アセットの書き出しをクリックします。

アセットパネルが表示されました。

真ん中の星オブジェクトをパネル上部にドラッグします。パネル上には「+」が表示されて、受け入れ体制となります。

アセットパネルにオブジェクトが登録されました。
ドラッグしていた星オブジェクトは、自動的に以前の場所に戻ります。

アセットパネル下部の「書き出し設定」のところ、現在はPNGとなっています。
これを展開して..

SVGを選択してください。

その上で右下の「書き出し...」をクリック。

「書き出し...」をクリックすると、保存場所を指定するウインドウが表示されます。
アセットの書き出しは単一のファイルではなくSVGフォルダとして出力されるため、ファイル名の指定などは要求されません。保存場所を確認して、OKなら右下の「選択」をクリックしましょう。

扨（さて）保存されたファイルを見てみます。
先ほど保存場所にえらんだ「フォルダ１」を開いてみると、SVGというフォルダが作られていました。

さらにそのフォルダを開くと..ありました。
「アセット１.svg」と名前が付けられています。

アセットにはグループ化したものも登録することができます。
⬆︎は３つの星オブジェクトをグループ化し、登録したもの。

「専用ファイル」も時には有効。

最後までお読みくださり、ありがとうございました。
今回はイラレファイルの、範囲を指定したSVG書き出し方法について紹介してきました。

アートボードごとに書き出し/オブジェクトごとに書き出し。便利な機能ではあるのですが、webで表示させるには少し面倒な部分も。
HTMLで画像を参照させるときには、⬇︎のようにファイル名を記述します。

<img src = 「「５"〇〇.svg"」」>

アートボードを使った書き出しでは、ファイル名にアートボードの通し番号がつけられたり、アセットを利用して書き出すと、SVGフォルダとして書き出されます。
よってHTML上で画像を表示させる際には、書き出されたSVGファイルの名称を確認したり、SVGフォルダの階層を記述した上で参照コードを記述する必要が生じます。←これ、めんどくさい。

そこで「ふ」は、編集用aiファイルとは別に「書き出し用aiファイル」を用意し、そこに必要な部分だけをコピペ→「複製を保存」でSVGを書き出す手法もしばしば使っています。そうすると任意にファイル名を指定できるので、参照もしやすいです。 こういった「自力で書き出し専用ファイルを作って、そこからファイルごと書き出し」という手法もアリなのかな、と思います。

みなさんも自身の用途に応じた、効率の良い方法で制作を進めてください。 ではまた〜♩