SVGの円弧フラグ：A命令で意図した曲線を描く
SVGのlarge-arcとsweepが同じ2点間の4曲線をどう選ぶか確認します。動作するA命令を試し、半径、回転、トレース図形を修正します。
SVGの A 命令の2つのフラグは、始点と終点をつなぐ円弧の選択を決めます。large-arc-flag が 0 なら短い経路、1 なら長い経路です。sweep-flag の 0 または 1 は楕円を回る方向を選びます。端点と半径を固定して2桁だけ変えると、4通りを確認できます。SVG 2のパス仕様は、この4円弧の選択を定義しています。
コード編集後に、ロゴの曲線エッジ、バッジの輪、UI装飾が逆へ曲がる場合に役立ちます。元データがPNGなら、先にベクター化で編集可能な形状を得られます。A 命令は、それとは別の意図的な形状編集です。
Aの後の7値を読む
絶対座標の円弧命令は次の順序です。
A rx ry x-axis-rotation large-arc-flag sweep-flag x yrx と ry は楕円の半径、x-axis-rotation は現在の座標系での楕円の回転です。両フラグはそれぞれ 0 か 1 で、最後の x y が終点です。始点は前の命令、多くは M x y が残した現在の点です。小文字 a は終点を絶対ではなく相対位置で指定します。MDNのパス入門は命令形式を説明しています。
たとえば M70 370 A140 110 0 0 1 280 420 は (70, 370) から始まり、半径140と110、回転なしの楕円を使い、sweep 1 の短い経路で (280, 420) へ達します。数値はSVGのユーザー座標系で、自動的に物理的な印刷サイズを保証するものではありません。
4つの円弧を見る
オリジナルの例を1つのSVGから描画しました。全パネルで始点 (70, 370)、終点 (280, 420)、半径 140 110、回転 0 は同じで、フラグだけを変えています。オレンジが始点、緑が終点です。独自のパス命令のブラウザー形式の描画で、PerfectVectorの変換出力ではありません。
| フラグの組 | この例での選択 | パス区間 |
|---|---|---|
0 0 | 端点の下を通る短い経路 | A140 110 0 0 0 280 420 |
0 1 | 端点の上を通る短い経路 | A140 110 0 0 1 280 420 |
1 0 | 下を回る長い経路 | A140 110 0 1 0 280 420 |
1 1 | 上を回る長い経路 | A140 110 0 1 1 280 420 |
「上」「下」はこの始点、終点、座標配置での説明で、0と1の普遍的な意味ではありません。端点位置やグループ変換が違うと、見える円弧の位置も変わります。sweepは選んだ楕円の角度が増えるか減るかの方向を選びます。y軸が下向きの典型的なSVG viewBoxでは、sweep 1 は通常、時計回りに見えます。SVG Tutorialの対話的円弧エディターは、他の入力を固定して方向変化を見るのに役立ちます。
1パネルを再現するには次を arc.svg として保存し、ブラウザーで開きます。
<svg xmlns="http://www.w3.org/2000/svg"
width="380" height="600" viewBox="0 0 380 600">
<path d="M70 370 A140 110 0 0 1 280 420"
fill="none" stroke="#1b64d8"
stroke-width="12" stroke-linecap="round" />
<circle cx="70" cy="370" r="9" fill="#ff704e" />
<circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>上の表を使って、回転 0 の後の2桁だけを変えます。同時に半径や端点を変えると、どの編集が経路を変えたか分からなくなります。
逆へ曲がった曲線を直す
- 区間を探す。 パスの
dで前の始点、A、終点を特定します。複数の円弧を含む場合は、誤ったものだけ編集します。 - 長短を確認する。 小さな曲線が楕円の大半を回るなら、
large-arc-flagを1から0へ変えます。予定した輪の区間が短い接続に縮んだなら1を試します。 - 側面や進行方向を確認する。 他を固定し、
sweep-flagを切り替えます。端点を結ぶ弦の反対側へ移ることがよくあります。 - 図形全体を確認する。 修正区間も隣との角度が不自然だったり、
viewBoxを越えたりする場合があります。予定表示サイズで開き直し、必要に応じて隣接形状やキャンバスを調整します。
どの組も意図したシルエットと合わないなら、原因はおそらくフラグではありません。半径と端点が候補楕円を決め、フラグはその中から選ぶだけです。NaNの円弧ガイドは半径や端点の変更で楕円が変わる様子を示します。
回転と半径の制限
rx と ry が異なる場合、x-axis-rotation は円弧選択前に楕円を回すため重要です。同じ半径の円を回しても輪郭は変わりません。斜めの楕円エッジのロゴなら、先に予定する半径と回転を試してからフラグを選びます。そうしないと、誤った楕円の正しい側を選ぶことになります。
SVG 2の実装上の注意は特殊例を定義します。どちらかの半径が0なら直線扱いです。小さすぎて端点を結べない半径は、レンダラーが可能になるまで拡大します。始点と終点が同じなら円弧区間を省きます。これがフラグ変更が無効に見える場合の理由です。また、描画だけでは入力半径が補正なしに使われた証明にならない場合があります。
large-arcの両値が同じに見える場合がある理由
端点が楕円を正確に2つの半周へ分ける場合、長い方はありません。この特殊例ではlarge-arcの違いは見えません。1端点を反対点から移して4結果をテストします。
トレース曲線を円弧式ではなく出発点にする
ラスターのロゴにきれいな円の境界があっても、復元SVGは明示的なA命令でなくベジェ区間やアンカーで表す場合があります。ベクター化は見える形状を再構築しますが、設計者の元の中心、半径、フラグを必ず推定するわけではありません。元のベクターマスターがあれば再トレースせず編集します。
PNGやJPGだけなら、PerfectVectorで画像を編集可能なベクターパスに変換し、復元輪郭を確認して、精密な幾何学的描き直しが必要か決めます。輪のバッジなら、編集ソフトで意図した中心と半径を測り、一貫した形状が重要ならその曲線部分だけ置き換えます。正確な楕円で歪む不規則な図形には採用したトレースを保ちます。SVG編集ガイドは視覚的編集と限定的コード編集の選択、ノード整理ガイドは形を変えにくいトレース曲線を扱います。
役割の分担が重要です。PerfectVectorはラスターだけの元画像をパスに復元できますが、正確な円弧設定と接続確認はデザイン判断です。フラグ変更のためだけに、きれいなSVGをPNGにして再トレースしないでください。
SVGを納品する前に
- 元のマスターか採用したトレースのコピーを残します。
- 始点、終点、半径、回転、2フラグをこの順で確認します。
- 拡大時と実際の利用サイズで選んだ経路を比較します。
- 接続と、長い経路が
viewBox端を越えないかを確認します。 - 利用先の編集ソフトやブラウザーで開き直します。正しいスクリーンショットだけでは、受け取り側が意図どおりパスを編集できる証明にはなりません。
よくある質問
SVGのlarge-arcとsweepは何を意味しますか？ large-arcは2端点間の短いか長い候補円弧を選び、sweepは楕円を回る進行方向を選びます。退化していない形状では、合わせて4候補から選びます。
large-arc変更に見た目の効果がないのはなぜですか？ 端点が楕円の反対点で両経路が半周か確認します。同じ端点、半径0、端点を結ぶため補正された半径も調べます。1つずつ変えて描画パスを比較してください。
ベクター化は元の円弧命令を自動復元しますか？ そうとは考えないでください。ラスターから編集可能な形状は復元できますが、ベジェ曲線や多くのアンカーを使う場合があります。元の形状が必要なら、編集ソフトで正確な円や楕円を作り直します。
参考資料
- W3C — SVG 2のパス — 円弧構文、フラグの組、パス形状を説明します。
- W3C — SVG 2の実装上の注意 — 半径補正と退化円弧の扱いを説明します。
- MDN — SVGパス — 絶対・相対命令と円弧入門を説明します。
- SVG Tutorial — 円弧 — 半径、回転、フラグの対話的な実演です。
- NaN — SVGパス命令：円弧 — 楕円の収まりとフラグ結果を対話的に説明します。
ラスターだけの紋章を整える前に編集可能な元データが必要なら、画像をベクターパスに変換し、結果を確認します。正確な半径やsweepが重要な円弧は描き直してください。
