PNG を SVG に変換

PNG をトレースして、どこまで拡大しても崩れない本物のベクターにします。無料、登録不要、透かしなし。画像がブラウザの外に出ることはありません。

PNG をここにドロップ、またはクリックして選択

JPG と WebP にも対応 · 20 MB まで

100% ブラウザ内で完結
アップロード不要・登録不要
アカウント不要
画質を調整可能

ロゴ・アイコン・線画に最も適しています。写真もトレースできますが、まず何が起きるかを見ておくことをおすすめします。画像の種類ごとの結果を見る

PNG を SVG に変換する理由

PNG はピクセルの格子です。元の大きさを超えて拡大すれば、その格子が見えてきます。輪郭はまずぼやけ、やがて階段状になり、誰にもどうにもできません。その細部はもともとファイルに入っていないからです。SVG は数式で表された形の集まりなので、求められた大きさでその都度描き直されます。看板に載せても、曲線はやはり曲線のままです。

ベクターが欲しくなる本当の理由はそこにあります。512 ピクセルの PNG として存在しているロゴは、ウェブサイトでは問題なくても、横断幕やカーラッピング、刺繍ミシンではまるで使えません。同じロゴが SVG なら、たった 1 つのファイルでそのすべての大きさに対応できます。

ベクターは、ピクセルにはできないかたちで編集もできます。SVG を Figma や Illustrator、Inkscape で開けば、形の色を変え、角を動かし、要素をひとつだけ取り出せます。SVG はテキストなので、テキストエディタで色を手書きで変えることさえできます。

そしてべた塗りの図版なら、たいていファイルは小さくなります。当方の計測では、単純なロゴが PNG の 4 KB から SVG の 2 KB になりました。半分の大きさで、しかもどんな解像度でも崩れません。これは最良のケースで、このページはあなたがそのケースに当てはまるかどうかを、かなり具体的にお伝えします。

トレースが実際にしていること

トレースは、画像の中で色が変わる場所を探し、その境目に沿って輪郭を描きます。デザイナーが描いた形を取り戻すのではなく、ピクセルをなぞった新しい形を描くのです。

この違いは、ラスターからベクターへの変換について理解しておくと最も役に立つことであり、当方が見たどの変換ツールもこれを説明していません。

デザイナーがロゴを作るとき、出発点は形です。円、三角形、制御点を持つ文字。PNG に書き出すとそれらはすべて捨てられ、色のついた四角の格子だけが残ります。トレースはそれを取り戻せません。トレースがするのは、その色のついた四角の縁を歩いて回り、そこにパスを置くこと — たまたま元の形に似ている、新しい形です。

ほとんどの場合それで十分ですし、べた塗りの図版なら元とほぼ同じになります。しかしこの点が、このページの残りすべてを説明します。結果がきれいに拡大できる理由 — いまやそれは本物のパスだからです。そのパスが元の形ではない理由、したがってパスが 100 本ある SVG が編集していて楽しくない理由。そして写真がうまくいかない理由 — 写真には追うべききれいな色の境目がないので、トレーサーが何千もの境目を作り出してしまうのです。

多くの方が意外に思う結果も、これで説明がつきます。トレースは自動的にファイルを軽くするわけではありません。パスは点の数に比例してバイトを消費します。ロゴは 4 本の単純なパスになって小さくなります。文字の入ったスクリーンショットは、アンチエイリアスのかかった文字の輪郭ひとつひとつに寄り添う 100 本のパスになり、大きくなります。当方の計測では、4 KB のスクリーンショットが見た目は同一の 19 KB の SVG になりました。

だからこのツールは、何かをダウンロードする前に、結果と両方のファイルサイズをお見せします。数字はそこにあります。4 KB → 19 KB。その交換に見合うかどうかは、そのファイルを何に使うか次第であり、判断するのはお客様です。こちらが隠すべきことではありません。

トレースはピクセルの縁をなぞります。新しい輪郭を置くのであって、デザイナーが描いた形を取り戻すわけではありません。

PNG を SVG に変換する手順

