変換したSVGの輪郭が荒いとき、問題はたいてい変換のステップではなく元画像にあります。ベクター化とは、ビットマップにある輪郭をパスとして記述し直すこと。元画像の輪郭がきれいであれば、パスにもきれいな根拠があります。圧縮で雑色の帯ができている、弧の幅が2〜3ピクセルしかない、大面積の影を伴っている——こうした欠陥は、そのまま結果に写し取られます。荒さがどの類の元画像の問題かを先に判断し、順番に入力を整理してから再変換するほうが、リトライボタンを連打するよりはるかに有効です。
画像ベクター化を開く。まずツールを替えるのは急がないでください。同じ画像で以下の点検の順番を試せば、輪郭の問題の多くは、入力を変えた時点で変化が現れます。初回のアップロード、変換、ダウンロードの完全な手順は『PNGとJPGをSVGに変換する：画像ベクター化の完全ガイド』で順を追って紹介済みなので、ここでは輪郭の問題そのものから話します。
要点
- 圧縮ノイズ、低解像度の輪郭、複雑な影という3類の元画像の問題は、すべてそのままSVGパスに写し取られます。変換が、元画像に存在しない情報を補うことはありません。
- 「元画像の情報不足」と「パスのトレース誤差」を区別します。前者はより鮮明な元画像に替える必要があり、後者は入力の整理やノードの清掃で解決できます。
- 再試行では変数を1回に1つだけ変えます。元画像の交換、背景の除去、配色の簡略化を分けて行い、改善を個別の操作に結び付けます。
- このツールはPNG、JPG、WebPを受け付け、幅と高さはともに256ピクセル以上が必要です。結果パネルの1×、2×、4×ズームは、同じ輪郭を見比べる確認に使います。
まず問題が元画像か変換結果かを判断する
SVGを結果パネルで4×まで開き、最も荒い輪郭を見つけたら、元画像に戻って同じ部分を近い倍率まで拡大して見比べます。3類の典型的な欠陥には、それぞれ位置の特徴があります。
圧縮ノイズ。 元画像が何度も保存されたり、チャットツールで転送されたりして、主体の輪郭の外側に雑色の帯ができています。変換後は輪郭に細かな小パスとささくれがぶら下がり、欠陥は輪郭の外側の一帯に集中します。
低解像度の輪郭。 元画像の解像度が低く、弧や角に使えるピクセルがわずかです。変換後の円弧に段差が出て角が丸まり、欠陥は曲線の折れ目に集中します。
複雑な影。 元画像にやわらかいグラデーションやドロップシャドウがあり、移行の帯に明確な境界がありません。変換後は多層の近似色ブロックに分解され、欠陥は影の移行領域に集中し、色もブランドカラーと対応しなくなります。
見比べたら、1つに分類します。これがこの先の路線を決めます。元画像を拡大した時点で輪郭自体が荒い、途切れている、ノイズが出ているなら情報不足で、入力の整理やより鮮明な版への交換にこそ意味があります。元画像の拡大では輪郭がきれいなのに、SVGにノード、段差、細かいパスが増えているならパスのトレース誤差で、再試行や後処理のノード清掃で解決できる可能性があります。このステップを飛ばして変換を繰り返すと、2類の問題が混ざってしまいます。
輪郭の邪魔になる背景を取り除く
背景は、余計なパスの最も一般的な供給源です。主体と背景を分離してから変換すれば、パスの数も輪郭のきれいさも明らかに変わります。
単色背景の処理は最も簡単です。まず四周の余分な余白を切り取り、主体が画面いっぱいになるように。それから地の色を削除し、透明背景のPNGとして保存し直します。余白のカットは最もコストの低い入力改善で、同じ画面の中で主体の輪郭がより多くのピクセルを占めます。切り取った後の幅と高さが、引き続き256ピクセル以上になるよう注意してください。小さく切りすぎると、アップロードチェックを通れません。
複雑な背景（模様、グラデーション、実写写真）は、先に主体を分離しなければなりません。そうしないと、地の模様が図形と一緒にパスにならって、変換後の輪郭は背景の破片だらけになります。自動分離が必要なら、まずロゴ背景除去ツールで処理し、出力された透明背景の画像を改めてアップロードして変換します。切り抜き操作の詳細は背景除去のガイドで既に説明しているので、ここでは繰り返しません。
背景除去について、もう1つ知っておいてください。分離ツールが出力するのはビットマップで、主体を背景から取り出すだけが仕事で、主体自体の鮮明さは上げません。元画像の主体がすでにぼやけていれば、背景を除いてもぼやけたままです。前の節に戻って、情報不足かどうかを判断してください。
小文字、細線、グラデーションへの対処
この3類の要素は変換で最も歪みやすいので、対処の順番は固定です。より鮮明な版を探す、文字と図形を分割する、最後に影を簡略化します。
まずより鮮明な版を探す。 小さな文字は低解像度の元画像では筆画同士がくっつき、字の穴（アルファベットのOの中空など）は1〜2ピクセルしか残らず、どんな変換も、この細部を無から復元することはできません。公式サイトのヒーロー画像、名刺、販促物、ブランドブックにはより大きな版が隠れていることが多く、見つけたらそれを優先します。細線も同様で、ヘアラインは低解像度画像では切れ、変換結果は途切れたパスになります。
文字と図形を分割する。 文字と図形が1枚の小さな画像に混在するときは、文字の領域と図形の領域を別々に切り出して変換し、デザインソフトで位置を合わせて組み戻します。それぞれがより高い割合の画面を使え、小さな画像を丸ごと強引に変換するより確実です。
影を簡略化する。 やわらかいグラデーションとドロップシャドウは、多層の色ブロックパスに分解されます。ブランド規定が許すなら、先に影を外し、グラデーションを単色のメインの色ブロックに置き換えてから変換します。グラデーション自体がブランドアイデンティティの一部なら、ブロック分けの近似を受け入れるか、その部分だけビットマップのままにします。
文字について、ここで1つの事実を押さえてください。変換出力の文字は輪郭のパスであって、編集可能なフォントのテキストではありません。変換で元のフォントに戻ることもありません。元のフォントファイルがない場合、どんな変換による「復元」も期待せず、輪郭から似たフォントを推測して、ブランドフォントとして使うことも避けてください。コピーを変える必要があるときは、確認済みのフォントでデザインソフトに再度レイアウトします。
変数を1つずつ変える方法で再試行する
入力を何種類か整理したら、一度にすべて差し替えないでください。変数は1回に1つだけ。そうすれば改善を原因に結び付けられます。
操作では、3つを固定します。
- 入力をラウンド分けする。 第1ラウンドは元画像をそのまま変換してベースラインに。第2ラウンドは背景除去版にだけ差し替え。第3ラウンドは配色簡略化版か、より鮮明な版にだけ差し替えます。入力を替えるたびに、プレビュー右上の削除ボタンを押して、新しいファイルをアップロードしてから変換します。
- 確認方法を固定する。 毎ラウンド、同じ最も荒い輪郭を見て、同じ倍率で見比べます。結果パネルの1×、2×、4×が、そのまま統一の基準になります。
- 結果を保管する。 3つのSVGにそれぞれ名前を付けて保存します。例：logo-元画像.svg、logo-背景除去.svg、logo-簡略化.svg。並べて輪郭の差を比べます。
2ラウンドの結果に目に見える差がなければ、問題はこの入力にはありません。第1節に戻って、分類し直します。差があれば、その方向で続け、すべての変更を一度に積むことはしません。同じ入力でもう一度試したいときは、結果の下の「再ベクター化」を押して、現在の結果を消してから再送信するだけです。
変換結果を使うか、手描きで作り直すかを決める
どこかのラウンドまで進んだら、決断は1つだけです。このSVGで足りるか、手描きで描き直す価値があるか。
変換結果のまま進めるケース：図形が色ブロック中心で曲線が規則的、小文字と細線が少なく、用途がWeb、UIアイコン、中サイズの素材。4×で輪郭がきれい、透かしが完全、最小の文字サイズが判読できれば、そこで止めて構いません。パス数の最少を追う必要はありません。
手描きで作り直すケース：小文字が多く、ヘアラインが密集し、グラデーションがブランド認識の核である、または用途が大判の印刷や看板で、わずかな段差も切れ線も、肉眼で見える大きさに拡大される。この場合は、ベクター編集ソフトで元画像をもとに主要な輪郭をなぞり直すほうが、無限のリトライより通常は速いです。
変換結果がほぼ使える域に達して、散発的なささくれが残るだけなら、SVGをベクター編集ソフトに読み込んでノードを清掃します。余分なノードの削除、細かいパスの統合、角の丸めの整頓です。これは再試行の後の仕上げの工程で、操作は外部ソフトで行い、画像ベクター化ツール自体はノード編集を提供しません。
判断の基準は、常に用途に従います。実際の表示サイズが小さいほどパス精度への許容は大きくなり、拡大倍率が大きい場面ほど、最初から最良の元画像を探す価値が高まります。
よくある質問
画像を先に拡大してからSVGに変換するのは、有効ですか？
効果は限定的です。拡大はピクセル数を増やせますが、補間で補われたピクセルは既存の輪郭を広げるだけで、輪郭の情報は増えず、ノイズも一緒に拡大されます。256ピクセルのしきい値に満たない小さな画像を、提出条件に合わせるには適していますが、輪郭を本当にきれいにしたいなら、解像度の高いオリジナル版を探すことを優先してください。
フォト調のロゴでパスが多くなるのは、なぜですか？
写真や連続するグラデーションには明確な色ブロックの境界がなく、トレースは大量の小さな色ブロックで移行を近似するしかありません。パス数は細部とともに膨れ上がり、ファイルは大きく、編集も困難です。この種の素材は、高解像度のビットマップのまま保つほうが適しています。どうしてもベクター版が必要なら、先に色ブロック化した簡略版にしてから変換するか、象徴的な図形の部分だけを個別にベクター化します。どの素材を変換し、どれをビットマップのままにするかは、『ロゴはPNGかSVGか：Web、ポスター、印刷での選び方』に場面別の選択表があります。
変換が現在のタスクに十分かどうかの判断方法は？
最終的な使用サイズで確認します。結果パネルを4×にして、曲線、透かし、細線、小文字の4か所を見て、1×に戻して、色のブロック分けが受け入れられるかを見ます。WebとUIの用途は実際の表示サイズでの鮮明さで測り、大判の印刷と看板はどんな欠陥も拡大するため、基準もそれだけ上がります。同じ輪郭が2ラウンドの結果の間で目に見える改善を示していれば、このラウンドで十分です。
元画像を整理して、もう一度変換する
最も荒い輪郭から始めます。まず問題を分類し、対応する方法で新しい入力を1つ整え、画像ベクター化を開くで新しいファイルに替えて再変換します。完了したら、同じ輪郭、同じ倍率で見比べ、改善が見えたら次の1か所へ進みます。
