画像をSVGに変換できる無料ツールを作りました（ブラウザだけで完結）
結論：手持ちのPNGやJPGを、ブラウザだけでSVG（拡大してもぼやけないベクター画像）に変換できる無料ツールを作りました。インストールも登録もいりません。画像はあなたのパソコンの中だけで処理され、どこにも送られません。ロゴやアイコン、線画をきれいに変換するのが得意です。実験場のページからすぐ試せます。
そもそもSVGって、何がうれしいの？
ふだん使うPNGやJPGは「点（ピクセル）の集まり」でできています。だから拡大するとギザギザになったり、ぼやけたりします。いっぽうSVGは「図形を数式で持つ」形式なので、どれだけ大きくしても輪郭がくっきりしたままです。しかもファイルが軽く、あとから色を変えたりアニメーションを付けたりもしやすい。ロゴやアイコンをWebサイトや資料で使うなら、SVGにしておくと何かと便利です。
このツールでできること
やることはシンプルで、画像をドラッグ＆ドロップして「SVGに変換」を押すだけ。すると、右側にSVGの結果が出てきます。ポイントは、ただ変換するだけでなく「きれいに変換するための工夫」をいくつも入れているところです。
色をねらいどおりに残せる
画像をSVGにすると、本来4色しかないはずのロゴが、なぜか中間色だらけになってしまうことがあります。これは、輪郭のふち（にじみ）に色を取られてしまうのが原因です。そこでこのツールでは、使いたい色を自分で決められる「パレット固定」を用意しました。元画像から自動で主要な色を拾うこともできますし、スポイトで元画像の好きな場所をクリックして、その色をそのまま拾うこともできます。結果として、余計な色が混ざらず、狙った色だけのすっきりしたSVGになります。
背景の透明もそのまま／白を透明にもできる
背景が透明なPNGは、変換すると背景が変な色で塗りつぶされてしまいがちです。このツールは透明をそのまま保てるようにしました。さらに「白を透明にする」を選べば、白い背景のロゴでも、背景だけをきれいに抜いて透明のSVGにできます。
拡大してもなめらかな仕上がり
画像をSVGにすると、曲線が拡大するとカクカク（ガビガビ）しがちです。これは変換のしくみが「ピクセルのふち」をなぞるためです。そこで、輪郭をなめらかな曲線に整えるエンジン（potrace）を既定にして、拡大しても角が立たないようにしました。速さ重視で多色をそのまま変換したいときは、もう一つのエンジンにワンタッチで切り替えられます。
結果はその場で「拡大して」確かめられる
変換結果は、元画像とならべて表示され、ズームスライダーで同じ倍率まで拡大して見比べられます。背景も市松模様・白・黒に切り替えられるので、透明部分や淡い色もはっきり確認できます。「拡大したらガタガタだった」を、ダウンロード前にその場でチェックできます。
AIでの仕上げは「おまけ」です
このツールには、変換したSVGをAIにさらに整えてもらう機能も付けています。ただし正直に言うと、これはおまけです。SVGは中身の情報量がとても多く、AIに渡すとトークン（＝利用料）の消費が大きくなりがちで、コストが高くつきやすいのです。ここはまだ改良の余地が大きいと考えています。なので、まずはAIを使わない「ローカル整形」（不要な点の削除やファイルの軽量化を、料金ゼロでその場で行う機能）で十分きれいになるか、を先に試すのがおすすめです。AI仕上げを使う場合も、ご自身のAPIキーを入れて使う方式にしています。
使い方は3ステップ
むずかしい設定はいりません。①画像を入れる → ②（必要なら）残したい色をスポイトで選ぶ → ③「SVGに変換」を押す。あとはダウンロードするだけです。もの足りなければ「ローカル整形」で軽く整える、くらいの気持ちで十分使えます。
安心して使えるように
画像の変換・色の抽出・整形は、すべてあなたのブラウザの中だけで行われます。画像がどこかのサーバーへ送られることはありません（AI仕上げを実行したときだけ、選んだAIサービスへ送られます）。ツールは、オープンソースのpotrace（GPLライセンス）とImageTracerJS（パブリックドメイン）を利用して作りました。作者のみなさんに感謝します。
さいごに
「ちょっとこのロゴ、SVGにしたいな」という場面は意外と多いものです。そんなときに、登録もインストールもなく、ブラウザだけでサッと変換できる場所があると便利だと思って作りました。無料なので、気軽に触ってみてください。感想や「こうだったらいいのに」も大歓迎です。