Convert WebP to SVG
WebP is what most sites serve now, so it is what you end up with when you save an image. Trace it into SVG paths here, in the tab, with no upload.
- 入力
- WebP
- 出力
- SVG
- エンジン
- WASM、タブ内で実行
- 価格
- 無料プレビュー
ここに画像をドロップ、または貼り付け
画像はアップロードされません。このタブ内でトレースされます。フルコンバーターを開く
プリセット
- 01ロゴ — このページ用の設定16 色
- 02線画白黒
- 03写真64 色
- 04刺繍8 色 · くり抜き
- 05ビニール4 色 · くり抜き
- 06レーザー白黒 · ポリゴン
- 出力 · SVG · PDF · EPS · DXF
- プレビュー無料・ダウンロードはPro €9.00 / 月
- ファイルはこのタブ内に留まります
vectortraceを選ぶ理由
- チケット 1 / 3
ブラウザ内で完結・非公開
エンジンはお使いの端末上のワーカーで動作するWebAssemblyです。画像がアップロードされることはないため、漏洩する心配も、削除する必要も、信用に頼る必要もありません。
- チケット 2 / 3
ラッパーではなく編集可能なパス
エンジンは画像を色領域にグループ化し、その境界を取り出してカーブをフィットさせます。出力されるのは実際の形状です — 領域ごとに1つの塗り、すべてのノードを自由に動かせます — タブ内で生成され、サーバー上で生成されることはありません。
- チケット 3 / 3
印刷・製造現場で使われる形式
アートワーク用にSVGとPDF、カッター・彫刻機・刺繍ソフト用にEPSとDXF。Illustrator、Inkscape、LibreCADで実際に開けるファイルです — 中身がJPEGのSVGではありません。
形式の基礎知識
| 形式の基礎知識 | WebP · 入力 | SVG · 出力 |
|---|---|---|
| 種類 | Raster. Lossy or lossless in the same container. | Vector. Paths described in XML. |
| 拡大縮小 | Blurs or pixelates past its native size. | Sharp at any size. |
| 色 | Up to 16.7 million colours with alpha, in both modes. | One solid fill per path, in a palette you can edit by hand. |
| 編集可能なソフト | GIMP, Affinity Photo, Photoshop with a plug-in, any browser. | Illustrator, Inkscape, Figma, Affinity Designer, a text editor. |
| 主な用途 | Images saved from a website, where WebP is now the default. | Web, icons, print artwork, the input to a cutter workflow. |
知っておきたいこと
WebP comes in two flavours in the same container. Lossless WebP behaves like a PNG and traces cleanly. Lossy WebP behaves like a JPEG — it is predictive and block-based — so it carries the same ringing near hard edges, and the same speckle-filter advice applies.
Both flavours support an alpha channel, so a WebP saved from a site often keeps real transparency. That survives the trace: transparent pixels become holes rather than a white plate.
Decoding is done by the browser through createImageBitmap, not by a library we ship, so WebP support here is exactly your browser WebP support — which since 2020 means all of them.
仕組み
Drop the WebP
Drop or paste the .webp file. Lossless and lossy WebP are both decoded by the browser.
Trace it
Logo for a flat mark, photo for a photograph. Watch the colour count — a lossy WebP often needs a smaller palette than it looks like it does.
Save the SVG
Export and open it in Illustrator, Inkscape or Figma. Alpha in the source becomes holes in the geometry.
ベンチマーク
宣伝文句ではなく実測値。コーパス、手法、実行で得られたすべての数値を完全に公開しています。
手法 → /benchmarks- boundary error, p95
- 0.09 px
- region-count error
- 0.000
- node-count ratio
- 1.00×
よくある質問
- 01Do I need to convert WebP to PNG first?
- No. The browser decodes WebP natively and the worker traces the decoded pixels, so an intermediate PNG would only add a re-encode and a lost alpha channel.
- 02Does animated WebP work?
- The first frame is traced. An animation is a sequence of rasters and an SVG of it would need one path set per frame, which is a different product; export the frame you want and trace that.
- 03Is my image uploaded?
- No. The tracer is WebAssembly running in a Web Worker in this tab, so the pixels stay on your machine. There is no upload step, which is also why it keeps working with the network off.
関連
関連する変換