North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
デザイン

Webデザインをするときの小ネタ~PhotoshopからSVGファイルに書き出せない!?の対処法~

2020年6月現在、Photoshopにスマートオブジェクトとして貼り付けたベクターファイルをそのままSVGに書き出すことはできません。
ベクター生きてるのに何で!?って思うのですが、そういう仕様なんですね・・・
Illustratorからは一瞬で書き出せますが、Photoshopでデザインデータを作成しているとなかなかうまくいきません。

1.Illustratorでベクターデータをコピー

Illustratorで ベクターデータをコピー

2.Photoshopに スマートオブジェクトとしてペースト

Photoshopに スマートオブジェクトとしてペースト

3.ペーストしたスマートオブジェクトを画像アセットで書き出ししようとする

レイヤー名をファイル名.svgにして画像アセットとして 書き出しをすると、SVGファイルが書き出されます

ペーストしたスマートオブジェクトを
画像アセットで書き出ししようとする

4.書き出されたSVGファイルを開くと、ベクターデータが喪失して画像ファイルになってる・・・・・

書き出されたSVGファイルを開くと、ベクターデータが喪失して画像ファイルになってる・・・・・

これ、結構詰まってる方多いと思います・・・
スマートオブジェクトを開いてIllustratorでSVGに書き出せば良いのでは?と思われますが、その対象が大量だったらとてつもない作業になります。

対処法1:ベクターデータをシェイプレイヤーとしてペーストして、Photoshopの画像アセット機能でそのままSVGに書き出す

対処法1:ベクターデータをシェイプレイヤーとしてペーストすると、Photoshopの画像アセット機能でそのままSVGに書き出せます

単純なアイコン等で、色を気にしない場合はこちらの方法がおススメです。
ただ、デザイナー側で既にスマートオブジェクトとしてペーストしていた場合は使用できません。分業している場合はデザイナーとコーダーで事前にすり合わせしましょう。

対処法2:「リンクされたアイテム」機能で書き出す

スマートオブジェクトとしてペーストされたベクターデータを、チカラワザでSVGファイルに変換します。
流れとしては「リンクされたアイテムに変換」でaiデータを書き出す→そのaiデータをIllustratorからSVGファイルに変換する、といった感じです。

1.SVGに書き出したいレイヤーを右クリック

SVGに書き出したいレイヤーを右クリック

2.メニューの中から「リンクされたアイテムに変換」を選択

メニューの中から「リンクされたアイテムに変換」を選択

3.任意のフォルダを指定し「保存」すると、aiファイルとして書き出される

※SVGファイルをそのままスマートオブジェクトとして使用していた場合は、SVGファイルとして再書き出し出来ます

任意のフォルダを指定し「保存」すると、aiファイルとして書き出される

4.aiファイルを、illustratorのアートボードに配置

※ドラッグ&ドロップが簡単ですが、メニューから「ファイル」→「配置」でも同じ作業ができます

aiファイルを、illustratorのアートボードに配置

5.アセットの書き出しパネルにドラッグ&ドロップして、SVGとして書き出す

アセットの書き出しパネルにドラッグ&ドロップして、SVGとして書き出す

6.ベクターデータが保持されたSVGファイルが完成!

ベクターデータが保持されたSVGファイルが完成!

注意:この作業を行うと、Photoshop側のスマートオブジェクトがリンクオブジェクトに変換されます

注意:この作業を行うと、Photoshop側のスマートオブジェクトがリンクオブジェクトに変換されます

そのままでもいいのですが、書き出したaiファイルを移動させたりリネームさせたりするとPhotoshop側から参照できなくなります。管理コストも増えるので「元に戻す」でスマートオブジェクトに戻しておくことをおススメします。

aiファイルをSVGファイルに変換するコンバータサービスもあります

何故aiからSVGの変換にIllustratorを使用したかというと、無料で大量に一括変換可能なサービスを見つけられなったからです。
3ファイル以上は有料プランとなりますが、探した中でもおススメできるのはconvertioです。
※ コンバータを使用する場合は、必ず生成後のSVGファイルを開いてベクターデータが保持されていることを確認してください。convertioは大丈夫ですが、ベクターデータが喪失するコンバータもあります。

かなりチカラワザ感がありますが、この方法でPhotoshopのスマートオブジェクトをSVGに変換できます。
※そもそもベクターデータがないものは書き出せません。事前にトレースしましょう。

いろいろ調べて紆余曲折し、この方法に行きつきました。
1デザインにつき1~2個の書き出しだったらIllustratorを起動してそのままSVGとして保存しなおす、という方法でも構いません。
ただ、アイコンのように2~30個あると途方もない作業になります。
可能な限りラクをしましょう。
PhotoshopもIllustratorも、アップデートを重ねてだいぶ融通が効くようになってきましたが、SVGの取り扱いは今後のアップデートに期待したいです。

あひる
WRITER:あひる
気付けばデザイン歴10年以上。
UC(色のユニバーサルデザイン)アドバイザー。
見た目だけではない、戦略的なデザイン設計を考えています
おやつ作りも好きですが、それ以上に自転車(ロード)とスキーが好きです。
特技は早起きです。
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001