4 つの手順、すべてこのブラウザのタブの中で完結します。どの時点でもアップロードは行われません。

画像をドロップする

PNG・JPG・WebP、20 MB まで。ローカルで読み込み、中身を確認します。使われている色数、べた塗りの面積、透過の有無。

こちらの判定を確かめる

ロゴか、線画か、写真かを推定し、それに合った初期設定を選びます。推定結果は画面に表示され、ワンクリックで変更できます。決まるのは出発点だけです。

トレースする

処理はバックグラウンドのスレッドで動くのでページは反応し続け、進捗バーは実際に終わった作業を表します。大きな写真は数秒かかり、途中でキャンセルできます。

見比べて、ダウンロードする

結果は元の画像の隣に並び、どちらも 4 倍・8 倍に拡大して輪郭の持ち具合を確かめられます。変換前と変換後のファイルサイズもそのまま表示されます。納得できたらダウンロード、設定を変えてもう一度トレースしても構いません。

逆方向をお探しですか？ SVG をお持ちで PNG が必要なら、それは逆の作業で、ずっと簡単です — 戻す方向は情報を失いません.

このツールができること

PNG・JPG・WebP の画像をブラウザ内で SVG にトレースし、決める前に結果をお見せします。見返りは何も求めません。アカウントもメールアドレスも不要、1 日あたりの上限も透かしも順番待ちもありません。この検索で上位に出るツールのひとつはアップロードを 4 MB で打ち切り、別のひとつは無料利用者を有料利用者の後ろに並ばせます。

何が手に入るのかをお伝えします。両方のファイルサイズ、形の数、色の数、そして 8 倍まで拡大できる並列比較。当方が見た他の変換ツールはどれも、ダウンロードを渡してあとは自分で気づいてください、という作りでした。

設定は並べるだけでなく説明します。ある競合はトレースのパラメータを 9 つ用意していますが、どれが何をするのかは一言も書かれていません。こちらは 3 つに絞り、それぞれにファイルが大きくなるか小さくなるかを一文で添えています。

苦手なことを自覚しています。画像が写真のように見えるときは、ボタンを押す前にそうお伝えし、トレースが写真に何をするかを説明し、おそらくもっと合っている別のツールをご案内します。それでも進めることはできます。お客様の画像ですから。

トレースはバックグラウンドのスレッドで動くため、1200 万画素の写真でもページは反応し続け、長い処理は待ち続けずにキャンセルできます。

透過は保たれます。背景が透明なロゴは背景が透明なまま出てきます。黙って白い長方形が足されることはありません。

こういった用途で使われています：

印刷・看板・カーラッピング向けにロゴを拡大する
きれいな形を Figma・Illustrator・Inkscape に持ち込む
ベクターパスを必要とするカッティングマシンやレーザーカッター
刺繍やカッティングシート
どの画面密度でも鮮明である必要のあるアイコン
べた塗りの図版を描き直さずに色だけ変える
スキャンしたスケッチを編集できる線画にする

どの端末でも動きます

ブラウザの中で動くので、インストールするものはなく、環境による違いもありません。

§ 01

Windows

Chrome・Edge・Firefox で動きます。入れるものも、あとで消すものもありません。

§ 02

Mac

Safari・Chrome・Firefox で動きます。SVG はプレビュー、Figma、Illustrator でそのまま開けます。

§ 03

iPhone・iPad

「写真」や「ファイル」から選べます。大きな画像はスマートフォンでは少し時間がかかりますが、ページは反応し続けます。

§ 04

Android

ギャラリーでも任意のファイルマネージャーでも使えます。トレースはお使いの端末で動き、サーバーでは動きません。

§ 05

Linux

Firefox と Chromium で動きます。結果は Inkscape でそのまま開けます。

§ 06

Chromebook

ブラウザの中でローカルに動きます。Chromebook では、そもそも何かが動く場所はそこだけです。

お手元の画像はうまくいきますか

トレースをする価値があるかどうかを決めるのはこの問いですが、誰も答えていません。そこで計測しました。種類ごとにトレースし、その SVG をビットマップに描き戻して、元の画像とピクセル単位で比べています。以下は推定ではなく実測です。

