SVGの様々な書き出し方法（Photoshop,Illustrator）

Web業界はここ数年でSVG（スケーラブル・ベクター・グラフィックス）形式の使用が増えてきました。ロゴ、アイコンなどは特に使用が多くなりましたね。JPG、PNGと違い、拡大縮小しても画像が荒れること無いので、レスポンシブデザインには非常に有効です。

そんなSVG形式ですが、様々な書き出し方法があるのをご存知でしょうか。

今回は制作現場でよく使用するアプリ、Photoshop、Illustratorを使用したSVG形式の書き出し方法をご紹介します。

Photoshopの場合

アセット機能で書き出しする方法

1. メニューバーの「ファイル」→「生成」→「画像アセット」にチェックを入れる
2. 書き出ししたいレイヤーもしくは複数のシェイプレイヤーが入ったフォルダの後ろに「.svg」の拡張子の名前（例：「logo.svg」など）を追加する
3. 保存をするとアセットフォルダが生成されSVGファイルが保存される

『重要』Photoshop2015バージョンはバグで、アセット機能でSVG書き出し出来ない（Adobeに確認済み）とのこと…。

コピーペーストでテキストエディタに貼り付けする方法

1. 書き出ししたいレイヤーもしくは複数のシェイプレイヤーが入ったフォルダを選択し、メニューバーの「レイヤー」→「svgをコピー」を選択
2. テキストエディタに移りペーストして生成されたコードを貼り付ける
3. テキストエディタのファイルの保存名の最後に拡張子「.svg」にを追加して保存

書き出しの際のご注意

※SVGで書き出しが出来るのは「シェイプパス」のみです。ラスタライズ、スマートオブジェクト化されたレイヤーは書き出しが出来ても「画像が配置」されたSVGファイルが生成されるだけで意味がありません。必ずシェイプパスで作成したレイヤーを選択し、書き出して下さい。

※複数のシェイプレイヤーをフォルダにまとめ、フォルダ名に「.svg」を付けると、フォルダ内に入っているシェイプレイヤーがまとめて一つのSVGファイルとして書き出されます。

※フォントを含む場合は、フォントレイヤーを選択し、メニューバーから「書式」→「シェイプに変換」をしてシェイプレイヤー化してください。

Illustratorの場合

ファイル保存でSVGファイル作成する方法

作成したファイルを「SVG」もしくは「SVG圧縮」で保存するだけです。

※保存の際「SVGオプション」ウィンドウが表示されますが、任意で設定してください。それぞれの項目について詳しくはAdobeのHPを御覧ください。

• SVG 形式で書き出す方法 （Illustrator CC）

ちなみに私は「Illustratorの編集機能を保持」のみチェックを外して、あとはデフォルト設定で保存しています。

コピーペーストでテキストエディタに貼り付ける方法

1. 書き出したいオブジェクトを選択し、コピー
2. テキストエディタに移りペーストして生成されたコードを貼り付ける
3. テキストエディタのファイルの保存名の最後に拡張子「.svg」にを追加して保存

書き出しの際のご注意

※SVGで書き出しが出来るのは「パス化されているオブジェクト」のみです。貼り付けたリンク画像や、埋め込んだ画像などは書き出ししても「画像が配置」されたSVGファイルが生成されるだけで意味がありません。

※フォントを含む場合はフォントを選択し、メニューバーから「書式」→「アウトラインを作成」をしてアウトライン化してください。

まとめ

いかがでしたでしょうか。SVGの書き出しと言っても色んな方法がありますね。皆さんで色々やりやすい方法を探してみて下さい。