Metlivi ブログ

Inkscapeで別々の曲線を、正しく塗りつぶされた1つの図形にする方法

Inkscapeで別々の曲線を1つの塗りつぶされた図形にするには、境界を構成する曲線を選択し、パス → 結合を選んでから、ノードツールで対応する端点同士をつなぎます。塗りつぶしを適用する前に、最後に残った端点のペアも閉じます。結合すると1つのオブジェクトになり、端点をつなぐと境界が連続します。Inkscape:ブール演算、ノードツールのオプション。

この手順は、別々に描いた曲線から1つのシルエットを作る初心者向けです。たとえば、キャラクターイラストの外側の輪郭が該当します。目標は、編集可能な閉じた輪郭を1つ作り、意図した外周に沿って塗りつぶすことです。

2026年10月29日読了時間:7分Metlivi Editorial Team
セクション 1

別々の曲線を塗りつぶすと、意図しない場所が塗られるのはなぜですか?

曲線の集まりは閉じているように見えても、つながった輪郭を形成していないことがあります。Inkscapeが使う形式のSVGでは、開いたサブパスは、最後の点と最初の点が直線で結ばれているかのように塗りつぶされます。そのため、別々の曲線を塗りつぶすと、見た目上の曲線に囲まれた領域ではなく、くさび形や曲線状の領域が塗られることがあります。W3C:描画—塗りつぶしのプロパティ。

色を適用しても、閉じているかどうかを確実には確認できないのはこのためです。端点がつながっていなくても、パスには広い範囲の塗りつぶしが表示されることがあります。まず意図した境界を作り、その後で見た目を確認してください。

楕円の上半分と下半分を形作る2本の曲線を考えてみましょう。それぞれ単独でも、弧と、暗黙に補われる直線の間を塗りつぶせます。対応する端点同士をつなぐと、2つの曲線が意図した外周になります。

セクション 2

どの曲線を選べばよいですか?

描画を変更する前に、作業用のコピーを保存してください。外周に属する曲線をすべて特定し、内側の装飾線は選択から外します。1つのシルエットを作る場合、意図した境界を出発点から連続してたどり、元の位置まで戻れるはずです。

準備として、次の点を確認します。

  • 各境界曲線が隣の曲線と接する位置を特定する。
  • 接点を丸くするか、尖らせるか決める。
  • 内部を横切る余分な線がないか確認する。
  • 編集可能なパスではなく、幾何学図形のままのオブジェクトがないか確認する。

選択した楕円、長方形などの幾何学図形に、図形専用のハンドルが表示される場合は、ノードを編集する前にパス → オブジェクトをパスへを選びます。変換すると元の図形コントロールがパス編集用のコントロールに置き換わるため、作業用コピーを残しておくと便利です。すでにパスとして描かれている曲線は変換する必要はありません。Inkscape:幾何学図形のノードを編集する。

曲線と、画面に見える輪郭線の違いにも注意してください。ストロークは塗りとは別に設定され、幅や端の形状が見た目に影響します。そのため、太いストローク同士が接しているように見えても、元の図形がつながっているかどうかを判断する手がかりにしかなりません。Inkscape:ストローク。

セクション 3

「結合」と「統合」のどちらを使えばよいですか?

別々の曲線をつないで1つの連続した外周にする場合は、まず結合を使います。各曲線は1つのパスオブジェクト内に保持されますが、つなぐまでは独立したサブパスのままです。統合は別の作業に使います。既存の図形の塗りつぶし領域を1つにまとめる操作です。Inkscape:ブール演算。

開始時の状態 適切な方法
1つの外周を構成する開いた曲線 結合してから、対応する端点同士をつなぐ
塗りつぶし領域をまとめる閉じた図形 統合
意図的な内側の穴がある外側の輪郭 閉じたサブパスを別々に保ち、適切な塗りつぶし規則を選ぶ

セレクタで外周を構成する部分だけを選び、パス → 結合を選択します。続ける前に結果を確認してください。選択可能なオブジェクトが1つになっても、すべての部分がつながったとは限りません。マニュアルでは、複数のサブパスを含む複合パスと、別々のパスオブジェクトが明確に区別されています。Inkscape:ブール演算。

セクション 4

曲線をつないで境界を閉じるにはどうすればよいですか?

Nキーを押してノードツールを有効にします。外周に沿って、接点を1か所ずつ処理します。

  1. 最初の接点を拡大する。
  2. そこにある2つの端点ノードを選択する。
  3. 端点を1つのノードにしたい場合は、選択ノードを結合を使う。
  4. 端点の間に接続部分を残したい場合は、選択した端点を新しいセグメントで結合を使う。
  5. 輪郭を閉じる最後のペアも含め、すべての接点で繰り返す。