種類ごとにトレースし、ビットマップへ描き戻し、元の画像と比べて計測しました。

画像の種類	目に見えて変わったピクセル	ファイルサイズ	やる価値は？
ロゴ・アイコン — べた塗り、くっきりした輪郭	0.6%	半分	明らかにあり
線画 — 白地に黒い線	3.2%	やや大きい	たいていあり
文字の入ったスクリーンショット	0.9%	4.5 倍	見た目は正しいが代償が大きい
写真	25.6%	まったく小さくならない	ほとんどなし

写真だけが、良い答えの存在しないケースである理由

写真の行をもう一度ご覧ください。4 分の 1 のピクセルが目に見えて変わり、ファイルはまったく小さくなっていません。これが既定の設定です。どちらの方向に振っても、両方とも悪くなります。色数を減らせばファイルは半分になりますが、今度はピクセルの 44% が誤りになります。さらに 2 色まで押し込めば元の 5 分の 1 の大きさになりますが、86% のピクセルが変わってしまい、それはもうあなたの写真ではなく、写真の型紙です。写真が忠実かつ小さく出てくる設定は存在しません。品質と容量は互いに引っ張り合っており、どちらも勝ちません。写真を軽くしたいのであれば、効率のよいラスター形式がそれを正しく行います。拡大できる写真が欲しいのであれば、ここでは差し上げられません。その細部はそもそもビットマップの中に存在しないからです。

見た目が同一の SVG になったスクリーンショット — 容量は 4.5 倍でした。

どのツールのトレース結果でも使える見分け方

開いて 400% に拡大してください。べた塗りの図版は鮮明なままです。輪郭が本当に曲線になっているからです。もし見えるのが、小さいうちだけ元の画像に似ていた、べた塗りの斑の寄せ集めなら、トレースは追いきれないものを近似したということです。そしてそれはどの変換ツールでも直せません。問題は画像の側にあって、ソフトウェアの側にはないからです。次に、ファイルサイズを元と比べてください。何倍にも膨らんでいて、あなたが欲しかったのが軽いファイルだけだったのなら、その変換はあなたの目的に逆らって働いたことになります。

画像がブラウザの外に出ることはありません

トレースはお客様ご自身の端末で行われます。画像はローカルで読み込まれ、このタブの中のバックグラウンドスレッドでトレースされ、そのままお返しします。アップロードは一切行われないので、8 時間後にも 24 時間後にも消すべきサーバー上の控えはありません。そうした削除の約束は、そもそもファイルを預かってしまったからこそ必要になるものです。

この検索で上位に並ぶ 4 つの変換ツールはすべて逆の作りです。画像は先方のサーバーへ送られ、そこで処理され、先方の都合で削除されます。まだ作業中のロゴや、秘密保持契約のある取引先の素材にとって、それはうっかり下したくない判断かもしれません。

作業中にネットワークから何かを取ってくることもありません。トレースのコードはこのページの一部で、最初に変換するときに一度だけ読み込まれます。

§ 01

アップロードなし

画像はお使いの端末でトレースされます。

§ 02

アカウント不要

登録もメールアドレスも、1 日の上限もありません。

§ 03

透かしなし

SVG はお客様のもので、何も刻まれていません。

§ 04

控えを残しません

何も届かないので、保管するものもありません。

よくある質問

この PNG SVG 変換は無料ですか？⌄

はい、隠している条件はありません。アカウントもメールアドレスも不要、1 日の上限も透かしも順番待ちもありません。これはこの検索では当たり前ではないので、あえてお伝えします。よく使われているツールのひとつは 1 ファイル 4 MB までに制限し、別のひとつは大きな処理で無料利用者を有料利用者の後ろに並ばせます。

画像をどこかにアップロードする必要はありますか？⌄

ありません。画像はお客様ご自身の端末上、このブラウザのタブの中で読み込まれ、トレースされます。どこにも送信されないので、サーバーには何も保存されず、保存期間について気にする必要もありません。

