Inkscapeで手描きイラストをベクター化してSVGにする方法

描いた線の雰囲気が変わってしまわないか、気になりますよね。

InkscapeでSVG化

Inkscapeで手描き画像をトレースし、原画と見比べてパスを整えてからSVGで保存しましょう。

トレースで画像から編集可能なパスを作り、ノードや曲線を調整できます。ベクター画像は線や曲線を数式で表すため、大きさを変えても輪郭の鮮明さを保てます。

使えるソフトと手段

原稿を画像にする手段と、画像をパスへ変換するソフトを分けて考えると、作業を整理しやすくなります。

ソフト・手段	種類	主な役割
スマホのカメラ	撮影	紙の手描き原稿を画像にする
Inkscape	ベクター編集	画像のトレース、パスの修正、SVG保存を行う
PNG・JPEGのまま利用	画像利用	パスへ変換せず、元画像を使う

• 紙の原稿は撮影して画像にし、デジタルで描いた原稿は画像データを用意します。
• 手持ちのPCで利用できれば、新しいPCの購入は不要です。
• 決まった大きさの画像として使い、パス編集や拡大時の輪郭維持が必要なければ、元のPNG・JPEGを使う方法でも目的を満たせます。

SVG化の基本手順

作業は次の4段階です。変換直後に完成とせず、原画との比較と修正まで進めましょう。

1. 原稿画像を用意する。自動トレースには、明るい背景に黒い線やシルエットがある原稿が適しています。
2. 画像を読み込み、トレースする。残したい形に合う方式を選び、設定を変えながらプレビューを確認して適用します。
3. 原画と比較して形を整える。生成されたパスを元画像から横へ移動し、欠けや形の違いを確認します。必要な箇所はノードやハンドル、線分を動かして修正します。
4. 元画像を除き、SVGで保存する。パスだけで意図した形になっているか確認します。編集を続ける原本はInkscape SVG、他のSVG対応ソフトへ渡すデータはPlain SVGで保存します。

• 黒い部分を面として取り込むには、明るさの境界による方式を使います。線画でも、線の外周を囲む形になります。
• 線の中心を開いたパスとして取り込むには、中心線トレースを使います。面として残す方式とは完成するデータが異なります。
• トレース結果は元画像の真上に置かれます。
• 画像を読み込んでSVG形式で保存するだけでは、画像自体がパスに変わったとは限りません。

おすすめのパソコン

Inkscapeを使えるPCがなく、手持ちの端末では必要なパス修正ができない場合、私はMacBook Air 13インチ M5・16GB・512GB シルバー（日本語キーボードの標準構成）をおすすめします。macOS向けのInkscapeを導入し、原画との比較から形の修正、SVG保存まで一台で進められる点で、この作業に向いていると考えます。13.6インチの画面を備え、原画と変換後の輪郭を本体の画面で見比べながら修正できます。

手持ちのPCでInkscapeによるトレース・修正・保存ができる場合は、買い足す必要はありません。AppleのMacBook Air公式仕様表で、M5搭載13インチモデルのメモリ・保存容量・搭載OSを確認してみてください。

原稿画像から試そう

まずは手描きの原稿画像を用意し、Inkscapeに読み込んでトレースを試しましょう。生成されたパスを横へ移動し、原画と見比べるところから始めてみてください。

作業できるPCがなく、手持ちの端末では必要な編集が難しい場合は、紹介したMacBook Airの商品ページで構成を確認してみてください。

このサイトはアフィリエイト広告（Amazonアソシエイト含む）を掲載しています。