結合コマンドは、パスの形状を保とうとしながら選択ノードを1つにまとめます。セグメントコマンドは端点同士をつなぎます。意図したペアを1組ずつ選択してください。マニュアルによると、多数のノードを選択して結合すると、最も近い端点同士がつながることがあり、意図した接続と異なる場合があります。Inkscape:ノードツールのオプション。

2本の曲線で楕円を作る例では、左側の対応する端点を選択して結合し、次に右側の端点を選択して結合します。片側だけをつなぐと、連続はしていても開いた輪郭のままです。これはSVGのパス構造にも沿っています。パスはつながったセグメントで構成され、閉じたサブパスは始点に戻ります。W3C:パス。

ペアを選択しにくい場合は、片方の端点をクリックしてから、もう片方をShiftキーを押しながらクリックするか、ノードを囲む小さな選択枠をドラッグします。Inkscapeの旧ノードツールドキュメントには、両方の選択方法が記載されています。Inkscape Wiki:ノードツールの再設計。

セクション 5

各接点で曲線の形を保つにはどうすればよいですか?

境界をつないだら、各接点に不要な角や膨らみがないか確認します。結合によってつながりができますが、その接続部分で輪郭がどう流れるかはノードの種類とハンドルによって決まります。

輪郭を滑らかにつなげたい場所では、スムーズノードを使います。ハンドルがノードを挟んで一直線にそろいます。尖った点が必要な場所や、両側の曲率を別々に調整したい場所では、カスプノードを使います。対称ノードでは、両側のハンドルの長さも等しく保たれるため、その制約が輪郭に合う場合に選んでください。Inkscape:ノードの種類について。

接点のノードを選択して対応するノード種類のコントロールを使い、隣り合う両方の曲線を見ながらハンドルを調整します。局所的な変更がシルエット全体を改善するか判断できるよう、接点を1か所ずつ確認してください。デザインに意図的な角がある場合は、すべてのノードをスムーズに変換しないでください。

セクション 6

塗りつぶしを適用し、残った問題を見つけるにはどうすればよいですか?

完成したパスを選択し、オブジェクト → フィル/ストロークを開きます。塗りタブで単色を選び、色を指定します。輪郭線を残すにはストロークの塗りで色を保持し、ストロークなしにするには×印を選びます。このダイアログでは塗りとストロークを別々に設定できます。Inkscape:フィル/ストロークダイアログ。

結果が意図と違う場合は、次の順に確認します。

  1. 意図した内部を斜めの線が横切る:該当する端点の接続を確認します。開いたサブパスが、暗黙に補われる閉じ線に沿って塗られている可能性があります。
  2. 意図しない穴が残る:塗りつぶし規則を変える前に、余分なサブパス、重なり合うループ、自己交差がないか確認します。
  3. オブジェクトが見えない:塗りが「塗りなし」ではなく色に設定されているか確認し、不透明度も確認します。
  4. 接点が尖って見える:そのノードの種類とハンドルを確認します。

パスが自己交差する場合や、入れ子のサブパスを含む場合には、塗りつぶし規則が重要です。偶奇規則では、入れ子のループの向きに関係なく穴ができます。非ゼロ規則では、パスの方向も考慮されます。自己交差のない単純な閉じた輪郭なら、規則を切り替える必要はありません。まず境界を修正し、その後で意図した穴に対処してください。W3C:巻き方向規則。

見えない塗りの場合は、色のアルファ値とオブジェクト全体の不透明度の両方を確認します。SVGでは塗りの不透明度は個別に定義されますが、Inkscapeの全体不透明度コントロールは塗りとストロークの両方に影響します。W3C:塗りの不透明度、Inkscape:フィル/ストロークダイアログ。

セクション 7

完成した図形を確認するにはどうすればよいですか?

ノードツールで、以前の接点をすべて確認し、シルエットを使用時の表示サイズで見直します。ここで扱った1つの輪郭では、外周が閉じた1つのループになっていて、開いた部分が残っていない状態が理想です。SVGでは、端点の位置が同じでも、閉じたサブパスと開いたサブパスは区別されます。そのため、2つの端点を同じ位置に移動するだけでは不十分です。W3C:Closepathコマンド。

最後に、境界がつながっていること、曲線に意図した角とつながりがあること、塗りが意図した内部を覆っていることの3点を合わせて確認します。すべて一致したら、編集可能なSVGを保存して、シルエットを簡単に調整できる状態にしておきます。

セクション 8

出典

関連記事

このテーマをさらに見る