Inkscapeでベジェハンドルを正確な座標に配置する方法

ノードツールの座標フィールドで変更されるのは、選択中のノードの位置です。ベジェハンドルは、そのノードのそばで曲線の形を決める別個の制御点です。そのため、ツールバーに目的のハンドル座標を入力すると、ジオメトリの別の部分が変更されます。Inkscape Beginners’ Guideでは、これらのフィールドは選択中のノードの座標を指定するものとして説明されています。ノードツールのオプション

ノードツールで曲線を視覚的に確認します。Nを押してパスを選択し、ノードを選びます。ノードから細い線でつながった小さな円としてハンドルが表示されます。数値を編集するのは、この円の位置です。ノードツールでパスを編集する

3次ベジェセグメントは、始点ノード、2つの制御点、終点ノードで構成されます。SVGパスデータでは、始点ノードは直前のコマンドで指定されます。その後に続く大文字のCは、2つの制御点と終点をこの順番で指定します。W3C: 3次ベジェ曲線コマンド

例として、次のd属性値を見てみましょう。

M 40 120 C 40 40 200 40 200 120

数値は次のように読みます。

部分	座標	意味
M 40 120	(40, 120)	始点ノード
Cの後の1組目	(40, 40)	始点ノードの出ハンドル
Cの後の2組目	(200, 40)	終点ノードの入ハンドル
Cの後の3組目	(200, 120)	終点ノード

実際の編集では、Cの後の6つの値を、編集前に3組の座標に分けます。両方のノードを維持したまま片方のハンドルを移動するには、その組だけを変更します。MDNのSVGチュートリアルにも同じ順番が記載され、制御点が各終点付近で曲線の方向をどう決めるか説明されています。MDN: パス

最初の操作を確実に行うには、次の完全なSVGドキュメントを使います。プレーンテキストエディターでexact-curve.svgとして保存し、Inkscapeで開いてください。グループ、変形、パスエフェクトのない通常のパスが1つ含まれています。

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160"
     viewBox="0 0 240 160">
  <path id="curve"
        d="M 40 120 C 40 40 200 40 200 120"
        fill="none"
        stroke="black"
        stroke-width="2" />
</svg>

この例のXML構造と、以下の座標計算はPythonで確認済みです。Inkscapeでのデスクトップ操作自体は実行していません。

1. Inkscapeで曲線を選択します。
2. 既定のショートカットとして記載されているCtrl+Shift+XでXMLエディターを開きます。
3. XMLツリーでid="curve"によって識別されるパス要素を選択します。
4. そのd属性を選択し、属性値を編集します。
5. Ctrl+Enterまたはダイアログの属性を設定コントロールで値を適用します。これらの操作はInkscapeのショートカットリファレンスに記載されています。Inkscapeのキーボードとマウスのリファレンス

たとえば、次の属性値を入力して、最初のハンドルを(40, 40)から(70, 30)に変更します。

M 40 120 C 70 30 200 40 200 120

値フィールドにはパスデータの文字列だけを貼り付けてください。d=、引用符、完全な<path>要素は含めません。始点の組、2つ目の制御点の組、終点の組は変更しないでください。こうすれば、変更箇所を簡単に確認できるハンドル1つだけの編集になります。

ノードツールに戻り、始点ノードを選択します。ハンドルの新しい向きを目視で確認し、数値を確かめるためにdの値を再確認します。複数のセグメントからなる既存の輪郭を編集する場合は、周囲のコマンドを維持して、該当する制御点の組だけを編集してください。この短い例で属性全体を置き換えると、輪郭全体が置き換わります。

パスデータの座標にはSVGのユーザー単位が使われます。ドキュメントのviewBoxと変形によって、それらの単位が表示上の描画にどう対応するかが決まります。初期SVG座標系では、原点は左上にあり、Xは右方向、Yは下方向に増加します。W3C: 座標系、変形、単位

提示した例では、240 × 160のビューポートとviewBox="0 0 240 160"によって、分かりやすく対応づけられます。(40, 40)から(70, 30)への移動では、制御点が右へ30単位、上へ10単位移動します。これらは例示用のデザイン座標であり、特定のキャラクター形状を推奨するものではありません。

