SVGは、図形や色を数値で管理するベクタ形式の画像フォーマットです。
SVG形式で書き出した画像は、作成後もテキストエディタ等で編集をすることができます。また、拡大縮小をしても画像が綺麗なので、Webサイトの見出しやアイコン、ロゴなど色数が少なく単純なグラフィックを作成する際におすすめの形式です。
今回はPhotoshopとIllustratorで作成した画像をSVG形式で書き出し・保存する方法をまとめました。
Photoshopで画像をSVG形式で書き出す方法
Photoshop（フォトショップ）で作成したアートワークをSVG形式で書き出す方法は3つあります。
【方法1】「書き出し形式」から保存をする
メニューバーの「ファイル」の中の「書き出し」から「書き出し形式」を選択します。a
書き出し形式パネルが開いたら、パネル内の左側からSVGファイルとして書き出すアートボードを選択。「ファイル設定」の形式をSVGに変更し、パネルの右下の「書き出し」をクリックして保存をします。
書き出し形式パネルは、別の方法でも開くことができます。
メニューバーの「ウィンドウ」の「レイヤー」を開き、レイヤーウィンドウの中からSVG形式で保存をしたいレイヤーを選択します。
選択したレイヤーの上で右クリック、または、レイヤーウィンドウの右上のボタン(横4本線)から「書き出し形式」を選択すると書き出し形式パネルが立ち上がります。
【方法2】「画像アセット」で生成する
まず、SVG形式で保存をしたいレイヤーまたはアートボードをダブルクリックし、名前の最後に「.svg」を付けます。
次に、メニューバーの「ファイル」の中の「生成」にある、「画像アセット」にチェックを入れます。
データを保存すると、Photoshopファイルを保存しているフォルダと同じ階層にアセットフォルダが自動的に作成され、その中にSVGファイルが保存をされます。
【方法3】SVGのソースを使って作成する
最初に、テキストエディタなどで空のSVGファイルを作成します。
Photoshopの編集画面に戻り、SVG形式で書き出すレイヤーの上で右クリックをし、「SVGをコピー」を選択するとSVGのソースがコピーされます。
最初に作成をした空のSVGファイルをテキストエディタ等で開き、SVGのソースコードをペーストし保存をすると、SVG形式の画像ファイルが作成されます。
Illustratorで画像をSVG形式で書き出す方法
Illustratorで作成したアートワークをSVG形式で保存する方法は4つあります。
【方法1】Illustratorファイルを保存する際にSVG形式で保存する
Illustratorでアートワークを作成し、新規ファイルの場合はメニューバーの「ファイル」の中の「保存」を選択します。ファイルを複製する場合は、「別名で保存」または「複製を保存」を選択します。
保存パネルのファイル形式を「SVG(svg)」に変更し、右下にある「保存」をクリックします。
同一ファイルの中に複数のアートボードがあり、それぞれをSVG形式の画像として書き出したい場合は、「アートボードごとに作成」にチェックをしてから保存をします。
【方法2】「アセットの書き出し」からSVGファイルを生成する
メニューバーの「ウィンドウ」の中にある「アセットの書き出し」を選択し、アセットの書き出しウィンドウを開きます。
SVG形式で書き出したいアートワークを選択し、パネルにドラッグ＆ドロップまたはパネル内の追加ボタンを押すことで、アセットとして登録されます。
次に、書き出し設定の形式をSVGに変更し、パネルの右下にある「書き出し」ボタンをクリックし、保存先を選択するとSVG形式で画像が保存されます。
「アセットの書き出し」を使用すると、アートワークの編集作業をしながら、随時SVG形式の素材を書き出し・保存することが可能になるのでおすすめです。
【方法3】「スクリーン用に書き出し」で書き出す
メニューバーの「ファイル」の中の「書き出し」にある「スクリーン用に書き出し」を選択し、スクリーン用に書き出しパネルを開きます。
アートボードごとを1つのSVGファイルとして保存する場合は「アートボード」タブを、アセットごとにSVGファイルとして保存する場合は「アセット」タブを選択します。
書き出し先でSVGファイルの保存先を選択し、フォーマットの形式をSVGに変更し、パネルの右下の「アートボードを書き出し」(アセットの場合は「アセットを書き出し」)をクリックするとSVG形式の画像データが書き出されます。
書き出すアートワークを選択した状態でメニューバーの「ファイル」から「選択範囲を書き出し」をクリックしても「スクリーン用に書き出し」パネルが表示されます。
【方法4】「書き出し形式」から保存する
メニューバーの「ファイル」の中の「書き出し形式」を選択します。
保存先を選択後、ファイル形式を「SVG(svg)」に変更し、保存をするとSVG形式でファイルが書き出されます。
しかし、上記の方法だとファイルの内容全体が1つのSVGファイルとして保存がされてしまいます。なので、ファイル内に複数のアートボードがあり、各アートボードごとにSVGファイルを作成したい時は、「アートボードごとに作成」にチェックを入れましょう。
画像をSVG形式で書き出す注意点は？
【注意点】テキストは図形化しないとエラーが発生する
テキストが含まれたアートワークをSVG形式で保存し、環境が異なる別のデバイスで見た時に、テキストが正しく表示がされない場合があります。
通常、PCやスマートフォンでテキストを表示する際、すでにデバイスにインストールをされているフォントがあてられます。
異なる環境でもテキストを正確に表示するためには、SVG形式で画像を書き出す前に、PhotoshopとIllustratorでテキストレイヤーを別の形に変換する必要があります。
【解決方法1】Photoshopでテキストレイヤーからシェイプレイヤーに変換する
PhotoshopでテキストをSVG形式で保存をする際には、書き出す前にテキストレイヤーからシェイプレイヤーに変換をする必要があります。
アートワークに含まれるテキストレイヤーを選択し、レイヤーパネル上で右クリックし「シェイプに変換」を実行すると、テキストレイヤーシェイプレイヤーに変更されます。
上記の作業を行なった上で、SVG形式でアートワークを保存すると、デバイス環境が異なってもテキストはデザイン通り正しく表示がされます。
【解決方法2】Illustratorでテキストをアウトライン化する
Illustratorでテキストをが含まれたアートワークをSVG形式で書き出す前には、必ずテキストをアウトライン化します。
アウトライン化をするテキストを選択して右クリックから「アウトラインを作成」、またはメニューバーの「書体」の中の「アウトラインを作成」を選択します。
アウトライン化をすることで、テキストはパスで作成された図形に変換され、同じフォントが入っていない環境でもデザインを再現することができます。
これでPhotoshop・IllustatorでSVG形式の書き出しは完璧！
作成したアートワークをSVG形式で書き出すことで、Webサイトなどの制作物が高品質になり、PhotoshopやIllustratorの操作に慣れていないエンジニアの方でもテキストエディタでファイルの調整が可能になります。
是非今回ご紹介した方法でSVG形式のファイルの作成を実践してみてください。