本文へスキップ

画像をSVGに(ベクター化)

Image to SVG

ビットマップを、写真よりロゴや線画に向いた調整でSVGのパスに起こします。

トレースは画像をいくつかの平坦な色に減色し、各領域の境界をたどってパスにします。ロゴや印章、線画には効きます。写真では、元より大きくて見た目の悪い、何千本ものパスができます。

🔒 ブラウザの中だけで動きますvectortracesvglogo

ロゴか線画を置いてください

平坦な色でできた絵はきれいにトレースできます。写真はそうなりません。

使い方

  1. 平坦な色の素材を置きます

    スキャンしたロゴ、署名、PNGしか残っていないアイコン——ベクターが最初からなかったのではなく、失われた場合です。

  2. 色数を決めます

    白地に黒のマークなら2つ。素材が本当にそれ以上の平坦な色を持っているときだけ増やします。1色増えるごとに、パスの層が1つ増えます。

  3. 最小領域の面積を上げて粒を落とします

    スキャンには、色の違う孤立したピクセルがそこら中にあります。この面積を下回る領域は、パスにならずに周りへ吸収されます。

  4. パスの数を確かめます

    トレースしたロゴなら数十本です。300を超えるとページがそう書きます。素材ではなく写真であることの、それが徴だからです。

よくある質問

写真のトレースが、なぜこんなにひどいのですか

領域がないからです。写真は連続した階調なので、減色すると、なかったはずの境界が作られ、その一つひとつがパスになります。出力はJPEGより大きく、しかも不正確です。

トレースしたSVGは元と正確に一致しますか

しません。境界はピクセルの格子の上でたどるので、元でなめらかだった曲線は、わずかに段の付いた多数のセグメントのパスとして返ってきます。復元ではなく再構成です。

結果はどう使えばいいですか

SVG最適化に通してください。トレースしたファイルは必要以上の精度を持っています。そして、ずっと使う素材にするなら、エディタでパスを整える手間は見込んでおいてください。

ここから渡せます

次の一手

このツールが出したものをそのまま受け取れる道具です。