PSDからSVGへ、レイヤーは残せる？保持できる内容を解説
PSDにはシェイプレイヤー、ライブ文字、マスク、ピクセルが入りますが、SVGですべては保持できません。書き出す、統合する、トレースする部分の選び方を解説します。
目次
Photoshopのすべてのレイヤーを、同等のSVGレイヤーに変換することはできません。PSDにはシェイプレイヤー、ライブ文字、マスク、効果、スマートオブジェクト、通常のピクセルを混在できます。SVGはパス、文字、グループ、画像を表現できますが、Photoshopの文書モデルにそのまま対応しません。最も安全なのは、既存のベクターをネイティブな書き出しで保ち、再利用できるベクター元データのないラスター作品だけをトレースする方法です。
選択の要点
- PSDに整ったシェイプのパスがすでにあるなら、保つかベクターエディターへ移します。
- 受け取り先にフォントがあり、SVG文字を確実に扱える場合だけ文字を編集可能なまま残します。それ以外は納品用コピーをアウトライン化します。
- マスク、効果、スマートオブジェクト、ピクセルレイヤーは、移植できるレイヤー構造ではなく見た目として扱います。
- レイヤーを統合した作品を編集可能な図形にするだけなら、保存済みの合成画像を確認してトレースします。
- 最終SVGを開き、オブジェクトを調べます。
.svgの拡張子はレイヤーが残ったことや、ピクセルがパスになったことを証明しません。
PSDのレイヤーはSVGのレイヤーではない
PhotoshopのLayersパネルは文書の編集方法を表します。SVGはレンダラーが描くものを記述します。役割が異なります。
| PSDの内容 | 適した方法 | SVGで期待できること |
|---|---|---|
| シェイプレイヤーやPhotoshopパス | ネイティブに保持・移動する | 書き出しがベクター形状を保てば編集可能なパス |
| ライブ文字 | そのまま残すかコピーをアウトライン化 | 編集にはフォントが必要。アウトラインは見た目を保つが文字編集を失う |
| ピクセルレイヤー | ベクター図形が役立つ場合だけトレース | 見えるピクセルを近似する新しいパス |
| レイヤーマスクやクリッピングマスク | 意図して再構成・統合する | 切り抜いた見た目は残っても、Photoshopの編集設定は残らない |
| スマートオブジェクト | まず元データを開く | 配置結果だけでは描画済みピクセルしか見えない場合がある |
| レイヤー効果、質感、柔らかな影 | ラスターを保つか単純化 | 滑らかな効果はピクセルや大量の図形になりやすい |
Adobeの現在の画像アセット生成手順は、名前を付けたレイヤーやグループからSVG素材を作れます。同じ説明には、グループ内に図形やライブ文字があっても、レイヤーグループの素材は統合されるとあります。SVGを選ぶだけでは、Photoshopの階層が同等のSVG階層になるわけではありません。
変換前にファイルの内容を調べる
変更前にPSDを複製します。その後Layers、Paths、Properties、Smart Objectsのパネルを調べます。
- ピクセルレイヤーを非表示にする。 使える作品が残るなら、保持すべきベクター図形があるかもしれません。
- 各文字レイヤーを選ぶ。 アウトライン化や移動の前に、フォントファミリーとウェイトを記録します。
- スマートオブジェクトを開く。 リンクされたIllustratorなどのベクター元データは、描画済みプレビューのトレースより優れています。
- マスクと効果を切り替える。 編集可能な構成が重要か、最終的な外観だけでよいかを決めます。
- 保存済み合成画像を確認する。 別のコンピューターで違って開くなら、統合画像を使う前に確認済みコピーを再保存します。
Adobeは選択レイヤーを別ファイルへ書き出す方法も説明しています。個別出力で素材間の境界を保てる場合がありますが、元のPSDのレイヤー構成と同じ動作をするSVGを1つ作るわけではありません。
方法1：ベクター内容を保つ
シェイプレイヤー、ペンのパス、単純なライブ文字、元のベクターが残るスマートオブジェクトには、この方法を使います。
意味のある素材を1つずつ移動・出力し、Illustrator、InkscapeなどのSVGエディターで開きます。長方形画像1枚ではなくパスとグループがあるか確認します。文字の編集が必要なら、Photoshop文書のない別のコンピューターで開き、意図したフォントが読み込まれるか確認します。ロゴや製作用ファイルでは、ライブ文字のマスターと、アウトライン化した納品コピーを残します。
よいベクター元データを、トレースのためだけにレイヤーを統合しないでください。トレースは描画された外観を描き直すため、ノードが増え、曲線が変わり、文字が近似輪郭になる場合があります。元の形状がよりきれいな出発点です。
方法2：見える作品を統合してトレースする
必要なデザインがピクセルだけにある、またはPSDの保存済み外観が最善の残存データなら、トレースを使います。フラットなロゴ、バッジ、アイコン、文字、明確な色境界のあるイラストは通常向いています。写真、微妙なグラデーション、ブラシの質感、柔らかな影は通常向きません。
トレース前に次を行います。
- ベクターに含めないものを非表示にします。
- 納品に必要な背景を設定するか、背景を透明にします。
- 意図した出力サイズで、小さな文字の内部、穴、細い文字を確認します。
- PSDに信頼できる統合表示がなければ、互換コピーを保存するか高品質PNGを書き出します。
- 元PSDを残します。トレースは新しい納品素材であり、文書の代替ではありません。
SVG 2の埋め込みコンテンツモデルでは、SVGにラスター画像を含められます。そのため形式だけの変換ツールは、統合PSDのピクセルをトレースせずSVGへ置く場合があります。拡大とオブジェクト種類の確認で、この見せかけのベクターを見つけます。
PerfectVectorを使った場合
PerfectVectorは、対応PSDやPSBを保存済みの統合互換画像から開きます。ブラウザーが見える画像をローカルで準備し、ベクター化前に確認を求めます。元のPhotoshop文書はアップロードせず、レイヤー、マスク、ライブ文字、効果、パス、アートボード、スマートオブジェクトを復元するとも主張しません。PhotoshopからSVGへの手順は、準備したピクセルをSVGパスへ再構成します。
つまり、レイヤー保持ではなくトレースの方法です。保存済み合成画像が正しい外観で、元のPhotoshop構成より編集可能なパスが役立つ場合に使います。変換後はシルエット、色領域、文字形状、抜き部分、ノード構造を調べます。整ったベクター元データがPSD内にあるなら、直接移してください。
SVGに何が残ったか確認する
最初のプレビューだけで判断せず、ダウンロードしたSVGをベクターエディターで開き直します。
- 色領域を1つ選びます。画像長方形の一部ではなくパスや図形として動くべきです。
- レイヤーやオブジェクトのパネルを開きます。PSDのレイヤー名を期待せず、扱いやすいグループ構造を探します。
- 曲線や文字の穴を拡大し、平らになった箇所、意図しない閉鎖、ノイズのある縁を調べます。
- 塗り色を1つ変えます。本物のパスは隣の領域を変えずに色変更できます。
- ピクセルが見える部分があれば、ソースの
<image>要素を検索します。 - 実際の受け取り先へ読み込み、そこでサイズ、フォント、マスク、効果を確認します。
すべてが1オブジェクトとして動くなら、破壊的なパス操作の前にSVGのグループ解除診断を使います。グループではなく、複合パスや埋め込み画像かもしれません。
PSDをPSDのまま保つべき場合
編集可能な文字、調整レイヤー、マスク、スマートオブジェクト、アートボード、写真の質感、効果がまだ必要なら、Photoshopをマスターにします。SVGは拡大縮小可能な図形の納品に優れますが、Photoshop文書の代わりではありません。
編集用PSDと製作用SVGの2ファイルになっても構いません。適切な受け渡しです。それぞれが異なる種類の編集可能性を保ちます。
よくある質問
すべてのレイヤーを保ってPSDをSVGへ変換できますか？ 確実にはできません。図形や文字の一部は移せますが、マスク、効果、スマートオブジェクト、調整レイヤー、レイヤー名、ピクセルレイヤーには一対一の対応がありません。まず元ベクターを保ち、残りは描画済み外観として扱います。
PSDからSVGへの結果が1レイヤーだけなのはなぜですか？ 統合合成画像を使ったか、ラスター1枚を埋め込んだ可能性があります。1つのSVGオブジェクトは複合パスやグループの場合もあるため、ラスターと判断する前に種類を確認します。
PhotoshopでSVG保存するとピクセルがベクター化されますか？ いいえ。SVGはラスターを含められます。形式の書き出しは、トレースせずピクセルをSVGの容器へ置く場合があります。パスとして選択でき、オブジェクト単位で編集可能か確認します。
PhotoshopからSVGを書き出す前に文字をアウトライン化すべきですか？ 外観を固定し、文字編集が不要なら納品コピーをアウトライン化します。文言や翻訳が変わる可能性があればライブ文字のマスターを残します。アウトライン化はフォント編集を保持せず、文字をパスへ変えます。
PerfectVectorはPSDからPhotoshopのレイヤーを復元できますか？ いいえ。対応ファイルの保存済み統合互換画像を使い、見える画像をパスへトレースします。元のレイヤー構成やライブ文書機能は復元しません。
参考資料
- Adobe — レイヤーから画像アセットを作る — SVG生成とレイヤーグループ素材の統合を説明しています。
- Adobe — レイヤーをファイルとして書き出す — 現在のレイヤーごとの出力動作です。
- Adobe — Photoshopで図形とパスを描く — シェイプ、ペン、パスのツールを定義しています。
- W3C — SVGの埋め込みコンテンツ — SVGにラスター画像データが残る理由を説明しています。
- PerfectVector — PhotoshopからSVGへ — 対応する保存済み合成画像の手順と、レイヤー復元の制限です。
保存済み合成画像が必要な元データなら、PhotoshopからSVGへの変換ツールで確認し、ベクター化します。その後SVGを開き直し、重要な領域がパスであることを確かめてください。
