PSDをSVGに変換
SVGしか受け付けないツール向けに、Photoshopのデザインを.svgファイルとして保存できます。変換ツールはPSDを統合し、その画像をSVGで包みます。それで十分な場合と、ロゴのトレースが必要な場合を以下で確認してください。
画像変換
またはJPG, JPEG, JPE … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
85 なら写真は元の画像と見た目がほぼ変わりません。ファイルを小さくしたいときだけ下げてください。
JPG、BMP、EPS は透過に対応していません。透明な部分はこの色で塗りつぶされます。
透明な部分の背景に使う16進カラーです(例: #FFFFFF)。
この形式には 1 枚の画像しか保存できません。アニメーションを残すには GIF または WebP を選んでください。
マルチサイズのアイコンは 1 つのファイルに複数の解像度を含み、ブラウザや OS が必要なサイズを選びます。
元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。
上で選んだ辺のピクセル数です。
元のサイズに対する割合です。
画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。
メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。
このツールの使い方
- 1
PSDをアップロード
.psdファイルを1つ以上選択します。1回あたり最大20ファイル、1ファイル95 MBまで対応しています。
- 2
「SVGに変換」を押す
表示されているデザインをキャンバスサイズで統合し、SVGドキュメントに埋め込みます。内部のビットマップは可逆形式で保存されるため、画質スライダーはありません。
- 3
結果を開く
.svgをブラウザ、Figma、Inkscapeにドラッグしてください。PSDと同じ見た目で表示されます。大きく拡大するとピクセルが見えますが、これは仕様どおりです。
PSDをSVGに変換：実際に書き出される内容
PSDはレイヤーの積み重ねです。写真やブラシによるピクセルレイヤー、下のピクセルを変える調整レイヤー、テキストレイヤー、スマートオブジェクト、そして2000年のバージョン6.0以降Photoshopがベクターパスとして保存しているシェイプレイヤーがあります。Photoshop自体は1990年2月に登場しました。PSD形式には表示中のレイヤーを統合したコンポジットも含まれており、他のプログラムがすべてのレイヤー種類を理解しなくてもデザインを表示できます。
このコンバーターはその統合済みデザインを使います。表示されているレイヤーをキャンバスサイズの1枚の画像にレンダリングし、その画像だけを含むSVGドキュメントを書き出します。SVGの幅、高さ、透明度は正しく、元のデザインと同じようにページやレイアウトに配置できます。ただし編集可能なシェイプは1つもなく、シェイプレイヤーの縁を含むすべての縁がピクセルです。エフェクト、マスク、描画モードにはSVGで1対1に対応するものがないため、レンダリング結果をそのまま出力します。
- PSDの幅または高さの上限
- 30,000 px
- PSDのファイルサイズ上限（これより大きいデザインはPSBを使用）
- 2 GB
- このコンバーターが受け付けるPSDの最大サイズ
- 95 MB
- 1回で処理できるPSDファイル数
- 20
PSD
Adobe Photoshop ドキュメント
PSD は1990年から使われている Adobe Photoshop 固有のファイル形式です。レイヤー、マスク、調整レイヤー、テキスト、スマートオブジェクト、チャンネル、カラープロファイルを保存するため、あとから劣化なく再編集できます。ファイルは非常に大きいことが多く、完全に再現するには Photoshop が必要で、GIMP、Photopea、Affinity などの他の編集ソフトは精度にばらつきがあります。ブラウザ、スマートフォン、多くのアップロードフォームでは PSD を直接表示できません。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 非対応
- 登場時期
- 1990 · Adobe
SVG
Scalable Vector Graphics(SVG)
SVGは、2001年に W3C が標準化した XML ベースのベクター形式です。ピクセルではなく図形、パス、テキストを記述するため、どんなサイズでも鮮明で、ロゴやアイコンでは通常とても小さなファイルになります。透過、CSSによるスタイル指定、スクリプト、アニメーションに対応し、すべてのブラウザーがそのまま表示できます。写真には向かず、複雑なイラストは描画が遅くなることがあります。Illustrator、Inkscape、Figma、ブラウザーで開いて編集できます。
- 圧縮方式
- –
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2001 · W3C
Webビルダーやテンプレートプラットフォーム、カッティングマシンがSVGを求めているのに、デザインがPhotoshopファイルしかない場合にPSDからSVGへの変換が探されます。得られるのは、SVGコンテナに入った統合済みのアートワークです。
PSD内のシェイプレイヤー、スマートオブジェクト、ピクセル
誤解.svgで保存すれば、どんなデザインも拡大縮小できるようになる。
事実拡大縮小できるのはパスがあるからです。ビットマップを含むSVGは、PNGと同じようにピクセルサイズを超えるとぼやけます。
誤解Photoshopのシェイプで描いたロゴは自動的にベクターに変換される。
事実このツールは最初に統合するため、シェイプはピクセルになります。ベクターシェイプは書き出すかトレースする必要があります。
誤解スマートオブジェクトはリンクされたベクター内容を保持する。
事実配置されたIllustratorファイルは、キャンバス上の表示サイズでレンダリングされ、ほかの要素と一緒に統合されます。
Photoshopのデザインから本物のベクターパスを得る方法
どんなサイズでも鮮明さを保ちたいロゴ、アイコン、レタリングには、トレースが適した方法です。PSDをPNGに変換して透過PNGにし、その後画像SVG変換にかけると、エッジを追ってパスを書き出します。トレースはフラットな色と明確な輪郭に向いており、写真は数千もの小さなシェイプになってしまいます。曲線を滑らかに保つ設定は、PNGをSVGに変換する方法で解説しています。
元のベクター素材がIllustrator、Affinity Designer、Figmaにある場合は、統合したコピーをトレースする前に、そのファイルを入手してください。
PSDのSVG変換に関するよくある質問
Photoshopのシェイプレイヤーは編集可能なSVGパスになりますか？
このコンバーターではできません。シェイプレイヤーはPhotoshop内ではベクターですが、SVGに書き出す前にPSDが1枚のビットマップに統合されるため、シェイプを含むすべてのレイヤーがピクセルになります。パスを残したい場合は、ベクターエディターでシェイプを書き出すか、結果をトレースしてください。
SVGの容量が同じデザインのPNGとほぼ同じなのはなぜですか？
SVGの中身がほぼPNGだからです。ビットマップはエンコードされたテキストとしてSVG内に保存されるため、サイズが約3分の1増えます。本物のベクターロゴなら数KB程度です。
このSVGをCricutやレーザーカッターに送れますか？
読み込みはできますが、カットできるものがありません。カッティングマシンはパスのアウトラインに沿って動作しますが、ビットマップを包んだSVGにはパスがないため、Design Spaceやレーザー用ソフトでは1枚の平面画像として扱われます。カットラインが必要な場合は、画像SVG変換でロゴをトレースしてください。
Photoshopのテキストレイヤーの文字は、SVGでもテキストのままですか？
いいえ。テキストレイヤーはフォントを反映してレンダリングされ、ほかの要素と同様に統合されるため、文字の検索、選択、書き換えはできません。編集可能なテキストが必要な場合は、同じフォントを使ってSVGエディターで作り直してください。
ビットマップをSVGで包むことが役に立つのはどんなときですか？
テーマビルダーやテンプレートプラットフォームなど、.svg拡張子を求めるものの、ファイルを表示するだけのシステムで役立ちます。本物のベクター素材ができるまでの仮の素材としても使えます。
PSDのカンバスが大きいほど、SVGは鮮明になりますか？
はい。SVGはキャンバスの寸法を保持するため、4000 pxのPSDは1000 pxのものより大きな表示サイズでも鮮明です。元のサイズを超えると、埋め込まれた画像は通常のビットマップと同様にぼやけます。
| PSDをPNGに変換 | PSDをJPGに変換 | PSDをPDFに変換 |
| PNGをSVGに変換 | EPSをSVGに変換 | 画像をSVGに変換 |