SVGのノードが多すぎる？自動トレース結果をきれいに整える方法
自動トレースしたSVGは不要なアンカーポイントが何百も付き、編集やカットが遅くなりがちです。その原因と、きれいなパスを得る方法を解説します。
PNGをSVGにトレースし、編集を始めようと開いたら、パスがアンカーポイントで埋まっていました。5、6個で描けそうな曲線に、何百個も密集しています。少し形を動かすたびに、頼んでもいない十数本のハンドルと格闘することになります。
心当たりがあっても、ベクター化ツールが壊れているわけではありません。多くの自動トレースツールと同じく、図形を描く代わりにピクセルを写し取っているのです。なぜそうなるのか、思った以上に作業が遅くなる理由、最初からきれいなベクターを作る方法を解説します。
計測方法：この記事の数値は、表示している特定の比較ファイル内でパスを選択して数えたものです。個別の例であり、すべてのトレースツールや画像の平均ではありません。
「ノードが多すぎる」とはどういう状態か
SVGのパスは、線分や曲線を形作る命令と座標で記述されます。エディターは関連する座標をアンカーポイント、またはノードとして表示し、ベジェ曲線には方向ハンドルを付けます。適切に配置した少数のアンカーで、長く滑らかな曲線を表現できます。W3CのSVGパス仕様を参照してください。 滑らかな曲がりの途中に不要な角が1つある場合は、ベジェ曲線の接合部の修正で、アンカーを動かさずハンドルをそろえる方法を確認できます。
問題は、図形に必要な数を大きく超えるアンカーがある場合です。デザイナーなら5点で描く曲線が、50点になってしまいます。画像は一見きれいでも、内部のパスは複雑です。
次の状態なら、ノードが膨らみすぎている可能性があります。
- 単純な曲線に、数インチごとではなく数ピクセルごとにアンカーポイントがあります。
- 1つの図形を選ぶと、数個で済みそうな箇所に何十個もの点が表示されます。
- 作品の単純さに比べて、ファイルが驚くほど大きくなっています。
自動トレースがノードを増やす理由
従来のトレースツールは、ラスター画像から境界や中心線を導き出し、ベクター曲線で近似します。Adobeの画像トレースには「パス」「コーナー」「ノイズ」などの設定があります。Potraceは、ビットマップの輪郭に対する多角形ベースの曲線近似アルゴリズムを公開しています。(Adobeの画像トレースオプション、Potraceの論文)
問題は、その境界がどこにあるかです。PNGには、画面上で輪郭を滑らかに見せる、柔らかい半透明のピクセル、つまりアンチエイリアスがあります。トレースツールにはその縁が少し揺れた線に見えるため、揺れの1つひとつを追う点を追加します。「これは円弧か、直線か」と判断するのではなく、細かなぶれを含めてピクセルの輪郭を写し取ります。どれほど細かく追うかはツールによって大きく異なります。主要なAI画像ベクター化ツールの比較はこちらです。
パスデータそのものにも違いが現れます。あのフクロウの耳の房を1つ、トレースした場合ときれいに描いた場合では、おおむね次のようになります。
<!-- Auto-traced: one ear tuft, 40+ points -->
<path d="M312.4,98.1 C313.0,97.8 313.9,97.2 314.6,96.9 C315.2,96.7
316.1,96.4 316.8,96.2 C317.4,96.0 318.3,95.7 319.0,95.5 ...(many more) Z"/>
<!-- Clean: the same tuft, 6 points -->
<path d="M312,98 C320,70 360,68 372,96 C378,112 340,140 312,98 Z"/>同じ曲線でも、一方はすべてのピクセルを写したもので、もう一方は図形です。
作業が遅くなる理由
密なパスは、エディター内で雑然として見えるだけではありません。選択して形を変えるアンカーが増え、パスデータが大きくなり、その後のツールが処理する線分も増えます。影響は作品、エディター、マシン、書き出し設定によって変わります。ノード数は診断の目安であり、万能な合否基準ではありません。
| 密なトレースパス | 単純なパス | |
|---|---|---|
| アンカーポイント | 確認する点が多い | 確認する点が少ない |
| 編集 | 1回の変更に関わるハンドルが多い | 直接形を変えやすい |
| ファイルサイズ | パスデータが多くなりがち | パスデータが少なくなりがち |
| カット作業 | 確認する線分が多い | 加工経路の形状が単純 |
デザインツールでは
IllustratorやFigmaでは、余分なアンカーの1つひとつが、本来の修正をする前に、避けて選択したり、取り除いたりする対象になります。きれいな曲線なら、1、2点を動かすだけで形を変えられます。ピクセルを写した曲線では点の集まり全体を扱う必要があり、滑らかさを保つのも大変です。
カッティングマシンでは
カッターはベクター形状から加工経路を導き出すため、不要な微小線分は単純化してテストカットする価値があります。ただし、読み込みやカットの失敗が、ノード数だけに起因するとは考えないでください。Cricutは、パターン塗り、クリッピングパス、編集可能なテキスト、埋め込みラスター画像など、非対応のSVG機能を別途案内しています。Cricutの非対応項目ガイドを参照してください。 レーザーで使うなら、レーザー向けSVGを準備し、機械のソフトウェアで確認します。
Cricutがアップロードを拒否する場合は、File Too Largeエラーを診断してください。パス数やファイルサイズは、ノード数とは別の指標です。
きれいなノードにする方法
解決策は3つあります。おおむね、次の順で後の手間を減らせます。
- 変換後に単純化します。 Illustratorのオブジェクト → パス → 単純化でアンカーポイントを減らせます。Adobeは、単純化と曲線の精度、コーナーの保持を調整する設定を用意しています。情報を失わないと思い込まず、結果をプレビューしてください。Adobeの単純化ドキュメントを参照してください。
- トレースの細かさを下げます。 多くのツールは複雑さを減らせますが、大まかな調整です。ノードが減るまで下げると、残したかった細部まで失い始めます。
- 最初からきれいに作ります。 初めからきれいなパスを出力するツールでベクター化すれば、修正するものがなくなります。
この最後の目標は、私たちがPerfectVectorを作った理由の1つです。元画像のピクセルの揺れをすべて残すのではなく、編集可能なベクター図形を生成するよう設計されています。ファイルを選ぶ前に、ベクタートレース品質の評価表を使って、シルエット、コーナーの再現性、ノード数、編集のしやすさを別のトレースと比較してください。
問題はイラストだけではありません。ロゴや文字も同じようにノードが増えます。鮮明な輪郭やきれいなカッティングシートのカットが必要な場面では、特に影響します。
ウェブで配信する場合は、形状を整えた後にSVGO最適化ガイドに従ってください。ファイルサイズの変化と、IDに依存するスタイルを分けて検証します。SVGが小さくなっただけでは、編集可能なパスやページの動作が要件を満たし続けている証拠にはなりません。
後の書き出し形式がDXFなら、受け渡し時の別の問題として、CNC作業における線分密度を確認してください。
作品の2つの状態を互いに変形させてアニメーションにする場合は、SVGモーフィングアニメーションのガイドで、ノードの整理時に有用な点の対応関係を保つ必要がある理由を確認できます。静止した始点と終点だけでなく、変形途中も確認してください。
試してみる
PerfectVectorの画像ベクター変換ツールにPNGかJPGを読み込んでください。ログインもクレジットカードも不要です。結果にノード数と色数が表示されるため、何かをダウンロードする前に自分で違いを判断できます。
よくある質問
SVGのノードは何個あるべきですか？ 共通の目標値はありません。形と必要な細部を保てる、最も少ない点数が適切です。この記事に表示したフクロウだけの目安では、比較したトレースが522ノード、PerfectVectorの結果が59ノードでした。すべてのツールや画像の平均ではなく、再現可能な一例として扱ってください。
ノードが多すぎるとカッティングマシンに影響しますか？ 影響する場合があります。密なパスはカット処理で扱う線分を増やし、確認や編集もしにくくなります。目に見える影響は機械、素材、速度、刃、パス形状によって異なるため、慎重に単純化し、小さなテストカットを行ってください。読み込みの問題をすべてノード数のせいにせず、非対応のSVG機能も確認します。
SVGのノード数を減らすにはどうすればよいですか？ 方法は3つあり、おおむねこの順で後の手間を減らせます。変換後にパスを単純化する方法（Illustratorのオブジェクト → パス → 単純化）は、情報を失います。トレースの細かさを下げる方法は大まかな調整で、残したい細部も失います。最初からきれいな点を置くベクター化ツールでトレースし直せば、取り除くものがなくなります。
Illustratorの「単純化」を使うだけではだめですか？ 使えます。Illustratorの単純化機能は、曲線の精度やコーナーの保持を調整しながらアンカーポイントを減らします。強い設定では角や曲線が変わるため、結果を確定する前にプレビューを使い、シルエットを比較してください。最初から単純なトレースを使うと、必要な修正を減らせます。
出典
- W3C：SVGのパス：SVGのパス命令、座標、曲線区間の規範的な定義です。
- Adobe Illustrator：画像トレースパネルのオプション：パスの適合、コーナー、ノイズ、色、トレースの複雑さを調整する公式設定です。
- Adobe Illustrator：パスを自動で単純化する：単純化の公式手順と、精度と点数を調整する設定です。
- Selinger：Potrace、多角形に基づくトレースアルゴリズム：従来型トレースツールの境界近似と曲線適合を説明する一次技術資料です。
- Cricut：画像アップロードの非対応項目：Design Spaceへのアップロードを妨げたり変えたりするSVG構造の公式一覧です。
