SVGのノードとベジェ曲線の編集

実践ガイド

SVGの図形は、直線や曲線でつながれたノード(アンカー)でできています。ノードを編集すると形を完全に制御できます。曲線はベジェハンドル(セグメントの曲がり方と方向を決めるレバー)で操作します。

基本概念

ノードモードに入る

svgdeskで図形をダブルクリック(またはノードツール、キー N)。図形が編集可能なパスになり、アンカーが表示されます。

ノードを移動

アンカーをドラッグして位置を変えます。Shiftで移動を1軸(水平のみ/垂直のみ)に固定します。

角を曲線に変換

ノードをダブルクリック、または曲線に変換ボタンでベジェハンドルを追加します。ピンクの点をドラッグして曲線を形作ります。角に戻すには再度変換します。

対称ハンドルと独立ハンドル

既定ではハンドルは対称(ミラー):片方を動かすともう片方も動き、滑らかな曲線になります。独立(またはドラッグ中に Alt)で対称を解除し、両側を別々に制御します。先端や折れに便利。

ノードの追加と削除

セグメント中点のマーカーをクリックでノードを追加。ノードを選んで Del またはノード削除ボタンで削除します。

複数選択

Shift+クリックで複数ノードを選び、一緒に移動できます。形を崩さずに一部全体を動かすのに最適。空白部分の範囲ドラッグでも範囲内のノードをまとめて選択できます。

複合パス

1つの図形に複数のサブパスがある場合(例:穴のある「O」)。svgdeskは編集時にそれらを保持するので、全体が崩れません。

エディタで練習する

続けて読む