SVGのノードとベジェ曲線の編集
実践ガイド
SVGの図形は、直線や曲線でつながれたノード(アンカー)でできています。ノードを編集すると形を完全に制御できます。曲線はベジェハンドル(セグメントの曲がり方と方向を決めるレバー)で操作します。
基本概念
- アンカー(ノード):線が通る点。
- ハンドル:アンカーから伸び、曲率を決めるレバー。
- 角ノード:ハンドルなし、鋭い角になる。
- スムーズノード(曲線):ハンドルあり、滑らかな移行になる。
ノードモードに入る
svgdeskで図形をダブルクリック(またはノードツール、キー N)。図形が編集可能なパスになり、アンカーが表示されます。
ノードを移動
アンカーをドラッグして位置を変えます。Shiftで移動を1軸(水平のみ/垂直のみ)に固定します。
角を曲線に変換
ノードをダブルクリック、または曲線に変換ボタンでベジェハンドルを追加します。ピンクの点をドラッグして曲線を形作ります。角に戻すには再度変換します。
対称ハンドルと独立ハンドル
既定ではハンドルは対称(ミラー):片方を動かすともう片方も動き、滑らかな曲線になります。独立(またはドラッグ中に Alt)で対称を解除し、両側を別々に制御します。先端や折れに便利。
ノードの追加と削除
セグメント中点のマーカーをクリックでノードを追加。ノードを選んで Del またはノード削除ボタンで削除します。
複数選択
Shift+クリックで複数ノードを選び、一緒に移動できます。形を崩さずに一部全体を動かすのに最適。空白部分の範囲ドラッグでも範囲内のノードをまとめて選択できます。
複合パス
1つの図形に複数のサブパスがある場合(例:穴のある「O」)。svgdeskは編集時にそれらを保持するので、全体が崩れません。