# 画像をSVGにトレースする方法

拡大したPNGは階段です。SVGは描くための指示なので、どんな大きさでも鮮明です。前者を後者にすることをトレースと呼びます。形には見事に効き、写真には効きません。その違いは、始める前に理解しておく価値があります。

[画像→SVG変換ツールを開く](https://abox.tools/ja/image-to-svg/): ひとつの形に、ひとつの輪郭。あってはいけないものを指さすだけです。

最終更新 2026年8月31日

## 短い答え

[画像をSVGに](https://abox.tools/ja/image-to-svg/)を開き、画像を入れて、赤い線を見てください。その線がいまの輪郭で、その元になったピクセルの上に重ねて描かれています。形に沿っていれば、ファイルを受け取ってください。あってはいけないもの、たとえばゴミ、ホチキスの針、キャプション、影が入っていれば、それをクリックすれば消えます。

以下はすべて、これがそもそもうまくいくかどうかを決める2つの問いについてです。**手元の画像は形なのか、写真なのか**。そして**形を見つける2つの方法のどちらが必要か**。

![2つの表示枠。左は赤いトレース輪郭を重ねた画像、右は完成したSVG。](https://abox.tools/screens/trace-an-image-into-an-svg/outline.webp)

輪郭は画像の隣ではなく、画像の上に重ねて描かれます。この問いに答えが出せる場所はそこしかありません。輪郭が正しいか間違っているかは、そのピクセルとの関係だけで決まるからです。

## トレースは変換ではなく、写真はトレースできない

JPEGをPNGに変換するのは変換です。同じ画像を別の書き方で表しているだけで、途中で何も判断されません。トレースはそうではありません。ほぼすべてを捨てて、ひとつのもの、つまり形の境界だけを残し、その境界を曲線として書き表します。画像にはっきりした形が入っていれば、それはまさに望んだものです。部屋の写真なら残すべき形がなく、戻ってくるのは、似た色のかたまり一つひとつが別々のしみになったものです。

これは技術の進歩を待っている制約ではないので、数字がどうなるかを率直に言っておく価値があります。A4一枚の線画は、形3つと6キロバイトにトレースされます。手書きの文章一枚なら、形50個と150キロバイト。写真はわずか1メガピクセルで**形4000個と1.5メガバイト**になります。JPEGより大きく、開くのは遅く、写真には見えません。その時点でツールは描くのをやめてそう伝えます。ダウンロードしてから気づかせる代わりに。

![写真をトレースしたときに表示される警告。何千もの独立した形と、巨大なファイル。](https://abox.tools/screens/trace-an-image-into-an-svg/photograph.webp)

写真を線画のつもりでトレースすると、こうなります。ファイルはそのままダウンロードできます。ページはただ、それが図であるふりをしないだけです。

きれいにトレースできるもの。

- ロゴ、マーク、モノグラム
- ステンシル、判子、カット用データ
- 署名、手描きのレタリング
- 線画、ハッチング、漫画のペン入れ
- シルエット、そしてすでに白地に黒になっているものすべて

写真でうまくいく仕事がひとつだけあり、それは別の仕事です。物をひとつ、塗りつぶしのシルエットとして背景から切り抜くこと。2つ目の設定は、そのためにあります。

## 形を見つける2つの方法

トレースには1ピクセル1ビットが必要です。中か、外か。それを決める方法は2つあります。

**明暗**は、各ピクセルがある値より暗いかを問い、その値はこちらで計算します。紙の上のインクにはぴったりで、ロゴ、スキャン、ステンシルにはこれを選んでください。間違えるときは、たいてい目に見える形で間違えます。細い線が生き残り、紙まで灰色にならないところまで、しきい値を動かしてください。

**被写体**は別の問いを投げかけます。写真では、最初の問いに答えがないからです。暗い灰色の石の上に立つ暗い赤の像は、暗い上に暗いものです。両者を分ける明るさがないので、どんなしきい値にも分けられません。代わりにこちらは、画像の縁に沿った帯から何が*背景*かを学び、各ピクセルをそれと比べ、背景でない最大のものを残します。隅のキャプションは最大のものではないので、トレースされずに捨てられます。

前もって知っておく価値のある失敗がひとつあります。被写体が二辺や三辺からはみ出すほど詰めて切り抜かれた写真です。縁の大半が被写体になるので、モデルは被写体そのものの色を学び、答えは裏返しになります。スライダーをいじっても直りません。間違っていたのは計算ではなく前提だからです。*縁から背景を学ぶ*を外し、*クリックで「これは背景」と伝える*にチェックを入れて、背景を2、3回クリックしてください。

## 間違えた部分は、指し示して直す

しきい値は画像全体に対するひとつの数値で、必ずどこかで間違えます。影がインクになり、ホチキスの針が生き残り、Oの中が埋まります。どれも局所的な間違いで、局所的な明白な直し方があります。その直し方はもうひとつのスライダーではなく、そのものを指し示すことです。

図に入るべきでないものをクリックすれば消え、もう一度クリックすれば戻ります。クリックひとつで**その色のかたまり全体**が選ばれるので、1回でゴミひとつや判子ひとつがまるごと外れ、ピクセルひとつではありません。囲まれた背景をクリックすると、今度はそこが塗りつぶされます。穴であってはいけない穴は、こうして塞ぎます。画像の下の行には、クリックする前に、それがどちらでどれだけの大きさかが表示されるので、画像の大半を持っていくクリックが不意打ちになることはありません。

修正はしきい値とは別に保持されるので、あとでスライダーを動かしても捨てられません。画像を反転すれば修正も一緒に反転します。消したゴミは、背景に開いた穴として戻ってくるのではなく、消えたままです。

## 滑らかさの2つの数値と、触るべきとき

**細かさ**は、線を単純化するときにピクセルからどれだけ離れてよいかです。1を下回ると何も起こりません。階段の一段は本来属する線からまるまる1ピクセル外れているので、それより小さな許容量ではすべての段が残り、単純化するものが何もなくなります。2を超えると、本物の曲線まで削り始めます。指定しない限り形ごとに計算されるのは、ひとつの数値では、人物の全身と文字の2ピクセルの縦棒を同時に扱えないからです。

**角の鋭さ**は、曲がり角が曲線に丸められずに角として残るために、輪郭がどれだけ曲がる必要があるかです。これは判断の半分にすぎません。頂点は、隣から十分離れていれば角として残り、それだけで明白な角はすべて拾えるので、この数値が決めるのは常に緩やかな曲がりだけです。20度ほどを下回ると、すべてが角になり、円は多角形になって戻ってきます。

たいていの画像では、どちらも触る必要がありません。知っておく価値があるのは、必要になる2つの場合のためです。ごく小さな文字のスキャンはより細かさを求め、マシンでカットする形は、たいていより少ない細かさを求めます。

## 受け取るもの、そしてその使い道

中に`<path>`がひとつ入ったファイルです。輪郭は一方向に、その中の穴は逆方向に回っています。だからこそ、40個の穴のある形が、塗りつぶし規則を設定することなくひとつの要素でいられます。Illustrator、Inkscape、Figma、ブラウザ、そしてほとんどのカッティングソフトが同じように読みます。

![最後のステップ。図に含まれる形と点の数、ファイルの大きさ、ダウンロードボタン。](https://abox.tools/screens/trace-an-image-into-an-svg/save.webp)

ダウンロードの前に、この数を一目見ておく価値があります。図なら点は数十か数百。数千なら、その画像は写真だったということです。

逆方向、つまりすでにSVGがあってPNGが必要な場合は、[別の仕事で、別のガイドがあります](https://abox.tools/ja/guides/convert-an-svg-to-png/)。トレースには元に戻せるところがありません。ここから出てくるSVGはその形を新しく描いた図であって、元になった画像ではありません。