既存のドキュメントでは、ローカル座標をページ上の位置として扱う前に、パスとその親グループにtransform属性があるか確認してください。計算例として、単独のtranslate(30,20)を適用すると、ローカルハンドルの(70,30)は親座標系の(100,50)に対応します。その平行移動のもとで(100,50)に到達するには、ローカル座標として(70,30)を入力します。拡大縮小、回転、さらに上位の要素の変形がある場合は、変換全体を考慮する必要があります。W3C: 座標系と変形

小文字のcは、セグメントの始点からの相対的なオフセットを記録します。3組の座標すべてが同じ始点を基準とします。制御点から次の制御点への連続した移動ではありません。大文字のCは、現在のユーザー座標系での絶対座標を記録します。W3C: 3次ベジェ曲線コマンド

元の例では、後続する各点から始点ノード(40,120)を引きます。

点	絶対位置	相対オフセット
1つ目のハンドル	(40,40)	(0,-80)
2つ目のハンドル	(200,40)	(160,-80)
終点	(200,120)	(160,0)

したがって、同等の属性値は次のとおりです。

M 40 120 c 0 -80 160 -80 160 0

数値をそのままにしてcを大文字にするだけでは、意味が変わってしまいます。長い相対パスを編集する場合は、まず対象セグメントの始点を計算してください。

Sセグメントでは、1つ目の制御点が省略されます。3次セグメントの後に続く場合、SVGは共有ノードを軸にして直前のセグメントの最後の制御点を反転させ、その制御点を導きます。両方の制御点を個別に指定するには、省略形を明示的なCセグメントに展開し、まず計算した1つ目の制御点を維持します。MDN: パス

Inkscapeのノードの種類は、その後のインタラクティブな編集に制約を与えます。コーナーノードでは、ハンドルを個別に動かせます。スムーズノードでは、両方のハンドルとノードが一直線に並びます。対称ノードではさらに、ハンドル間の距離も等しく保たれます。自動スムーズノードでは、ノードを移動するとハンドルの長さが自動的に調整されます。ノードの種類について

最終的な数値を配置する前に、意図するノードの動作を選んでください。制御点を個別に指定する場合は、コーナーノードが便利です。滑らかな接続にする場合は、共有ノードの両側で整合する座標を計画し、ノードの種類を変換した後に最終値を確認します。

たとえば、共有ノードが(200,120)にあり、入ハンドルが(200,40)にあるとします。(200,200)にある出ハンドルは、そのノードを軸にした反転位置である2 × (200,120) − (200,40)になります。この計算例では、ハンドルのベクトルが同じ長さで逆向きになります。これにより、対称な接続の座標を具体的に確認できます。

次の項目を順番に確認してください。

1. 要素を確認する。 属性を変更する前に、選択したパスのIDを確認します。
2. 座標の組を特定する。 必要に応じて、始点ノード、1つ目の制御点、2つ目の制御点、終点を紙に書き出します。
3. コマンド文字を確認する。 数値が絶対座標、相対座標、省略形のどれに当たるかを確認します。
4. 座標の対応関係を確認する。 viewBox、パスの変形、親要素の変形を調べます。
5. その後の編集内容を確認する。 ハンドルをドラッグしたりノードの種類を変更したりした後に、座標を再確認します。
6. 元の値を保存する。 編集によって意図しないセグメントが変わった場合に戻せるよう、d文字列全体をコピーしておきます。

キャラクターの輪郭を正確に仕上げるには、表示される輪郭と、記録された制御点の座標の両方を確認します。コマンドの種類と座標系が明確であれば、ハンドルの正確な配置は追跡しやすい小さな編集作業になります。セグメントを特定し、目的の組だけを変更して、結果を確認します。

• ノードツールのオプション — Inkscape Beginners’ Guide
• ノードツールでパスを編集する — Inkscape Beginners’ Guide
• ノードの種類について — Inkscape Beginners’ Guide
• Inkscapeのキーボードとマウスのリファレンス — ドキュメントソース
• パス — SVG 2、W3C
• 座標系、変形、単位 — SVG 2、W3C
• パス — MDN Web Docs