Photoshopで作成したデザインをSVG形式で書き出したいけど、なかなか方法が見つからないという方へ。この記事では、「Photoshop（フォトショ） SVG 書き出し 方法」に関する疑問や問題を一つずつ解決し、**劣化を防ぎながらSVG形式で出力する手順**を丁寧に解説します。環境設定や注意点、最新の仕様変更にも触れているので、スムーズに書き出せるようになります。
目次
Photoshop（フォトショ） SVG 書き出し 方法 概要と最新仕様
まずは“Photoshop SVG 書き出し 方法”の基本と、最新版での仕様の変化を理解することが重要です。Photoshopは主にラスター画面編集を目的としたソフトですが、シェイプやテキストをベクター化すればSVGで出力することが可能になります。
ただし、バージョン22.5以降、SVG形式によるドキュメントの直接書き出しが正式にサポート対象外となっており、従来の“Export As”からSVGを選ぶオプションが消えたり隠されたりしているケースがあります。このため、**環境設定から“Use Legacy Export As”を有効にし、Photoshopを再起動する**ことでSVG形式が再び選べるようになります。最新情報によれば、この方法がWindows／mac双方で有効なことが確認されています。
バージョン22.5でのSVG廃止と影響
バージョン22.5のアップデートで、PhotoshopはSVG書き出しを実験的機能と見なしており、利用頻度や限界点を理由に“Export As”でドキュメント全体をSVG形式で出力することを正式に中止しました。この変更により、SVGが必要な場合は回避策や代替のアプリケーションの利用が推奨されていますが、環境設定によってSVGの書き出しを可能にする“レガシーエクスポート”モードが残されています。
“Use Legacy Export As”を使うメリットと注意点
この設定を有効化すると、かつてのSVG形式の選択肢が復活するだけでなく、高品質なテキスト変換・シェイプの保持などの機能が利用できます。一方で、一部の最新機能（例えば特定のAI機能やジェネレーティブな処理）との互換性が限定されることがあるので、自身のワークフローと目的に合わせて使い分ける必要があります。
SVG書き出しに向かないコンテンツの特徴
Photoshopにはラスター画像処理の要素が強いため、以下のようなコンテンツはSVGで書き出してもうまく機能しないことがあります。マスク、クリッピングマスク、レイヤースタイルのシャドウやグロー、写真やグラデーションフィルターなどはSVG形式で忠実に表現されないことがあります。こうした要素を避けるか、シェイプ化・ラスタライズして別形式にすることで問題を回避できます。
環境設定と準備：SVG書き出しを可能にするステップ
SVG書き出しをスムーズにするためには、Photoshopの設定を整えるとともに、書き出し対象となるレイヤーやテキストをベクター対応に準備することが重要です。この段階での準備が劣化を防ぐ鍵となります。
環境設定で“レガシー書き出し形式を使用”を有効にする
書き出しオプションにSVGが見当たらない場合、まず設定を確認しましょう。メニューから環境設定 → 書き出し（Export）に入り、“Use Legacy Export As”（レガシー“Export As”を使用）にチェックを入れます。その後Photoshopを再起動すると、SVG形式の選択肢が復活します。Windows／macの両方でこの方法が動作する例があります。
レイヤーをシェイプで構成する
SVGはベクター形式ですから、書き出し対象のレイヤーはシェイプレイヤー（ベクターパス）で構成してある必要があります。テキストレイヤーは“文字のアウトライン化”（シェイプ化）を行い、ラスターレイヤーはできる限り避けます。写真や筆のストロークといったラスター要素はベクター形式には変換されず、svgファイルに静止画像として埋め込まれるためサイズが大きくなったり、品質が劣化する原因となります。
フォントとパスの整備
フォントをそのまま残してsvgにすると、表示環境によってはフォントが異なる、またレンダリングが異なることがあります。これを避けるために、テキストレイヤーをシェイプに変換するか、パスとしてアウトライン化しておくと安心です。また、パスが閉じていなかったり重複していたりする場合、意図しない形状になることがあるので、パスの閉鎖やアンカーポイントの整理をしておくことが大切です。
色空間と透過の確認
SVGは主にウェブやベクター対応アプリで使用されるため、sRGBで作業するのが標準的です。カラー調整やモニタープロファイルの影響を受けるため、環境設定でカラー空間をsRGBに統一しておきましょう。さらに、背景を透明にするか、背景レイヤーを重複させたり透明グリッドを有効にしたりして、期待通りの透明度で書き出されるように確認します。
実際に書き出す手順：PhotoshopでSVGを生成する方法
環境設定と準備が整ったら、実際にSVGを書き出す手順を実践しましょう。ここでは、劣化を防ぎつつ正確に書き出すためのポイントを含めた手順を解説します。
ファイルを開く・レイヤーを選ぶ
まずPhotoshopでPSDファイルを開きます。SVG形式対応は主にシェイプレイヤー、シェイプレイヤーで構成されたグループに対して有効です。書き出したいシェイプやベクター要素を選びます。もし複数のアートボードやレイヤーグループがある場合、それぞれ個別に書き出したい要素を明確にしておくと後で整理しやすくなります。
環境設定が有効か再確認
上記で紹介した“Use Legacy Export As”が有効になっていることを確認します。これにより、“Export As”（以前の書き出し形式）からSVGを選べるようになります。もしこの設定が無効であると、SVGが選択肢に現れないか、書き出してみても期待と違う結果になることがあります。
書き出し：Export Asを使う
選んだレイヤーやアートボードがベクター対応であるなら、メニューで ファイル → 書き出し → Export As を選択します。形式（Format）のドロップダウンから“SVG”を選びます。品質やサイズ、透過設定などが選べる場合は最適なものを選びます。シェイプや文字のアウトライン化が済んでいれば、SVGの利点である拡大縮小による劣化が抑えられます。
書き出し：Quick Export as SVG の活用
頻繁にSVGを出力する場合は、Quick Export設定を用いてショートカットを割り当てると効率的です。環境設定 → 書き出し → Quick Export の設定でデフォルトの形式をSVGにし、出力先フォルダーなどを決めておきます。これでレイヤーを選んで右クリック → Quick Export as SVG、またはメニューから呼び出すだけで簡単にSVGが書き出せます。
書き出し：文字をシェイプにする操作
テキストレイヤーはそのままでは環境によってフォントが異なって見えることがあるため、フォントをアウトライン化してシェイプに変換する操作を行います。テキストレイヤーを選び、右クリックで“シェイプに変換”を選ぶことで形状データとして扱われます。これによりSVG書き出し時の文字の形や位置が固定され、予期しないフォント置換えや表示崩れを防ぎます。
劣化を防ぐためのチェックポイントとトラブルシューティング
SVG書き出しをしても、思った通りに品質が出ないことがあります。ここでは、**劣化を防ぐために確認すべきポイントと、よくあるトラブルへの対応方法**を紹介します。
パスの精度とアンカーポイントの整理
SVGではパス（Path）の精度が見た目を大きく左右します。アンカーポイントが不要に多かったり、重複していたりすると線がギザギザになったり形が崩れたりします。パスをきれいに整理し、不要なアンカーポイントを削除することで滑らかな仕上がりになります。特に丸や曲線部分では精度を意識してください。
フィル／ストロークのスタイルとグラデーションの扱い
フィルやストローク、グラデーションはSVGで再現できるものもありますが、Photoshopでのエフェクトやレイヤースタイルでの影響が強いものは期待通りに出力されないことがあります。例えばドロップシャドウやベベルなどのスタイルはラスタライズされるか、SVG外にラスタデータとして埋め込まれたりしてしまうことがあります。可能なら単純な形状のストロークとカラー、あるいはベクタースタイルで構成するように設計してください。
互換性：ビューア／ブラウザでの表示確認
SVGが正しく書き出されても、ブラウザやビューアによって表示が異なることがあります。特にテキストやフォント、パスの精度、透過性などが影響を受けやすい部分です。書き出したSVGを複数のブラウザ（Chrome、Safari、Edge等）で表示確認し、ズームや拡大縮小でも滑らかに見えるかをチェックしてください。
ファイルサイズの最適化
SVGはベクター形式のため、構造やパス数、重複要素によってファイルサイズが大きくなることがあります。パスを単純化したり、重複パスを統合したり、不要なメタデータや余分な命名を排除することでファイルサイズを抑えられます。また、フォントをアウトライン化することで外部フォント依存を減らし、表示の遅延を防げます。
MacのM1チップ環境での特別な注意点
AppleのM1チップを搭載したMac環境では、従来のExport Asが正常にSVGを選べなかったり、“Use Legacy Export As”のチェックボックスが見つからないケースがあります。この場合、Rosettaを使ってPhotoshopを起動することで、レガシーモードのオプションが表示されたり、SVG形式が復活することが報告されています。自身の環境に応じてRosettaモードや互換性モードを試してみてください。
他ツールとの比較：Illustratorや代替手段の活用
Photoshop単体ではSVGで期待通りの結果が出ないこともあるため、**Illustratorや他のベクター専用ツールと比べての強みと弱み**、また代替手段を状況に応じて使うことが実践的です。
Illustratorとの比較
IllustratorはSVGなどのベクター形式に特化しており、パスの管理、フィル・ストローク、グラデーション、ライブエフェクトなどベクター処理が豊富です。一方でPhotoshopはラスターベースであり、ベクター要素は限られるため、細かなパス操作や複雑な形状をSVGにするならIllustratorを使うと劣化を防げます。ただしIllustratorが手元にない環境では、Photoshopで準備を整えて最低限のベクター形式で書き出すことが妥当です。
オンラインツールやフリーソフトの代替案
SVG書き出し機能が制限されている場合、オンラインのベクターツールやフリーソフトを利用する手もあります。例えば、PSDファイルやベクターパスを読み込めるツールでSVGへ変換する、文字やシェイプのみをSVG形式で抽出して書き出すといった方法があります。目的に応じて使い分けることでPhotoshopだけでは実現しにくい表現も可能になります。
実際のワークフローでの応用例とケーススタディ
ここでは、実際のデザイン制作フローでPhotoshopを使ってSVGを書き出すケースを想定し、劣化を防ぎつつ効率よく作業するための手順を具体例で示します。
ロゴデザインの場合の手順
ロゴをPhotoshopで作成した場合、まずシェイプレイヤーで構築し、テキストはアウトライン化します。カラーはフラットな単色またはシンプルなグラデーションのみを使用します。背景は透明または白のベースを別レイヤーに分け、出力時に非表示にできるようにしておきます。Export As（Legacyモード）からSVG形式で書き出し、ブラウザで拡大縮小してシャープネスを確認した上で、必要に応じてパスやストロークを単純化します。
アイコンやUIパーツの場合の応用
アイコンやUIパーツは小さいサイズで使われることが多いため、パスの無駄を省き、シンプルな形状とストロークを優先します。影や外枠を持つ場合はシェイプで作るか別レイヤーで管理し、書き出し前に不要なレイヤースタイルを削除または統合します。Quick Exportの設定でSVGを既定の形式にしておくと、複数のアイコンを短時間で書き出せます。
テキスト主体のアートワークでの対策
テキストを主体とするデザインでは、文字のアウトライン化と文字サイズ・字間・行間などの調整がSVG表示時の見え方に大きく影響します。フォントを使う場合は特定のフォントが常に利用可能か、あるいはフォントを埋め込むかアウトライン化するかを選択します。アウトライン化すると編集性は失われますが、表示が崩れにくくなるメリットがあります。
まとめ
PhotoshopでSVGを書き出す方法は、一見複雑ですが、**環境設定でレガシー書き出し形式を有効にし、レイヤーやテキストをベクター形式で整備する**ことで、高品質なSVGを出力することが可能です。バージョン22.5以降に導入された仕様変更は無視できないため、今後もアップデートに注意しながら設定を確認することが重要です。
劣化を防ぐためには、パスの整理、フォントのアウトライン化、フィルやストロークの簡潔なデザイン、色空間の統一などがポイントとなります。Illustratorなどの専用ツールや代替ソフトと併用することも考えつつ、上記の手順を参考にしてSVG書き出しを成功させてください。
コメント