PNGをSVGに変換

計算方法

PNGをSVGに変換するとは、ピクセルの画像を、画質を落とさず自由に拡大できるベクターの形に変えることです。このツールは、画像の色を小さなパレットにまとめ、各色の面の縁をたどって、SVGのパスを書き出します。ブラウザの中で処理し、アップロードも登録も不要です。

使い方

1. PNG・JPG・WebPをドラッグするか、選択するか、Ctrl + Vで貼り付けます。
2. 色数・細かさ・なめらかさ・背景を設定します。SVGは元の画像の隣にすぐ表示され、設定を変えるたびに更新されます。
3. SVGをダウンロードして、Inkscape・Figma・Illustrator・Webページなどで使います。

向いているもの・向いていないもの

• 向いている：面がはっきりしていて色の少ないロゴ・アイコン・線画・シルエット・ピクトグラム・スキャン。
• あまり向かない：写真や細かいグラデーション。平らな色の島（ポスタリゼーション）になります。これは再現ではなく、表現上の効果です。
• 画像内の文字は編集できる文字ではなく、図形になります。

制限

結果はきれいなトレースであり、元のデザインデータではありません。印刷やロゴの原型に使う場合は、ベクターのソフトで確認してください。権利を持っている画像だけを使ってください。

• 50 MBまでの画像。トレースのため、長辺が最大1,400ピクセル（粗い500、標準900）に縮小されます。SVG自体は自由に拡大縮小できます。
• グラデーション・影・透明度の段階は再現しません。半透明の縁は、不透明か空白のどちらかとして扱います。

プライバシー

画像は端末の外に出ません。何もアップロードされません。次の作業にはSVGをPNGに変換、背景を削除、画像を圧縮が使えます。

白黒モード・比較スライダー・複数画像

カラーモードで「白黒」を選ぶと、しきい値で画像を白と黒に分けてからトレースします。線画、スタンプ、署名から、きれいで軽いSVGを作れます。スライダーが「自動」のときは、ツールがしきい値を自動で決めます（大津の方法）。値を大きくすると、黒になる部分が増えます。プレビュー下のスライダーを動かすと、同じ位置で元画像とSVGを見比べられます。その上の行には色数、パス数、ポイント数、ファイルサイズが表示され、設定の影響がすぐに分かります。画像は一度に20枚まで追加でき、設定はすべてに適用されます。「すべてZIPでダウンロード」を押すと順番にトレースします。表示中の画像のSVGコードはワンクリックでコピーでき、HTMLにそのまま貼り付けられます。

よくある質問

出典・根拠

• W3C – Scalable Vector Graphics (SVG) 1.1 (Second Edition): Paths
• W3C – SVG 1.1: fill-rule (nonzero, evenodd)
• Wikipedia – Ramer–Douglas–Peucker algorithm
• Wikipedia – k-means clustering
• W3C – Portable Network Graphics (PNG) Specification (Third Edition)
• MDN – HTMLCanvasElement: getImageData() (Pixeldaten im Browser)

更新日：2026年10月2日 · 編集方針