画像 SVG 変換 — PNG・JPGをベクターに
色数と精細度のスライダーで調整できるビットマップ→SVGのトレースツール
ブラウザー内で処理・アップロード不要
画像を数色に減らし、色ごとの領域の輪郭を直線と曲線でなぞります。ロゴ、アイコン、文字、シンプルなイラストに向いています。写真はポスターのような仕上がりになり、ファイルが非常に大きくなることがあります。グラデーションややわらかい輪郭はそのままでは残せません。
SVGに変換する画像をドロップ
JPG、PNG、WebP、GIF、BMPを1枚（50MBまで）。Ctrl+V（Macでは⌘V）で貼り付けることもできます。アップロードはされません。
SVGで使う色の上限です。ロゴなら2〜8、イラストなら16以上を目安にしてください。
高いほど輪郭に忠実になり小さな点も残りますが、ファイルが大きくなり時間もかかります。1はシンプル、5は元の画像に最も近い仕上がりです。
どんなツールか
ビットマップ画像（PNG、JPG、WebP、GIF、BMP）をSVGのベクター画像に変換するツールです。ビットマップは画素の格子でできていて、拡大するとモザイクのようになります。SVGは線と曲線を記録するため、どんな大きさでもくっきりしたままです。ロゴの元データをなくして小さなPNGしか残っていないとき、Webサイト用のアイコンが必要なとき、レーザーカット・刺しゅう・ステッカー用のベクターが欲しいときに役立ちます。
先に限界を知っておきましょう。画像を数色に減らし、色ごとの領域の輪郭をなぞるため、グラデーション、やわらかい輪郭、写真の質感はそのままでは残せません。絵柄がフラットなほど、きれいに仕上がります。
使い方
- 画像をドロップするか、画像を選択 をクリックします。Ctrl+Vで貼り付けることもできます。
- 色数 を設定します。白黒のロゴは2、数色のロゴは4〜8、イラストは16以上が目安です。
- 精細度 を1〜5から選びます。高いほど輪郭に忠実になります。
- プレビューと元の画像を見比べて、SVGを保存 をクリックするか、コードをコピーします。
しくみ
- 減色：すべての画素を、サンプリングしたパレットの色に割り当て、3回に分けて調整します。同じ画像と同じ設定なら、いつも同じSVGになります。
- トレース：色の領域の境界を直線と2次曲線で近似します。精細度1は4pxの誤差を許し、輪郭の点が32個未満の図形を省きます。精細度5は0.25px以内でなぞり、小さな点も残します。
- 解析サイズ：速度のため、長辺を精細度1で300px、精細度3で700px、精細度5で1400pxに縮小して解析し、座標を元のサイズに戻します。
- 仕上げ：完全に透明な色の図形を取り除き、元の幅・高さとviewBoxを設定します。
- トレースにはimagetracerjs（パブリックドメイン）を使っています。
変換例
| 元の画像 | 設定 | 結果 |
|---|---|---|
| 黒い文字のロゴPNG、800×300 | 2色、精細度3 | 白地に黒い文字、小さなファイル |
| 4色のアイコンPNG、512×512 | 4色、精細度4 | 4色、なめらかな曲線 |
| 風景写真JPG、4000×3000 | 16色、精細度2 | ポスター風、ロゴよりずっと大きなファイル |
ベクターをPNGに戻すにはSVG PNG 変換、Webサイト用のアイコン一式はファビコン作成ツールをお試しください。
よくある質問
写真をSVGにできますか？
できますが、ポスターのように数色のべた塗りの領域になり、精細度を上げるとファイルが数MBになることもあります。写真はJPGやWebPのままにするのがおすすめで、このツールはロゴ、アイコン、文字、シンプルなイラストに向いています。
結果に小さな点がたくさん出ます。
精細度を下げると小さな塊が消え、色数を下げると似た色がまとまります。元の画像がノイズの多いJPGなら、2〜8色にするのがいちばん効果的です。
透明な背景は残りますか？
残ります。完全に透明な部分には図形を作らないため、SVGでも空白のままです。半透明の部分には色の不透明度が付きます。
保存したSVGのサイズは？
元の画像のピクセル幅・高さとviewBoxを持つため、Webでもデザインアプリでも、どんな大きさにもきれいに拡大縮小できます。
画像はアップロードされますか？
されません。解析もトレースもブラウザーの中で行います。
