Photoshopで制作したロゴやアイコンなどをWebや印刷用に高品質なベクター形式で保存したいとき、SVGが欠かせません。ですがバージョンによって「SVG形式が見当たらない」「書き出しがうまくいかない」などの声もよく聞かれます。本記事では、PhotoshopでSVGを正しく書き出す方法と注意点を詳しく解説します。初心者から上級者まで、「Photoshop SVG 書き出し 方法」に関して完全網羅で理解できる内容です。
目次
Photoshop SVG 書き出し 方法 の基本とは
PhotoshopでSVG書き出しを行うためには、まずSVG形式の特徴と、Photoshopがどのように扱っているかを理解することが重要です。SVGは拡大縮小しても画質が劣化しないベクター形式です。ロゴやアイコン、文字など、アンチエイリアスが不要なグラフィックに向いています。Photoshopはラスターベースソフトなので、ビットマップ画素とベクターパスを混在させて扱います。そのため、書き出し対象が純粋なベクターで構成されていることが綺麗なSVGを得る鍵になります。
またPhotoshopのバージョンによっては、SVG書き出しのサポート状況が異なっており、オプションが見当たらないケースが増えています。これは機能の実験的要素が強かったSVG書き出しが、あるバージョン以降非推奨扱いになったためです。具体的にはバージョン22.5以降、標準の「Export As」ダイアログでSVGがデフォルトで表示されないことがあります。
SVG形式の特徴とメリット
SVG（Scalable Vector Graphics）はベクター形式なので、どれだけ拡大しても輪郭が滑らかなままです。ピクセルが見えることがなく、ロゴやアイコンなど細かい線が含まれるデザインに最適です。さらに、ファイルサイズが比較的小さく、Webでの読み込み速度やレスポンシブ対応に優れます。バックグラウンド透過やCSSでの色変更も可能で、柔軟な運用ができます。
PhotoshopでSVG書き出しが難しい理由
Photoshopはラスタ処理が主体であるため、フィルターやラスター効果、ドロップシャドウなどのスタイルが含まれていると、それらがSVGに適応できないことがあります。さらに、バージョン22.5で「Export As」のSVGオプションが標準で非表示になっているため、環境設定から旧来の書き出し方式（Legacy Export As）を有効にしないとSVG形式を選べない場合があります。
SVG書き出しで使われる主なベクターレイヤーの種類
SVGとして美しく書き出すためには、「シェイプツールで作成されたシェイプレイヤー」「パスを用いた図形」「アウトライン化されたテキスト」など、ラスタ （ピクセル）処理されない要素が必要です。スマートオブジェクトや配置されたラスタ画像、レイヤースタイルが適用された図形は、書き出し時にラスタライズされることがあり、思った通りに出力されないことがあります。
具体的な書き出し手順とPhotoshopでの設定
SVGファイルを書き出す際には、環境設定とレイヤー構成を整えることから始めます。まず、書き出したい要素がすべてベクターであることを確認し、テキストはシェイプに変換してください。次に「エクスポート設定」で旧来の書き出し形式が使えるようにチェックを入れます。これにより「Export As」ダイアログでSVGオプションが復活します。
書き出し時にはファイル形式、カラースペース、背景の透明性などを設定可能です。特にWeb用途ではsRGBカラー空間を使用し、背景は透明か白か選びます。また、ファイル名と保存先を明確に設定し、書き出しサイズやスケールが正しいか確認してください。
環境設定で「Use Legacy Export As」を有効にする方法
まず「編集」メニューから「環境設定」＞「書き出し」の順に開きます。その中にある「旧来の Export As を使用」（Use Legacy Export As）というオプションにチェックを入れます。設定を適用した後、一旦Photoshopを再起動することで、SVGが選べるようになることが多いです。
書き出す前の準備：レイヤーとテキストの整理
書き出したいオブジェクトが複数のレイヤーに分かれている場合、それを1つのシェイプレイヤーに統合しておくとトラブルが少なくなります。テキストはフォント依存を避けるために「シェイプに変換」しておくことが推奨されます。また、マスクやクリッピングマスクなどの効果はベクターマスクで代替するか、影響が出にくい形に調整してください。
書き出し操作のステップ：SVGとして保存する流れ
上部メニューから「ファイル」＞「書き出し」＞「書き出し形式（Export As）」を選びます。形式をSVGに設定し、必要に応じて背景色、透明度、アートボードサイズなどを指定します。設定を確認後、「書き出し」ボタンで保存先を選んで出力します。SVGファイルが生成されたら、テキストや図形が正しくベクターとして維持されているかを確認してください。
最新バージョンでのトラブルと回避策
Photoshopのバージョン更新に伴い、SVG書き出し機能がデフォルトで非表示になっていたり、サポートされていなかったりするケースが増えています。特にバージョン22.5以降では、Export As に SVG が見当たらないことがあります。そのため、環境設定から旧形式を利用可能にすることが一般的な回避策となっています。
また、スマートオブジェクトやラスターエフェクトが含まれているレイヤーではSVG書き出し時にラスタライズされるなど望ましくない結果になることがあります。背景なしで透明な背景を欲しい時や、アイコン素材として利用する場合には特に注意が必要です。
SVGオプションが表示されないときのチェックポイント
まずソフトのバージョンを確認してください。バージョン22.5より新しいものか、それ以前かで設定項目が異なります。その後「環境設定」＞「書き出し」から「Use Legacy Export As」を有効にしているかを確認します。これを有効にしないとSVGが選べないことがあります。
ラスター処理された要素がもたらす問題
ドロップシャドウ・フィルター・画像素材などが含まれると、SVG形式ではベクターとして扱われずラスター化されてしまい、拡大したときにぼやけたりエッジが潰れたりします。こうした要素は書き出し前に可能な限り除去するか、別のベクターツールで再現することが望ましいです。
透明背景やアートボードの扱い方
SVGを書き出す際、背景レイヤーを透明にするか色を指定するか選べます。背景が透明だとどんな背景でも自然に重なります。またアートボードを使っている場合、それぞれを個別のSVGに出力するか統合出力するかの設定も可能です。アートボードのサイズ・余白も書き出し結果に影響しますので事前に整えておきます。
Photoshop と他ツールとのベクター書き出し比較
Photoshopはラスタとベクターの混合処理が特徴ですが、Illustratorなどベクターツールと比べるとSVG書き出しの自由度が制限される部分があります。他ツールとの違いを把握することで、用途に応じて使い分けが可能です。
例えばアイコンやロゴを制作するならIllustratorや類似のソフトで初めからベクター作業を行った方が結果が綺麗になります。Photoshopは写真や画像編集に強みがあるため、最終的にSVGが必要な要素だけを別ツールで書き出すのが効率的です。
Illustrator との書き出し機能比較
| 項目 | Photoshop の SVG 書き出し | Illustrator の SVG 書き出し |
| 純粋なベクターパス保持 | 限定的 ― テキストをシェイプに変換・ラスタ要素を排除する必要あり | 完全に保持可能 |
| SVG オプションの可視性 | バージョンによって非表示になることあり、旧形式モードが必要 | 常に選択可能 |
| 高度なベクターエフェクト | 影やマスクで制限あり | 幅広く対応 |
他のベクター専用ツールのメリット
専用のベクターツール（ベクター専用ソフトウェア）を使えばパスの編集性・SVG出力設定・コード整形など細かな制御が可能です。Photoshopで再現困難なエフェクトもネイティブに扱えるため、WebアイコンやUI素材を一貫してベクター形式で管理したい場合には向いています。
場面に応じた使い分けの指針
以下のような基準でツール選定を行うと効率が上がります:
- ロゴ・アイコン・UI素材など：Illustratorなどのベクター特化ツールで作成し書き出す
- 写真加工や画像編集が主体：Photoshopで処理し、SVGが必要な部分だけ別ツールで書き出す
- テキストや図形の単純な素材：Photoshop内で整理してSVG書き出しをトライ
こうした使い分けで品質と効率のバランスがとれます。
利用ケース別の具体的なTipsと注意点
SVG書き出しは用途によって求められる要件が異なります。Webアイコンなら透過性やスケーラビリティが最重要ですし、印刷やUI素材ではカラープロファイルやアウトラインの扱いが重視されます。以下、代表的なケースごとに注意点とコツを紹介します。
印刷用途では通常SVGは使われにくいものの、カッティングプロッターやレーザーカットなどではSVGが使われるケースがあります。この場合、正確なパスデータと線幅、アンカーポイントの整理が不可欠です。さらに、背景の有無やアートボードのサイズを一致させるとトラブルが減ります。
Web用途での最適化ポイント
Webでの利用を想定する場合は、ファイルサイズを小さく保つこと、透明背景にすること、カラー空間をsRGBにすることが重要です。またCSSで色を制御できるようテキストをアウトライン化するかパス化しておくと柔軟性が増します。不要なレイヤーや効果は削除し、単純な構造を保つことがパフォーマンス向上につながります。
印刷・機械切断用途での注意点
印刷用途では線幅やアンカーポイントの均一性が求められます。小さなノイズや不要なポイントを整理すること、レイヤーを重ね過ぎないことが品質保持のために大切です。機械切断などでは背景は白か透明かを明確にし、パスが閉じているか、線と塗りが混ざっていないかを確認してください。
アイコン・UI素材としての準備
アイコンやUI素材では複数サイズ対応やレティナ対応などが求められます。SVGならスケーラビリティがあるため、一つのファイルで対応が可能ですが、ビューでの見え方を事前にモニターで確認することが必要です。細線が極細すぎると表示されにくいので太さなども調整してください。
よくある疑問とその答え
SVG書き出しに関する疑問やトラブルは多くのユーザーが経験しています。ここでは代表的な質問とその解決策をご紹介します。
Export As に SVG が見つからないのはなぜか
標準の Export As ダイアログで SVG が選べない原因は、主に現在のバージョンではそのオプションがデフォルトで非表示になっているからです。そのため環境設定の「書き出し」の項目で旧来の Export As モードを有効化する必要があります。これを有効にして再起動すれば SVG が選択肢に現れるようになります。
フォントが思った通りに表示されないときの対処法
書き出したSVGでフォントが変わっていたり太さが不自然になったりする場合、テキストレイヤーをシェイプに変換することで解決します。アウトライン化する作業をすることでフォントの見た目とパスの形状を一致させられます。またフォントファイルが環境に依存すると異なる描画になるため、テキストを含むSVGを利用する際には注意が必要です。
複雑なレイヤー効果が崩れることへの対応
影、グローなどのエフェクトやマスクはラスタ処理されがちです。これらを使った場合、それらの効果はSVGではベクターとして保持されず、ラスタライズされてしまうことがあります。代替としてベクターマスクを使ったり、エフェクトを手動でパスに変換する方法を検討してください。
SVGが意図せず大きくなってしまう場合
書き出したSVGのファイルサイズが大きい場合、それは複雑すぎるパスや余分な埋め込みデータ（不使用レイヤー・画像など）が含まれていることが原因です。不要な要素を削除したり、パスを整理・最適化するプラグインやツールを使ったりするとサイズ削減が可能です。
まとめ
PhotoshopでSVGを書き出すには、「純粋なベクトル要素で構成されたデザイン」「テキストをシェイプに変換」「不要な効果を排除」「背景透明性とカラースペースを整える」などの準備が重要です。さらに、バージョン22.5以降でSVGオプションが非表示になることがあるため、環境設定から旧来の書き出し方式を有効にすることがカギとなります。
用途に応じてPhotoshopとIllustratorなどのツールを使い分けることで、最適なSVGファイルを手に入れることができます。ロゴやアイコンなど、綺麗で汎用性の高い素材を作るための基本と応用を押さえて、目的に合った書き出しを実現してください。
コメント