お絵描きソフトInkscape(インクスケープ)の使い方を初級レベルから上級レベルまで広く紹介しています。
情報追加のリクエストや分かりにくい点があれば下のCONTACTフォームからどうぞ。

Inkscapeでパスをつなぎ合わせる/切り離す

 このページでは、Inkscapeを使って複数のパスを互いにつなぎ合わせたり、1本のパスを切り離して複数のパスにバラバラにしたりするいろんな手順について紹介します。

 (参考:パスの「分割」「パスを分割」「分解」の違い

 (参考:パスの塗りつぶしのルール

 (参考:つなぎ合わせたパスのスタイルは?

(2023.10.04更新)

はじめに

 Inkscapeでは、複数のパスをつないだり、逆に複数のパスにバラバラにするようなパス操作(パスオペレーション)と呼ばれる機能が何種類か用意されています。

 バージョン1.3で可能な操作の種類が2つ増えたので、その操作についても書き加えました。

パスとサブパスの関係

 ところで、個々の機能について触れる前に、前提となる知識としてパスサブパス(とオブジェクトグループ)の関係をまとめておきたいと思います。

 複数のパスをまとめて扱う方法には大きく分けて2種類の方法があります。

 1つ目は、パス以外のオブジェクトと同じように、複数のパスオブジェクトをオブジェクトグループにする方法です。オブジェクトグループに含まれるオブジェクトは互いに独立しているので、色などのスタイルはオブジェクトごとに別のものを設定できます。

 2つ目は、パスの各々をサブパスとして、全体で1つのパスオブジェクトにする方法です。SVG形式の仕様の中では、複合パス(Compound Path)と呼ばれるものです。サブパスはお互いにつながっていないだけで、オブジェクトとしては全体で1個なので、色などのスタイルは複数のサブパスで共通のものになります。

 サブパスは、見た目は別々のパスオブジェクトのように見えますが、選択ツールで選択するときはサブパスごとに選択することはできません。パスオブジェクトが選択対象の単位となります。

 一方で、ノードツールを使えばサブパスはオブジェクトグループの中の個々のオブジェクトと同じように、バラバラに移動したり削除したりすることができます。

 このあとに列挙していく「複数パスの操作を行う機能」には、複数のパスオブジェクトを扱う機能と、1つのパスオブジェクトを構成する複数のサブパスを扱う機能の2つのタイプがあるので、どちらのタイプの機能なのか常に意識するとよいと思います。

サブパスのフィルはどこ?

 複数のサブパスを含むパスオブジェクトのフィルは、サブパスごとのフィルになります。離れたサブパスに挟まれた領域はフィルになりません。また、次の例のように、サブパスが互いにクロスしている場合は、ちょっと複雑な領域がフィルになります。詳しくは「パスの塗りつぶしのルール」のほうで。

各操作の概要

0.各種操作の名前

 複数パスを扱う各操作の中身に触れる前に、どんな名前の操作があるのかを一旦整理しておきます。

 パスをつないだり切り離したりする機能を説明するとき、ごく普通の日本語として、「パスの結合」とか「パスの分解」とかざっくりした言葉を使いたくなるかもしれませんが、Inkscapeにはそれでは区別し切れない似たような操作がいくつもあります。

 Inkscapeもがんばってそれぞれに違う名前を割り当ててメニューなどの表記で区別できるようにしようとしているようですが、正直分かりやすく区別できているとは言えないかもしれません。

 Inkscapeで使われている名前をざっと並べると、「連結」「統合」「結合」はパス同士をつなぎ合わせるタイプの操作の名前に使われ、「削除」「切断」「差分」「交差」「排他」「分割」「パスを分割」「分解」「分割(その2)」「パスに戻す」はパスをバラバラに切り離すタイプの操作の名前に使われています。ややこしいです。

 特に気を付けないといけないのは、「結合」という名前が単にパス同士をくっつけるという意味ではなく、このあとに書きますが、ある特殊な操作に対して使われているということです。

 自分でもいつも混乱しないように注意しているのですが、なかなか難しいです。

 さて、それでは機能ごとの特徴をまとめていきたいと思います。

1.セグメントの削除

 ノードとノードの間のセグメントを削除します。

 2つのノードを選択しておいて、ツールコントロールバーの次のボタンを押します。

 すると、その2つのノードのところで切り離されたようになります。

 切り離すことで全体が2本に分かれる場合は、それぞれサブパスになります。

 切り離したのが端っこのセグメントの場合は、端のノードは消えて、パス全体がセグメント1本分だけ短くなります。

 なお、3個以上のノードを選択しておいてこの操作を行うと、隣り合う2つのノード間のセグメントは全部削除されます。

2.セグメントで連結

 ノードとノードの間にセグメントを追加して連結します。

 2つのノードを選択しておいて、ツールコントロールバーの次のボタンを押します。

 すると、その2つのノードの間が新しいセグメントで連結されます。

 連結しようとして選択した2本が、別々のパスオブジェクトであっても1つのパスオブジェクトの2本のサブパスであっても、連結すると1つのパスオブジェクトとなります。

 なお、3個以上のノードを選択しておいてこの操作を行うと、パスの末端の各ノードのうち、一番近いものから順に連結してきます。(試してみるとそんな感じに動きます)

3.ノードで切断

 1つのノードのところでパスを切断します。

 1つのノードを選択しておいて、ツールコントロールバーの次のボタンを押します。

 すると、そのノードのところで切断されて、2つのノード(端点)に分かれます。

 切断することで全体が2本に分かれる場合は、それぞれサブパスになります。

 切断した直後は、切断した位置で2つのノードがぴったり重なっている状態になっています(ノードの表示が少し変わった形になっているのがわかります)。上のサンプルの右端の図のようにノードやサブパスをちょっと移動してみると、切断されていることがわかります。

 なお、2個以上のノードを選択しておいてこの操作を行うと、ノードそれぞれで切断されます。

4.ノードで連結

 2つのノードを合体することで、パスを連結します。

 2つのノードを選択しておいて、ツールコントロールバーの次のボタンを押します。

 すると、2つのノードが1つのノードに合体することで連結されます。

 連結しようとして選択した2本のパスが、別々のパスオブジェクトであっても1つのパスオブジェクトの2本のサブパスであっても、連結すると1つのパスオブジェクトとなります。

 なお、3個以上のノードを選択しておいてこの操作を行うと、末端のノード同士は近いものから順に連結していき、末端のノード同士で連結できるものがない場合は末端でないノード同士を連結するようです。ルールが明確ではないので、結果を期待して操作するのは難しいと思います。

5.パスの統合

 複数のパスの外側をなぞるパスに変換します。

 複数のパスを選択しておいて、メニューからパス > 統合を操作します。

 すると、パス同士が重なっているところ(内側)を消して、外側だけをなぞるようなパスになります。

 なお、3個以上のパスを選択しておいてこの操作を行うと、外側をなぞるような1個のパスになります。

6.パスの差分

 下に隠れているパスから上に重なっているパスの重なっている部分を削り取ったようなパスに変換します。

 複数のパスを選択しておいて、パス > 差分を操作します。

 すると、上のパスに重なっている部分を削り取ったような形のパスになります。

 ・・・とこう書くと分かりやすいですが、2個のパスの場合はこの説明で十分なのですが、厳密にいうと重なりの順だけでなく、パスを選択した順も結果の形に関係しているようです。

 だから3個以上のパスを選択しておいてこの操作を行ったときの結果はけっこう複雑(というより予想困難?)です。他の解説コンテンツで見かけた説明では、重なっている順番または選択した順番に「パスC-(パスB-パスA)」みたいな差分になるとなっていましたが、そうとも思えないケースがあって、3個のパスの重なり具合と選択順の組み合わせによって結果が変化するようなのです。解説コンテンツによっては「3個以上のパスには実行できない」と説明しているものもあります。

7.パスの交差

 重なっている部分だけのパスに変換します。

 複数のパスを選択しておいて、メニューからパス > 交差を操作します。

 すると、重なっている部分をなぞったような形のパスになります。

 なお、3個以上のパスを選択しておいてこの操作を行ったときは、その全てが重なっている領域を囲うパスになります。

8.パスの排他

 重なっていない部分だけのパスに変換します。

 複数のパスを選択しておいて、メニューからパス > 排他を操作します。

 すると、重なっていない部分の外側をなぞったような形のパスになります。

 排他操作をしたためにパスがバラバラになる場合は、1つのオブジェクトのサブパスになります。

 なお、3個以上のパスを選択しておいてこの操作を行ったときも、重なっていない部分をなぞったような形のパスになります。

9.パスの分割

 重なっているパスのところで切断して2つのパスを生成します。

 複数のパスを選択しておいて、メニューからパス > 分割を操作します。

 すると、上に重なっているパスのところを境界にして、下に隠れているパスが2つに切り離されます。差分と交差の結果の両方から成るパスになるともいえそうです。

 (参考:パスエフェクト:スライス

10.パスをカット

 重なっているパスのところで切り離して2つのパスを生成します。

 複数のパスを選択しておいて、メニューからパス > パスをカットを操作します。

 「分割」に似ていますが、「分割」が境界線のところでフィルの部分も切り離すのと違い、パスのアウトラインだけを切り離します。

 なお、3個以上のパスを選択しておいてこの操作を行ったときは、一番下のパスを一番下から二番目のパスで分割します。

11.パスの結合と分解

 「結合」は複数のパスオブジェクトを、それらをサブパスとして含む1つのパスオブジェクトに変換します。複数のパスを選択しておいて、メニューからパス > 結合を操作します。

 「分解」はその逆で、1つのパスオブジェクトに含まれるサブパスを、各々独立したパスオブジェクトに変換します。複数のサブパスから成るパスを選択しておいて、メニューからパス > 分解を操作します。

 次の例では左から右に向かって、「結合分解」と操作しています。「結合」によって1つのパスオブジェクトになります。サブパス同士が重なった状態になるので、パスの塗りつぶしのルールに従って、重なっているところは塗りつぶしなしになります。また、サブパスのスタイルはパスオブジェクト内で1種類しか設定できないので、自動的に同じ色に修正されます。そして「分解」によって再び2つのパスオブジェクトになります。元に戻すという操作ではないので、色は元に戻りません。

12.「パスを分割」

 1つのパスを複数のパスに分割するのではなく、重なっていないサブパス同士を別々のパスオブジェクトに分割します。(同じ「分割」という言葉を使っているのでややこしいです。)

 重なっていないサブパスを含むパスを選択しておいて、メニューからパス > パスを分割を操作します。

 すると、重なっていないサブパス同士を各々独立したパスオブジェクトに変換します。


 

 上の図の左端は1つのパスオブジェクトの状態で、真ん中はパスを分割の操作をして2つのパスオブジェクトに変換した後の状態です。見た目には変化が起こらないですが、右端の図のように一方のパスをちょっと移動してみると、確かに2つのパスオブジェクトになっていることがわかります。

 なお、重なっているサブパスがある場合は、それ同士は分割されず、同じパスオブジェクトの中に含まれたままとなります。

 分割機能のさらに細かい説明は「パスの「分割」「パスを分割」「分解」の違い」のほうにまとめました。

13.パスの分割(その2)

 バージョン1.3で追加された操作ですが、すでに「分割」と「パスを分割」という操作も存在したので、相当ややこしいです。便宜上、バージョン1.3で追加されたほうの「分割」を「分割(その2)」と呼ぶことにします。

 メニューでは次のように1つ目の「分割」や「パスを分割」よりも下にあります。

 こちらの「分割(その2)」は、重なっている複数のパスのアウトラインのところで全部切り分けて別々のパスにする操作です。英語では「Fracture」と言います。 

 上で説明した「分割(その1)」が、上に重なっているほうのパスを切断面指定用のパスとして使うものであるのに対して、こちらの「分割(その2)」は選択したすべてのパスが分割対象になります。

14.パスに戻す

 対象のパスを選択しておいて、メニューからパス > パスに戻すを操作します。メニューでは「パスに戻す」と表示されますが、この言葉だけでは実はどんな機能なのかわかりません。

 英語では「Flatten」と言うのですが、この機能が導入されたバージョン1.3のリリースノートでは、重なって見えなくなってしまっている部分を取り除いた形のパスにしてくれる操作だとの説明があり、次のように結果的にぴったり敷き詰められたタイルのような形のパス群になります。

 なお、リリースノートでは書かれていませんが、対象のパスに何らかのパスエフェクトが設定されている場合はパスエフェクトによって変化した結果の見た目通りのパスに変換する(パスエフェクトは結果として取り除かれる)という効果もあります。

 ということはこの「パスに戻す」というメニューを操作すると、対象のパスを見えているそのままの姿のパスに変換するという処理が実行されるとも言えそうです。

 「Flatten」の意味については「「Flatten」と呼ばれる機能について」を。