簡単！Photoshopで画像をSVGファイル形式で書き出す方法
Photoshopで作業をした後に画像として書き出す方法は、JPEG、PNGなどいくつかありますが、今回はその中でもSVGという形式で書き出す方法について説明します。SVGとは、ベクター形式の画像のことです。Photoshopはもちろん、Illustratorでも使用できます。ベクター形式はJPEGやPNGなどのビットマップデータと違い、数値で記録されていることから、拡大・縮小しても画質が落ちないのが大きなメリットです。WEBデザインでは特に重宝する形式です。
また、数値で描くデータは軽いのも特徴です。ファイルが軽いと作業をするスピードも速くなりますし、大きな画像を載せてもWEBサイトの表示が遅くなりません。表示が早いことはSEO的にも良いことですので、どんどん利用していきたいところです。
Photoshopで画像をSVG形式で書き出す方法
1、「書き出し」から書き出す方法
Photoshopの上部メニューを開き、書き出し→「書き出し形式…」を選択します。
書き出し形式を設定するパネルが出てきますので、ファイル設定の部分で形式を「SVG」に変更します。「書き出し」ボタンをクリックすると、SVG形式で画像を書き出すことができます。
※Photoshop2022からは、「書き出し形式…」から書き出すときに、そのままの状態ですとSVG形式が選択できなくなっています。（この方式が廃止されたため）
この方法で書き出すときは環境設定から「書き出し」を選択し、パネル下部のオプション「従来の書き出し形式を使用」にチェックを入れてください。そうすると、「書き出し形式…」からSVGファイルの書き出しができるようになります。
2、「画像アセット」から書き出す方法
メニューバーのファイルから「生成」→「画像アセット」を選択します。「画像アセット」にチェックが入った状態になりましたので、この状態で書き出したいレイヤーの名前を「○○.svg」に変更します。
そしてこの状態でPhotoshopファイルを保存すると、「.psd」ファイルと同じ階層にアセットフォルダが生成され、その中にSVGファイルが保存されます。
3、コピー＆ペーストで貼り付けする方法
画像ファイルをいちいち保存せずに、そのままHTMLに貼り付けたい時などに便利な方法です。まず書き出したいレイヤーパネルを右クリックします。右クリックメニュー中に「SVGをコピー」という項目が出てきますので、それをクリックします。すると、ソースがコピーされた状態になっていますから、HTMLやテキストエディタにペーストして使います。
SVG形式で書き出すときの注意点
SVGで書き出そうと思ったらうまく書き出せない…そんなときは、画像をSVG形式で書き出す準備ができていない可能性があります。以下の項目をご確認ください。
レイヤーは結合しておく
複数のレイヤーで作業をしている場合で、まずSVG形式に書き出したい内容を1つのレイヤーに結合し、いったん保存してから書き出し操作を行ってください。
フォントはシェイプに変換しておく
作成したい画像データにフォントが含まれている場合には、形式を変えなくてはなりません。SVGはパスで書き出しますので、フォントはメニュー→書式から「シェイプに変換」でシェイプレイヤーに変換しておきます。
それから、「アセットに変換」または「コピー＆ペースト」でSVGファイルとして使います。なお、シェイプに変換した時点でその文字のフォントを編集、変更できなくなるので、注意しましょう。
SVG形式のメリット
SVG形式で保存をしておくと、画像を拡大・縮小しても画質が落ちないほか、後から色や形を変更することも簡単にできます。たとえばアイコンの制作などで、基本のアイコンを作ってからいくつも色のバリエーションを作りたい時などの便利です。
色を変える際にも、データの書き換えによって変更が可能です。テキストデータを保存しておけば、わざわざフォトショップを開かなくても、色や形の部分を書き換えるだけで変更ができるようになります。
SVG形式のデメリット
画質が落ちないというと、どのような画像でも適しているのかと思われがちですが、そうではありません。風景写真のような、たくさんの画素数で表現しているようなものはSVG形式に不向きです。SVGは、アイコンやピクトグラムなどのシンプルな画像に適した保存形式です。
TourBoxを使えば、ボタンを一回押すだけでSVGの書き出し操作を完成します！
TourBoxとは画像編集やグラフィックデザインなどクリエイティブ作業を効率化できる片手デバイスです。Photoshopを含むほぼ全てのクリエイティブソフトに対応でき、大量の操作を片手デバイスだけで完成でき、疲労軽減や速度向上に有効で、多くのデザイナーやカメラマン、イラストレーターに愛用されています。
TourBoxにはマクロ機能も搭載されています。本記事で紹介したPhotoshopマクロ機能を使用すれば、メニューを開き、特定の項目をクリック、形式選択などの操作を瞬時的に完成できます。本記事で紹介した画像をSVG形式に書き出す方法も、TourBoxのマクロに組み込めば、毎回手動で操作する必要がなく、指先でTourBoxのボタンを一回押して全部完成します。TourBox EliteとTourBox NEOに興味があればぜひ使ってみてください！
