Webデザイン

SVGの様々な書き出し方法
(Photoshop,Illustrator)

2017.10.01

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を御覧ください。

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

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

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

書き出しの際のご注意

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

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

まとめ

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

SHARE

この記事の筆者

デザイナー 芳村 明文

デザイナー 芳村 明文

カテゴライズしたらきっとデザイナーのはず。音楽(洋楽をジャンル問わず雑多に貪る)、欧米テレビドラマ(シットコム)が好き。時々バンド活動。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。