画像をIllustratorで編集可能なSVG線画に変換する方法

取扱説明書の制作を請け負ったデザイナーのもとに、線画一式が届きます。クライアントの要望はひとつだけ。「印刷でつぶれないよう、全体の線をもう少し太くしてほしい」。ファイルはSVGなので、本来は30秒で終わる作業のはずです。すべて選択して、線幅の数値を上げれば終わり。ところがIllustratorで開いてみると、調整できる「線」がどこにもありません。線に見えていたものはすべて、黒く塗りつぶされた細長い図形——2本の輪郭線の間を塗りで埋めたパス——だったのです。線幅を変えるにはパスを1本ずつオフセットし直すしかなく、30秒の作業が丸一日仕事になります。

「画像 SVG 変換」で検索してこの種のファイルにたどり着いたことがあるなら、原因はIllustratorでもあなたでもありません。SVGの「トレースのされ方」にあります。

SVGなのにIllustratorで編集しづらいのはなぜか

「SVG」はあくまで入れ物の名前で、中身がどう作られているかまでは保証しません。無料の画像→SVG変換ツールの多く、そしてIllustrator標準の画像トレース（デフォルト設定）は、暗い領域の「輪郭」を検出し、その領域を塗りつぶしパスで包む方式です。Adobeの画像トレースのドキュメントにもある通り、ラスター画像はベクター「シェイプ」に変換されます。ロゴやシルエット、レーザーカット用途ならそれが正解です。

しかしテクニカルイラストには不向きです。描かれた1本の線は、輪郭トレースを通すと「黒で塗られた細長い多角形」になります。拡大縮小も印刷も問題ありませんが、技術図面でいちばん頻繁に必要になる操作——線幅の変更——が、編集可能なプロパティではなくなってしまう。Illustratorのコミュニティで「トレースしたら線の中心のパスではなく輪郭が返ってくるのはなぜ？」という質問が繰り返されるのは、このためです。

取扱説明書・IFU・組立ガイドに本当に必要なのはストロークベースのSVGです。目に見える線1本1本が fill: none と stroke-width を持つ1本のパスとして、描線の中心（センターライン）に沿って存在する状態。こうなっていれば線幅はただの数値であり、Illustratorで一括変更できます。

「塗りの輪郭」と「ストローク／センターライン」の違い

Illustratorの画像トレースには「中心線」ストロークモードもありますが、単純な等幅アートワーク向けのチューニングで、実際の製品図では曲線が細切れになったり近接した線が結合したりしがちです。トレース後に修復するより、生成の段階からストロークベースのSVGを作る方が確実です。

ワークフロー1——シンプルな図版：SVGを直接生成する

工具、操作パネル、ジェスチャー図、単体の製品ビューなど、比較的シンプルな対象なら、テキストで記述してSVGを「ネイティブの出力形式」として生成するのが最短です。ManualFigはプロンプトをストロークネイティブなSVGモデルに渡すため、パスは後からトレースされるのではなく、最初からセンターライン状のストロークとして生まれます。

下のデスクランプは、出力モードにSVGを選び、次のプロンプトから直接生成したものです：

このファイル（SVGをダウンロード、4.3 KB）の中身は38要素——パス28、円7、直線2、ポリライン1——で、すべてが fill: none のストロークです。実効的な線幅は1種類（1000×750のviewBoxに対して2.5）に揃っており、Illustratorで開くと均一なストロークの集合としてそのまま編集できます。

ワークフロー2——複雑な図版：まず画像を生成し、あとからSVGに変換する

SVGの直接生成には複雑さの上限があります。細かい機構部品、密な内部構造、リアルな比率が必要な図版は、モデルが自由に描けるラスター画像のほうが仕上がりを追い込みやすい。そういう場合は2段階に分けます。まずラスターの線画を生成（またはアップロード）して内容を完全に固め、それからSVGに変換します。

最初に生成したラスターのランプ（通常のPNG線画）：

同じ画像をManualFigでワンクリックSVG変換した結果：

変換後のファイル（SVGをダウンロード、3.8 KB）は33要素。アームのセグメント、ヒンジ、台座の楕円といった線画部分はストロークベースで、線幅は6つのCSSクラスに一度だけ定義されているため、Illustratorからはクラス単位でも選択単位でも再スタイルできます。一方で、塗りつぶしの図形も2つ残っています。矢印の先端です。ここは正確に書いておきます：

これが現時点の技術の誠実な姿です。矢印の先端のような「意図的にベタで描くべき記号」は塗りのままでよく、重要なのは、あとから太さを変えたくなる「図面本体の線」がストロークとして届くことです。

同じランプを2通りで作ると、何が変わるか

上の2つのファイルをダウンロードしてIllustratorで並べて開いてみてください。選択と再スタイルの手触りの違いは、どんなスクリーンショットより雄弁です。

Illustratorでの線幅調整の手順

ストロークベースのSVGなら、冒頭の「全体を太く」は本当に30秒で終わります：

1. IllustratorでSVGを開く（編集するなら「配置」ではなく「開く」）。
2. 選択 → すべてを選択し、コントロールパネルまたは線パネルで線幅を入力——ストロークを持つ全パスが一括で更新されます。
3. 部分的に変えたい場合は選択 → 共通 → 線幅で同じ太さのパスだけを選択し（例：主要輪郭とヒンジのディテールを別々に）、個別に調整します。
4. 拡大縮小の前に**「線幅と効果も拡大・縮小」**（環境設定 → 一般）を確認し、線幅を意図どおりスケールさせる／固定するを選びます。

変換ファイルは線幅が少数のクラスにまとまっているため、手順3が特に効きます。上のランプの6種類の線幅は、6段階の線のヒエラルキーとしてそのまま扱えます。

変換前に背景を消しておくべき？

変換に関しては、白背景または無地の背景であれば図の境界が明確なので、ManualFigで生成した線画はそのままきれいに変換できます。背景がにぎやかな写真やスクリーンショットを変換したい場合は、写真を直接ベクター化するのではなく、先に線画へ変換してください（写真を線画に変換するガイド参照）。写真の陰影をそのままベクター化すると、まさに本記事が避けようとしている「塗り領域の寄せ集め」ができあがります。

最終納品はPNGとSVGのどちらにすべきか

短くまとめると：図版が「1か所・1サイズ」でしか使われないならPNG、2サイズ以上で使われる、あるいは下流の誰かが再スタイルする可能性があるならSVGです。判断基準の詳細は製品線画の活用ガイドにまとめています。印刷とWebの両方に出す取扱説明書なら、ストロークベースのSVGを原本として保管するのが安全です。PNGへの書き出しはワンクリックで済み、線幅はいつでも1回の編集で変えられます。

自分の図版で試す

この記事の2つのランプは、どちらも同じツールから手作業のクリーンアップなしで出力したものです：

1. ManualFig を開き、図版をテキストで記述するか、既存の画像をアップロードする。
2. 直接生成なら出力モードでSVGを選択。画像を生成した場合は、結果のSVGに変換ボタンを押す。
3. 書き出されたSVGをIllustratorで開き、ストロークを必要に応じて再スタイルする。

シンプルな図はSVGで直接生成する。ディテールが必要な図は、まず画像で仕上げてから変換する。どちらの経路でも、線は「線のふりをした輪郭」ではなく、線として届きます。

関連ツール:画像付き取扱説明書ジェネレーター、取扱説明書向け写真→線画変換。