Photoshopで透明背景のPNGをSVGに変換する方法｜IllustratorとFireflyとの連携

PNG・SVGの違いと変換が必要なシーン

PNGとSVGは、デジタルデザインで多用される2種類の画像フォーマットですが、その性質はまったく異なります。PNG（Portable Network Graphics）はピクセル（画素）で構成されるラスター形式で、写真やグラデーションに適しています。透明背景を扱えるため、WebデザインやUI素材として広く使われています。一方SVG（Scalable Vector Graphics）はベクター形式で、数学的な曲線と座標で図形を定義するため、どんなサイズに拡大・縮小しても画質が劣化しません。ロゴ・アイコン・イラストなど、サイズが変わるシーンで使われるSVGは特にWeb制作・アプリ開発で重宝されます。PhotoshopのPNGファイルをSVGに変換したい主な理由は、ロゴやアイコンをレスポンシブ対応させたい場合、印刷・カッティングプロッター用のベクターデータが必要な場合、CSSやJavaScriptでアニメーションを付けたい場合などが挙げられます。Photoshop単独でのPNG→SVG変換は限定的なため、Adobe Illustratorとの連携が最も有効な方法です。Adobe Illustrator公式ページで最新機能をご確認ください。

Photoshopで透明背景PNGを正確に準備する手順

SVG変換の品質は元のPNGファイルの精度に大きく依存します。まずPhotoshopで素材を高品質に仕上げてから変換する準備を整えます。透明背景のPNGを準備する際は、まず「背景」レイヤーが存在しないことを確認します。レイヤーパネルに「背景」レイヤーがある場合はダブルクリックして通常レイヤーに変換します。次に「選択とマスク」または「オブジェクト選択ツール」を使って対象オブジェクトを精密に切り抜きます。毛髪・透明素材・グラデーションエッジなど複雑な境界には「選択とマスク」のAI機能（エッジを詳細化）が特に有効です。切り抜きが完了したら、背景が透明のまま「ファイル」→「書き出し」→「PNG として書き出し」で保存します。SVGへの変換精度を上げるため、元のPNGはできるだけ高解像度（1000px以上）で作成することを推奨します。また、SVGに変換するオブジェクトはシンプルな形状やフラットなイラストほど変換精度が高く、写真的なグラデーションや複雑なテクスチャは変換後のベクター化精度が下がります。

Illustratorの「画像トレース」でPNGをSVGに変換する

Adobe IllustratorはPhotoshopで作成したPNGをSVGに変換する最も正確な方法です。IllustratorでPNGファイルを開くか、配置（リンクまたは埋め込み）します。画像を選択した状態で上部メニューの「オブジェクト」→「画像トレース」→「作成」を選択するか、コントロールパネルの「画像トレース」ボタンをクリックします。画像トレースパネル（ウィンドウ→画像トレース）でプリセットを選択できます。ロゴやアイコン向けには「16色」や「スケッチ」プリセットが適しており、シルエット変換には「シルエット」プリセットが便利です。「カラー」設定で変換後の色数を調整でき、少ない色数ほど滑らかなベクターになります。プレビューチェックボックスで変換結果をリアルタイムに確認しながら「パスのフィット」「ノイズ」「コーナー」パラメーターを微調整します。結果が満足いくものになったら「拡張」ボタンをクリックしてトレース結果をパスに変換します。最後に「ファイル」→「別名で保存」でSVG形式を選択して保存します。SVGの用途（Web・印刷・アニメーション）に応じてSVG保存オプションを設定してください。

Adobe Fireflyを活用したベクター生成の可能性

Adobe Fireflyの最新機能では、テキストプロンプトから直接SVG形式のベクターグラフィックを生成する機能が提供されています。従来のラスター画像生成と異なり、生成されるデータがそのままスケーラブルなベクター形式となるため、サイズ変更に強いアイコン・イラスト素材を直接生成できます。Illustratorに統合されたFirefly機能では「ベクターを生成」コマンドを使って、テキスト説明から高品質なベクターアートを作成可能です。また、PhotoshopのFireflyジェネレーティブフィルで生成した画像をIllustratorの画像トレースと組み合わせることで、AIが生成した素材をSVGに変換するワークフローも実現できます。Firefly Vector（Web版）では「テキストでベクター生成」機能が利用でき、シンプルなアイコンや幾何学的なデザインの素材を短時間で作成して、そのままSVGとしてダウンロードできます。Adobe Creative Cloudを契約していれば、これらの機能はすべて追加料金なしで利用可能です。関連情報としてPhotoshopで印刷用・Web用の最適カラーモード設定をする方法もご参照ください。

変換精度を上げるためのPhotoshop側の事前準備

PNGからSVGへの変換精度を最大化するには、Photoshop側での準備が重要です。まず、変換対象のオブジェクトが鮮明なエッジを持つよう、背景との境界を精密に処理します。アンチエイリアスが強すぎると変換後のパスが複雑になりすぎるため、エッジをできるだけシャープに保ちます。カラー数を減らすことも変換品質向上に有効で、「ウィンドウ」→「情報」でカラーを確認し、不要な中間色をなくしてフラットなカラーデザインに近づけます。フォトショップのシェイプレイヤーやベクターマスクを使用している場合は、Illustratorに直接PSD形式で持ち込むとベクターデータが保持されます。Adobe Creative Cloud Libraries経由でPhotoshopのシェイプをIllustratorに共有する方法も効率的です。なお、変換後のSVGはHTMLタグ内に直接埋め込むことができ、CSSで色変更・アニメーション追加が容易になります。Webデベロッパーと連携するプロジェクトでは、SVG形式での素材納品を標準とすることをおすすめします。

PNG→SVG変換方法の比較表

PhotoshopとIllustrator・Adobe Fireflyを組み合わせることで、PNG→SVG変換のワークフローは驚くほど効率化されます。Adobe Creative Cloudであればこれら全ツールが1つのサブスクリプションで利用可能です。Creative Cloudの詳細はこちらからご確認ください。