PhotoshopからSVGを書き出す方法

PhotoshopからSVGを書き出そうとして、

• SVGが選べない、書き出せない
• 書き出したのに中身がPNGだった
• CSSで色が変えられない

と困ったことはありませんか？

実はPhotoshopでは、すべてのレイヤーをSVGとして書き出せるわけではありません。

SVGとして正しく書き出せるのは、基本的にベクターデータ（シェイプレイヤーなど）のみです。ラスター画像をそのままSVGで保存すると、PNG画像がSVGの中に埋め込まれただけのデータになってしまいます。

この記事では、

• PhotoshopからSVGを書き出す方法
• SVGを書き出せない原因

までまとめて解説します。

はじめにSVGで書き出せるかどうかを見分ける

まずはじめに、該当レイヤーがSVGで書き出せるかどうかのチェックをします。

Photoshopは画像編集ソフトのため、レイヤーによってはSVGで書き出せない場合があります。

確認方法は下記の通りです。

１）シェイプレイヤー（SVG書き出しOK）

レイヤーに下記のようなアイコンがついていればシェイプのため、SVGで書き出しが可能です。

書き出し方法はこちら → SVGの書き出し方法１：シェイプレイヤーからの書き出し

レイヤーを選択したときに、オプションバーが「塗り／線／シェイプ」の表示になるかどうかでも判断できます。

２）埋め込みスマートオブジェクト（場合によってOK）

画像として配置されているだけ（スマートオブジェクト形式）の場合、中身が、「SVG形式」「イラストレーター（ai）形式」「EPS形式」などのベクターデータならSVG化できます。

書き出し方法はこちら → SVGの書き出し方法２：埋め込みスマートオブジェクトからSVG化する

ただし、Photoshop内で直接変換されるわけではなく、一度元データを書き出し、その後SVGに変換する必要があります。

加工に手間がかかるので、元データ（ai / svg / eps）がある場合は、元データを使う方が早いです。

３）ラスターレイヤー（SVG不可）

写真やPNG、JPEG、ブラシで描いたイラストなど、下記のようにレイヤーに何のマークもない場合はSVGはできません。

SVGで保存できても、中身はPNG画像が埋め込まれただけになります。

SVGの書き出し方法１：シェイプレイヤーからの書き出し

PhotoshopでSVGを書き出す方法は、主に3つあります。

方法１：「SVGコピー」の方法（おすすめ！）

最も簡単でおすすめなのが「SVGコピー」です。

レイヤーを右クリック → 「SVGコピー」をクリックして、SVGデータをコピーします。

テキストを開いて、コピーしたデータをテキストティタに貼り付けます。

ファイル名に「.svg」の拡張子をつけて保存します。

シェイプレイヤーであれば、この方法が一番手軽です。

方法２：画像アセットで自動書き出し

同じアイコンを何度も修正する場合は、画像アセットが便利です。

レイヤー名を「任意の名前.svg」のように変更します。

「ファイル」 →「自動処理」→「ジェネレータープラグイン」→「画像アセット」をONにします。

以降は保存するたびに、アセットフォルダ内にSVGが自動生成されます。

方法３：「書き出し形式」から書き出し

以前からある「書き出し形式」でもSVGを書き出せます。

最新のPhotoshopではデフォルトでは非表示になっているため、まず環境を整えます。

「ファイル」 →「書き出し」→「書き出しの環境設定」に進みます。

「従来の「書き出し形式」を使用」にチェックを入れて、「OK」を押して設定を保存し、有効化します。
（この設定は1回すれば次回以降はしなくてもOKです）

その後、

「ファイル」 →「書き出し」→「書き出し形式」に進みます。

ファイル設定の形式から、「SVG」を選択して「書き出し」をクリックすれば、SVGデータが書き出されます。

SVGの書き出し方法２：埋め込みスマートオブジェクトからSVG化する

スマートオブジェクトは、埋め込み元のデータにより内容が変わります。ここでは、SVG形式と、イラストレーターおよびeps形式の場合の書き出し方法をご紹介します。

基本の書き出し方

「スマートオブジェクト」のレイヤーを右クリック → 「コンテンツを書き出し」を選択します。

保存のダイアログが出てきます。

スマートオブジェクトは配置した元ファイルのデータをそのまま抱えているので、「コンテンツを書き出し」したときに出てくる拡張子＝埋め込まれてる元データの形式となります。

なので、その保存形式で一旦データを保存します。

SVG形式の場合は、そのまま保存すればSVGとして利用できます。
（ただし、保存後に中身が本当にベクターデータかどうかは確認しておきましょう）

ai形式、eps形式の場合（要 Illustratorアプリ）

埋め込まれているデータがイラストレーター（ai）形式またはeps形式の場合は、書き出し後、Illustrator でSVGに変換して利用します。

「基本の書き出し方」でデータを書き出します。（埋め込まれた形式の拡張子で保存してください）

書き出したデータを Illustrator で開き、「ファイル」→「書き出し」→「書き出し形式」に進みます。

保存形式で「SVG」を選択して、保存すれば完了です。

SVGデータのよくあるトラブル

SVGファイルに書き出して実装しても思った通りの挙動にならないときは、意図したデータでないSVGの場合があります。

症状	原因	対処
SVGをコピー、SVG書き出しが選べない	シェイプレイヤーではない	レイヤーの種類を確認する
SVGで書き出したのにサイズが重い	PNGが埋め込まれている	シェイプレイヤーから書き出す
拡大するとボケる	ラスターデータ	ベクターデータ、シェイプを使用する
CSSで色が変えられない	fill属性が固定されている	必要に応じてcurrentColorへ変更する
複数配置すると別SVGの表示が崩れる	idが重複している	SVG内のidを削除、またはユニーク化
フォントが違う形で出る	テキストのまま書き出した	シェイプ化してから書き出す
影や線が消える	レイヤー効果はSVG非対応	CSSなどで再現する

まとめ

PhotoshopからのSVG書き出しで迷わないためのポイントを復習しましょう。

• 書き出す前にレイヤー種別をチェック！
  （写真などのラスターレイヤーはSVG化できません。シェイプやベクター形式のスマートオブジェクトであることを確認しましょう）
• シェイプレイヤーなら「SVGコピー」が一番手軽でおすすめ！
• 何度も修正・書き出しするなら「画像アセット」機能が便利
• スマートオブジェクト（ai/eps）は一度書き出してIllustratorでSVG化する

Photoshopは画像編集ソフトだからこそ、「何がベクターデータなのか」を理解して正しく書き出し方法を選ぶことが大切です。

また、クライアントワークではロゴやアイコンの元データ（AI・EPS・SVG）があるなら、Photoshop経由ではなく元データを使う方が安全です。

データの変換によるトラブルを避けられるだけでなく、より軽量で扱いやすいSVGをそのまま利用できます。

ぜひ今回の手順を参考に、手元のデータに合わせた最適な方法でSVGを使ってくださいね！