PhotosopはSVGデータとして「書き出し」はできますか？

[ann_pan]

基本的な質問にて失礼します。

Photoshopは作成した画像をSVGデータとして「書き出し」できますか？

僕のPhotoshop（25.1.0）では「書き出し」>「書き出し形式...」にて、
書き出せるファイル形式はPNG、JPG、GIFの選択しかできません。

どうぞ、ご教示くださいませ。よろしくお願いいたします

#MacOS Sonama14.1.1

[assause]

行えないでしょう。

ヘルプのほうにもファイル形式一覧はあるものの、SVGは記載されていません。

一般的にはSVGで期待されるのはベクターとしてのデータ内容ですし、ビットマップ作成を前提とするPhotoshopで扱うだけの意味があまりないように思います。

SVGの生成が必要な場合、ベクターデータ作成を前提とするIllustratorがその役割を担っていることも理由になるでしょう。

[ann_pan]

assauseさま

貼っていただいた「ファイル形式一覧」チェックしてみました。.svgが入っていないことを確認しました。ありがとうございました。

[Yamonov]

その書き出しダイアログでのsvgフォーマットは2024で完全に廃止されました。

今は、アセット生成でsvgフォーマットのデータを作れます。

Photoshop アセット　で検索してください。詳しい解説ページが出ます。

ただ…確認しておきたいんですが、ベクターデータとラスターデータの違いはご存じですよね。

アセット生成でラスターデータをsvg形式にしても、中身はsvgのガワで包まれてbase64エンコードされたpngです。単純にpng形式にするよりも数倍大きいだけのデータですから意味はありません。シェイプレイヤーはまともなsvg形式にできます。

ラスター画像をベクター化したい、ということでしたら、Adobe Expressなどのサービスを使うか、Illustratorでトレースさせるしかありません（Photoshopにはその機能はありません）。

[ann_pan]

Yamonovさま

アセット生成によるsvgフォーマット形式の生成、じっさいに試してみました。ありがとうございました（レイヤーの名前に拡張子.svgを付けて、その後、ウァイル > 生成 > 画像アセット）

’’アセット生成でラスターデータをsvg形式にしても、中身はsvgのガワで包まれてbase64エンコードされたpngです。’’この場合の”中身はsvgのガワで包まれた”というニュアンスが、つかめません。すみません。

base64エンコードについては承知しております。

「大小のアルファベット、数字、記号を組み合わせた文字列への変換」という認識です。

たとえば、こんな感じでしょうか？
こんにちは
44GT44KT44Gr44Gh44Gv

ここからは大胆な推測で、たぶん間違っていると思うのですが…

それは、ラスターデータの場合、ドットの色調が、base64でエンコードされる、すなわち上記のような文字列で表現されている….とか…

そうイメージすると、なんとなくウェッブのHTMLのタグとの相性も良さそうです。たとえばこんな感じです。

<img src="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg">

で、一方では、illustratorなどで描いたイラストを.svgや.aiで保存した場合は、base64による文字列ではなく、違う表現になっていて、同じsvgと言っているけれど、じつは、まったく別物だよみたいな….

[Yamonov]

>ラスターデータの場合、ドットの色調が、base64でエンコードされる、すなわち上記のような文字列で表現されている….とか…

そうです。バイナリデータがそのままbase64エンコードでテキスト化されsvgフォーマット内に置かれます。画像をアセットでsvgにしてテキストエディタで開くと分かります。

相性……というか、画像を軽いpng形式でリンクするのではなく、html等にわざわざ埋め込んでしまったほうが良い場合であれば、という条件付きでしょう。通常は画像データをsvgに、ラスターデータのまま埋め込む必要は、ファイルサイズの総量から言ってもあまりないのではないでしょうか。

>一方では、illustratorなどで描いたイラストを.svgや.aiで保存した場合は、base64による文字列ではなく、違う表現になっていて、同じsvgと言っているけれど、じつは、まったく別物だよみたいな….

「ベクトル」と「ラスター」のデータの違いです。

svgは基本的にベクトル形式のデータを扱うものですから、ラスターデータを、あまり意味の無いエンコードしての埋め込みではなくベクトルとして扱うなら、画像をトレースしてベクトルにするしかありません。

で、この操作はPhotoshopはできません。Illustratorや先に書いたサービスでトレースさせる必要があります。

さらに、こうして作られたsvgは、↑で想像できるように非常にデータ量が重くなります。

[ann_pan]

ご回答ありがとうございます。おかげさまで、だんだん分かっていました。

