PNG → SVG
PNGをSVGに変換
PNGを、本物のベクターパスでできたSVGに変換します。トレースはお使いの端末上で行われるため、画像が外に出ることはありません。
PNG画像をここにドロップ クリックしてファイルを選ぶか、Ctrl+Vで貼り付け ブラウザ内で処理 · ファイルは端末から出ません
PNGをSVGに変換する方法
- PNGを追加します。 枠にドロップするか、クリックして選ぶか、Ctrl+Vで貼り付けます。
- カラーか白黒を選びます。 カラーは画像の配色をそのまま残します。白黒にすると単色の図形になり、カッティングマシン、ステンシル、彫刻に使えます。
- ディテールと色数を調整します。 ディテールを下げると細かな点やノイズが消えます。色数を減らすと近い色がひとつの図形にまとまり、ファイルが軽くなります。
- SVGをダウンロードします。 コードをコピーして、Webページ、Figma、Illustrator、Inkscapeに貼り付けることもできます。
PNGのSVG変換で行われていること（ベクター化のしくみ）
PNGはピクセルの格子を保存する形式です。一方のSVGは図形、つまり点と曲線で表した輪郭を保存します。一方からもう一方に変換するには、隣り合う似た色のピクセルを領域にまとめ、その領域の輪郭をベジェ曲線で描きます。この処理をトレース、またはベクター化と呼びます。
svgdotは、WebAssemblyにコンパイルしたオープンソースのVTracerエンジンを使っています。画像全体をカラーのままトレースし、図形をレイヤーとして重ね、透明な部分は透明のまま残します。透過背景のロゴは、SVGでも透過背景のままです。
PNG SVG変換に向く画像・向かない画像
トレースが得意なのは、ロゴ、アイコン、バッジ、線画、サイン、シンプルなイラスト、大きな文字など、平面的な画像です。輪郭がはっきりしていて色数も限られているため、少数のきれいな図形になります。
写真は事情が違います。色調が変わるたびに新しい図形ができるため、仕上がりはポスター調になり、パスが数千に増えることもあります。写真をベクター化したいときは、「ディテール」を下げ、色数を減らして、見やすくなるまで調整してください。
| 元の画像 | 仕上がり | おすすめの設定 |
|---|---|---|
| ロゴ・アイコン | きれいな図形、軽いファイル | カラー、ディテールは初期値 |
| 黒インクの線画・サイン | 単色のパス | 白黒 |
| ドット絵・QRコード | くっきりした四角い輪郭 | 直線 |
| 写真 | ポスター調、パスが多い | 色数を減らす、ディテールを下げる |
アップロードせずに画像をSVGに変換
多くのオンライン変換ツールは、ファイルをサーバーに送って結果を返します。svgdotではトレースエンジンを一度ダウンロードしたあと、ブラウザのタブの中で動かすため、画像はお使いのパソコンやスマートフォンの上で処理されます。何も保存されず、アカウント登録、透かし、1日の回数制限もありません。
とても大きな画像は、変換に何分もかからないよう、長辺2,000ピクセルに縮小してからトレースします。縮小したときは画面でお知らせします。
カッティングマシンや印刷に使うPNG→SVG
Cricut、シルエットカメオ、レーザーカッター、カッティングプロッターは、SVGの輪郭に沿って動きます。これらには白黒モードを使ってください。黒い部分がそれぞれ閉じた図形になり、そのままカットできます。印刷や大判出力では、カラーモードならどのサイズでも図形がくっきりしたままです。PNGでは拡大するとこうはいきません。