私の写真はきれいに変換されますか？⌄

たいていはうまくいきません。それは先にお伝えしておきたいことです。計測しました。既定の設定で写真をトレースすると、約 4 分の 1 のピクセルが元の画像と目に見えて異なり、しかもファイルはまったく小さくなりません。色数を減らせばファイルは軽くなりますが、誤差は 40% を超えます。写真が忠実かつ小さく出てくる設定は存在しません。写真には、トレーサーが追えるようなきれいな色の境目がないからです。ポスターのように様式化された仕上がりが目的であれば、それはまったく正当な目的ですので、そのまま進めていただいて構いません。

なぜ SVG が PNG より大きくなったのですか？⌄

ベクターファイルはピクセル単位ではなく点の数に比例してバイトを消費するからです。細かい輪郭や柔らかい輪郭が多い画像 — 文字の入ったスクリーンショット、写真、アンチエイリアスのかかったもの全般 — では、トレーサーはそれを追うために非常に多くの小さなパスを描き、それが積み重なります。当方の計測では、4 KB のスクリーンショットが見た目は同一の 19 KB の SVG になりました。べた塗りのロゴは逆に半分になります。ダウンロード前に両方のサイズをお見せしているのはこのためです。

これで PNG が編集できるデザインに戻りますか？⌄

多くの方が期待するかたちでは戻りません。トレースは画像の色の境目に沿って新しい輪郭を描くだけで、元のレイヤーも、生きた文字も、デザイナーが描いた形も取り戻しません。得られるのは本物のベクターパスで、きれいに拡大でき、色も変えられますが、トレースされたロゴは輪郭の集まりであって、復元されたロゴではありません。画像の中の文字が重要な場合、それは形として出てくるので、文字としては編集できません。

どんな画像が最も向いていますか？⌄

輪郭のはっきりしたべた塗りの図版です。ロゴ、アイコン、記号、単純なイラスト、白黒の線画。ベクター形式はまさにこのために作られたもので、ほぼそのままトレースでき、たいてい元より軽く仕上がります。撮影されたものより描かれたものに近い画像であるほど、うまくいきます。

あとから Figma や Illustrator で編集できますか？⌄

できます。出力は普通のパスを持つ標準的な SVG で、Figma、Illustrator、Inkscape、Sketch など、この形式を読めるものならどれでも開けます。編集の快適さは、結果と一緒に表示する形の数に左右されます。数本のパスなら扱いやすく、数百本なら扱いにくくなります。その数をお見せしているのも、これが理由のひとつです。

透過は保たれますか？⌄

保たれます。背景が透明な PNG は、背景が透明な SVG として出てきます。背景を塗りつぶした形として残す設定もあり、ロゴでは既定でオフ、写真ではオンになっています。

JPG や WebP も変換できますか？⌄

できます。このツールは PNG・JPG・WebP を受け付け、デコードしたあとは同じように扱います。ただし JPG は写真が届く際の一般的な形式であり、写真こそトレースがうまくいかないケースです。問題は形式ではなく中身のほうにあります。

なぜ数秒かかるのですか？⌄

処理がサーバーではなくお客様の端末で行われているからです。所要時間はピクセル数に比例します。小さなロゴはほぼ一瞬、600 万画素の写真で数秒、1200 万画素ならもう少しかかります。バックグラウンドのスレッドで動くのでページは反応し続け、長い処理は待ち続けずにキャンセルできます。

サイズの上限はありますか？⌄

1 枚あたり 20 MB です。どんなロゴにも十分すぎる大きさで、ほとんどの写真もこれで収まります。変換する枚数に制限はなく、1 日あたりの上限もありません。

SVG を PNG に戻すには？⌄

それは逆の作業で、ずっと簡単です。ベクターからピクセルへ向かうのは正確です。捨てられた細部を推測するのではなく、こちらが大きさを選ぶからです。当サイトにはまだこのツールがありません。当面は、SVG を開いて必要な大きさでスクリーンショットを撮れば、どのブラウザでも行えます。