そもそも、SVGフォーマットはベクトルデータを格納するために設計されたのに、
一方で、ラスターのデータがBase64でエンコーディングされ保存されるファイルもSVGと呼ばれているところに混乱がありました。

というわけで、たとえばラクターのデータを拡大しても使えるようにするにはillustratorの機能を使ってトレースし、.aiなり.svg形式で保存する...その変わりデータが重くなる可能性あり、のような感じでしょうか。

#svgファイルをテキストデータで開いてみました。おっしゃる通り、base64にてエンコーディングされた多くの文字列が/（スラッシュ）で区切られていました。余談ですが、画像→エンコーディング→文字列を利用すれば、画像も暗号化に使えそうです（逆方向の文字列から画像は推測不可能）

#たしかにウェブページにおいては通常、ページに画像をリンクするタグを記述します。ページにあえてエンコーディングされた文字列を貼るというのは、小さな画像やアイコンを使うとか...特別なケースのような気がします。

[Yamonov]

まずはこちらも参考に

https://www.adobe.com/jp/creativecloud/file-types/image/comparison/raster-vs-vector.html

>たとえばラクターのデータを拡大しても使えるようにするにはillustratorの機能を使ってトレースし、.aiなり.svg形式で保存する...その変わりデータが重くなる可能性あり、のような感じでしょうか。

画像のベクター化は通常は、質的にニアリーイコールにすらならないので、拡大したいのであれば今ならラスター→ラスター処理であるAIリサンプルを試すでしょうね。

よく拡大するためにベクトル化したい、という質問などがありますが…絵画系フィルタをかけたような、元のディテールを維持できていない状態にしてまでやることではない、と思います。

（※base64エンコードは単なる符号化で意識せずとも複合化できてしまうので、暗号とするならもう一手間加えたいところですね。

[ann_pan]

Yamonovさま

アドバイスありがとうございました。
ご返答遅れてしまいました。申し訳ありません。

貼っていただいたラスターとべクターの違いのウェブページ読みました。
参考になりました〜

PhotoShopのリサンプルについて、

このYoutubeを参考に、じっさいに試してみました。
https://youtu.be/YGRq44douIs?si=7A0El5_MPyMplMD0 

概略は以下の通りです。

<<オリジナル画像>>
解像度: 72px/inch

サイズ:1024✕1024px

<<変更>>
解像度:（印刷時には、このくらい必要みたいなので）350px/inch

サイズ:（解像度を上げたら自動的に、このようなサイズに）4980✕4980px

そのうえで、

１）メニューバーの「設定」＞「テクノロジープレビュー」の中の
「ディティールを保持し2.0アップスケールを有効にする」のチェックを確認

２）メニューバーの「イメージ」＞「画像解像度」の中の

「再サンプル」にチェックを入れて「ディテールを保持2.0」を選択し、
「ノイズを軽減を20%」にして保存。

◎結果:
パソコンの画面上では、画質の違いが分からなかったのですが、

画像の容量が、オリジナルの680KB→変更後5.6MBとなりました。

なにか間違いなどございましたら、遠慮なく、ご指摘くださいませ。

[Yamonov]

Photoshopのディテールを保持2.0は、今となってはかなり効果の低いアップサンプルだったりします。効果的に使える範囲は2倍程度まででしょうか。

（Photoshopのアップスケール設定の仕組みはかなりわかりにくいので……ディテールを保持2.0や「自動」、スマートオブジェクトに対する効果についてはこちらも参照してください。

https://iwashi.org/archives/5809

Photoshop以外のソフトウェアが、有料・無料ともにかなり出ていますので、そちらも試して見てください。それぞれにクセがあり、使い分ける必要があります。

real-esrgan、waifu2x、などなど。WEBサービスだとこういうのも。

https://kakudai-ac.com/

あと、画像単体で350ppiになっていても解像度的にはあまり意味がありませんから、注意してください。解像度の理解は画像を扱うデザイナや印刷会社の人ですら間違っていたりしますので、大変だと思いますが……

「印刷で必要」なのは、IllustratorやInDesignに…つまり実世界のmmやcmといったサイズのものに配置し、拡大縮小した状態で、ピクセルの密度が350ppiになっていることが必要です。「ピクセルには大きさの概念がない」ことも、理解の前提としてください。

DTPで言う「解像度」とはリアル世界へ配置したときのピクセルの密度を言います。

[ann_pan]

yamonovさま

貼っていただいたウェッブページ、チェックしてみました。

