SVGのベジェ曲線：ノードを増やさず折れを直す

通常の3次ベジェ区間2つの接続にある意図しない折れを除くには、共通のアンカーを動かさず、隣接ハンドルをアンカーの両側の同じ直線に揃えます。長さが違っても、曲線は接線方向を共有できます。長さが等しい反射ハンドルには追加の条件があり、見た目が滑らかなすべての接続に必須ではありません。

変更前に元の形を確認します。葉の尖った先端、切り欠き、文字の角は意図的かもしれません。以下の修正は始点、接続点、終点、区間数を固定して、1つの不要な方向変化を対象にします。

接続を制御する2つのハンドルを探す

SVGの3次曲線命令は、2つの制御点と終点を持ちます。

C firstControlX firstControlY secondControlX secondControlY endX endY

区間は現在の点から始まります。第1制御点は始点から出る方向、第2制御点は終点への進入を導きます。MDNのパス入門は制御点と3次曲線の構文を図解します。小文字の座標組では、ハンドル変更前にSVGの相対パス命令で基準を追跡します。

共通アンカーでは、前区間の最後の制御点と次区間の最初の制御点を確認します。異なる直線を向くハンドルでは、接続の方向が変わります。近くにノードを加えるだけでは、その関係は解決しません。

オリジナルの2区間の例を修正する

次の完全なSVGを join-example.svg として保存し、ブラウザーで開きます。(150, 100) に意図的な折れのあるオリジナルの曲線記号です。

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

入ってくる制御点は接続の真左の (100, 100)、出ていく制御点は右上の (170, 50) です。曲線は水平に到達し、別方向へ出ていきます。

2つ目の区間の第1制御点だけを (175, 100) に変えます。

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

両ハンドルは接続点を通る水平線に乗ります。入るハンドルは50単位、出るハンドルは25単位です。長さが違っても接線方向は一致します。

反射したペアなら、代わりにその制御点を (200, 100) にします。両ハンドルは共通アンカーから50単位伸びます。不等長の編集より第2区間の形が大きく変わるので、保持したい輪郭と両方を比較してください。

各版は2つの3次区間と、始点、接続点、終点の3つの曲線上アンカーを持ちます。制御点は別の座標です。比較はオリジナルのブラウザー描画で、PerfectVectorのトレース結果や編集ソフトのノードツールの画面ではありません。

方向とハンドル長を別々に確認する

接続点 J で終わり、最後の制御点が A の3次曲線の端点導関数は 3 × (J − A) です。J から始まり最初の制御点が B の次の曲線は、始点導関数が 3 × (B − J) です。

この例の入ってくる導関数は全パネルで (150, 0) です。

接線方向の一致をG1連続性と呼びます。各3次曲線に通常の0〜1のパラメーター区間を使うと、1次導関数の一致はC1連続性です。Michigan Techのベジェ曲線の導関数の説明は端点条件を導きます。

方向のテストは端点導関数が0でないことを想定します。ハンドルがアンカーに重なる場合は1次導関数が0なので別途確認が必要です。また両ハンドルが接続の同じ側にあると進行方向が反転し得るため、同一直線上だけでは不十分です。

揃えた例のどちらも、接続で曲率が一致するとは約束しません。接線の角がなくても、ロゴの意図したシルエットに合わせて調整が必要な場合があります。選択ノードだけでなく曲がり全体を確認します。

反射が必要な形の場合だけSを使う

反射版は、より短く書けます。

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

ここでは S が、現在の点を中心に前の3次曲線の最後の制御点を反射し、第1制御点を推定します。

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

S240 50 270 50 の残る組は第2制御点と終点を指定します。50/50の反射版であり、曲線を変えずに50/25版を代用することはできません。

SVGの3次曲線命令の仕様は、反射規則を直前が C、c、S、s の場合に限定します。直前が直線や2次曲線なら、暗黙の第1制御点は現在の点になります。

例は次のとおりです。

M30 150 L150 100 S240 50 270 50

直線の後の最後の区間は C150 100 240 50 270 50 と同じです。第1ハンドルは始点に重なります。残りの制御形状は同一直線上でないので、曲がることはできます。直線後の S は直線区間を強制しません。

ブラウザーでは、反射 S パスと明示的な C 版、直線後の S 例とその展開を比較しました。両比較ともサンプル位置で一致しました。この例を確認するもので、一般的な規則は仕様が定義します。

ノード編集ソフトで同じ修正をする

コピーでパスを選び、疑わしい接続の周囲のハンドルを表示します。共通アンカーが1つあることを確認してください。重なるだけの別々の端点は、ハンドル方向の変更前に接続関係の修正が必要かもしれません。

Inkscapeのノード種類ガイドは、ハンドルが同一直線の滑らかなノードと、長さも等しい対称ノードを区別します。すべてを対称にせず、輪郭に合う種類を使います。

方向を変える間はアンカーを固定します。その後、ハンドルを短くしたり長くしたりして周辺の意図した形を戻します。高倍率と通常サイズで比較し、保存したSVGを開き直して書き出したパスを確認します。

曲がり全体でアンカーが密集する場合、局所修正だけでは足りないかもしれません。SVGのノード数ガイドは単純化、SVG編集手順は広い変更を扱います。どちらでも意図的な角を保ちます。

修正した形を元データと比較する

滑らかな接続は1つの品質確認です。トレースしたロゴが元と一致する証明ではありません。ベクタートレース品質のチェックリストでシルエット、開口部、意図的な角を比較します。

PNGやJPGだけなら、PerfectVectorのロゴベクター化ツールで編集可能なSVG候補を作れます。輪郭を調べ、不要な折れが残る場所で局所的にハンドルを修正します。平滑化で残したい特徴を消さないよう、編集パスの隣にラスター参照を保持します。

既存のベクターマスターがあれば使います。正確なブランド形状やひどく損傷した元データには手動再構築が必要な場合があり、ロゴベクター化ガイドで選択を説明します。1接続の修正は、他の輪郭がすでに適切な場合に有用です。

よくある質問

滑らかな接続には両ベジェハンドルが同じ長さである必要がありますか？ いいえ。0でないハンドルは長さが違っても接線方向を共有できます。共通アンカーの両側の同じ直線に置きます。等しい反射ハンドルは、ここで使う2つの3次区間の1次導関数の一致も加えます。

SVGのS命令が曲線を変えるのはなぜですか？ 第1制御点を推定するためです。CやSの後は前の最後の制御点を反射し、他の種類の後は現在の点を使います。推定点が意図した明示的制御点と違う場合があります。

トレースしたロゴの全ノードを滑らかにすべきですか？ いいえ。意図的な角、先端、切り欠きを保持します。不要な折れだけ局所修正し、全シルエットを元と比較します。接線連続の接続だけでは正確な復元と判断できません。

参考資料

1. MDN — SVGパス — 3次曲線の制御点とパス命令の構文を説明しています。
2. Michigan Tech — ベジェ曲線の導関数 — 端点の接線と接続条件を導きます。
3. W3C — SVGの3次ベジェ命令 — Sの反射規則と代替の制御点を定義しています。
4. Inkscape — ノードの種類 — 角、滑らか、対称、自動ノードの動作を区別しています。

ラスターのロゴから始めるなら、PerfectVectorでSVG候補を作成し、接続とシルエットを確認してください。その後、意図的な角を保ちながら、必要な曲線だけを修正します。