PNG から SVG 変換は Photoshop 使えば（お布施は高いが）超ラクだった

おばちゃん、すでに物忘れがはげしいため、自分が忘れないためにメモ書き。

画像変換だから ImageMagick だと思って、PNG 画像を SVG に変換させたら、元の画像はカラーだったのにモノクロになっていた。困った。どうしたものやら・・・

ネットで検索したら、Adobe Photoshop で SVG 変換できるらしい。

PNG 画像を Photoshop で開いて、
カラーモードを RGB に変更
レイヤーを複製して画像の範囲を「選択」（背景になってるとダメっぽい）
複製したレイヤーをクリックすると以下の画像のようになる。
（おばちゃんの Mac の設定は英語。だからアプリケーションも基本、英語になっている。何でって？　おばちゃんはイバラの道が好きなのよ）

PNG 画像を開いた Photoshop 画面

「Copy SVG」でコピーして、コピーしたコードをテキストエディタにペーストして、テキストファイルを拡張子 .svg で保存。

<img>タグで使ってもいいし、HTML にコードを直接貼り付けても使える。カラーのままだし、元の画像に近いぐらいキレイだし、ファイルサイズもそんなに大きくない。さすが Adobe。

お布施は高いが役に立つ。

2022.11.5追記「'data:img' はテキストエディタで 'data:image' に書き換えないとchromeで表示できない」

svgファイルをテキストエディタで開いて ’data:img' の箇所があったら 'data:image' に書き換えないとchromeで表示されなかったです。

2022.2.9追記「Photoshop の各レイヤーにある画像を、別々に SVG にする時に ”ラク”」

と、言ったほうがいいのかもしれない。PNG に限っていえば、ラクかどうかは人によるかもしれないです・・・