Adobe SenseiというAIエンジンにより
「品質的に200%くらい平気かなー」と書かれていました。

約２年前のウェッブサイトで、
当時は新鮮だったのかも知れませんが、AIの進展は速いので、

たしかに、やや古くなっている機能なのかもしれません。

ご紹介いただいた「Photoshop以外のソフトウェア」も必ず試します。

じつは、ぼくはコピーライターです。

ご承知のとおり「広告・広報の文案を書く職種」です。

SNSでは結果的に誰でもみな「広告・広報」しているし、
さいきんではChatGPTといった大規模言語モデルにより、
この職種は激震に見舞われております。

そこでコピーライターをとらえ直し、
メタの視野（俯瞰）してみてみよう、

というわけで、その試行錯誤のひとつとして、
ChatGPTのプロンプト（言葉による指示）をガシガシやっております。

そうすると、必然的にDALL・E3という、
ChatGPTにてプロンプトを書き、
イラストなどの画像を生成させることになります。

ただプロンプトをただ書くだけでは
モティベーションが下がってしまうので、

ネット上で様々な案件を落札するプラットフォームの中から、
イラストの募集に応募する方針を立てています。

だたし、DALL・E3で生成されるイラストでは、
募集の要件に合うケースは少ないので、
Photoshopでレタッチ等も学習することが余儀なくされ、

いや、それ以前にDALL・E3で生成される
1024✕1024、pngのデータは有効なのかという、
デザイナーの方にとっては基礎的なことさえ、
「さっぱし分からんわ」の状況になり、本質問と相成りました。

いわゆる生成系AIが本格化してゆく中で、
職種の境界が「溶けてゆく」ような気がしています。

それはそうなんですが、
今回のラスターとベクターについて、解像度についてなど、
本職が持っている知識や理解を知ることは必須だし、
「それは生半可では、できないぜ」ということを痛感しております。

私的なことも含み、長くなってしまいました。

末筆になりましたが、
有益なアドバイスありがとうございます。助かります。

[Yamonov]

>Adobe SenseiというAIエンジンにより「品質的に200%くらい平気かなー」と書かれていました。

はい、そう書きました。私のサイトですので…

AIのリリース速度はここ数年もの凄い早さで、

https://www.amazon.co.jp/dp/B0C1Y32C5X/

の連載にAIリサンプルの記事を書いたら、発売時には新しいものがリリースされて書いてあることが嘘…とは言わなくても古くなってた、という苦い経験もしています。こういうものはコアを捉えないと価値のないものを作ってしまいますね。

に

[ann_pan]

yamonovさま

コメントありがとうございます。

ご紹介いただいた電子書籍を購入したいところですが...
ほんらいコピーライターなので、深入りに要する時間などを勘案したりして...すみません。

本質問そしてPhotoshopのフォーラムの主旨から外れてしまうのですが、

このさい絶好の機会なので、ご意見をうかがえればと存じます。

PhoroshopにはAIの機能が使えるようになっています。

そして、ここ１か月くらい、
illustratorでは、AIによるベクターの画像生成ができると聞いています。

yamonobさんをデザイナーだと仮定させていただき（まちがっていたら、ごめんなさい）、
これからのAIとデザイナーの付き合いなどについてご意見をうかがえると幸いです。

[ajabon grinsmith]

横から恐れ入ります。

スレッドのタイトルとはだいぶ主旨が変わってきていますので、

以降の会話はスレッドを改めていただければと思います。

Adobe サポートコミュニティには、雑談用のフォーラムも用意されていますのでご活用ください。

Adobe MAX 2023 / The Japan Lounge

また、本題が解決（または納得）したときは、

役に立った回答に正解マークをつけてください。

解決したら「正解」マークをつけよう！他の利用者の方にとって解決しているかどうかの目印になります！

フォーラムを盛り上げていただきありがとうございます！

[ann_pan]

ajabon grinsmithさま

承知しました。ありがとうございます。

本件については「解決」（または納得）に至ってないモヤモヤした感じが残っております。

これは、当方の元々の知識不足や理解力によるものです。そのへん、どうぞご容赦くださいませ。

[Yamonov · Accepted solution]

ええと、すみません、当初の質問の「Photoshopはsvg〜」については解決しているだろうと思います。

納得に至っていないのは派生した内容のほうではないでしょうか？

[ann_pan]

すみません、まだスッキリ理解し切れていません。（いちども触ったこともないのですが）これからillustratorに触ってみたいと存じます。そのうえで認識できることを期待したりしています。現時点で留保させてくだいませ。