SVGパスの角を丸める：塗りの形状を変更する

SVGパスの塗りの角を丸くするには、パス形状を変えます。隣接する2本の直線を頂点の手前で止め、その新しい端点を曲線でつなぎます。stroke-linejoin="round" は結合部分のストロークの描き方を変えますが、元の塗りの輪郭は残ります。

このチュートリアルは、独自の塗り付きエンブレムの直角の角を1つ丸めます。必要なのはプレーンテキストエディターとブラウザーです。最後には、20単位の円形の丸みを持つ完全なSVG、半径が収まるかの確認、比較・復元用の元の角張ったファイルが揃います。

フィレットは、鋭い角を置き換え、隣接する辺へ接線方向を揃えてつながる曲線です。この例は、水平と垂直の直線の間に4分の1の円弧を使います。任意のトレース済みベジェパスを自動で丸めるものではありません。

デザインに必要な変更を選ぶ

stroke-linejoinのリファレンスは、パスの角でストロークをどう描くか定義しています。変えたいものがその描画上の縁なら、丸い結合を使います。塗りのシルエットを変えるなら、実際のパスを編集します。

単純な長方形では、SVG rectのリファレンスが rx と ry を説明しています。このエンブレムには斜めの辺もあるため、角丸長方形に変えると、選んだ角以外も変わってしまいます。

問題がストロークの長い突起だけなら、マイターの突起の診断から始めます。この記事では、代わりに塗りの形状を変更します。

角張った原本を保存する

この完全なファイルを emblem-original.svg にコピーし、ブラウザーで開きます。右上の頂点は(170, 30)です。入ってくる辺は水平で、出ていく辺は(170, 100)まで下へ続きます。

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

このファイルを比較用マスターとして残します。パスに stroke="#df9d34"、stroke-width="8"、stroke-linejoin="round" を加えると、描画上の縁は丸くなりますが、暗い塗りは元の鋭い角まで届いたままです。

その角を20単位の円弧に置き換える

入ってくる線の終点を頂点から20単位左の(150, 30)へ移します。出ていく線の始点を20単位下の(170, 50)へ移します。中心(150, 50)、半径20の円が、これらの点を4分の1の円弧としてつなぎます。

2つ目の完全なファイルを emblem-rounded.svg として保存します。

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50 は、水平・垂直の半径が20、回転ゼロ、小さい弧、スイープフラグ1で、(170, 50)に終わる円弧を意味します。SVGのパス仕様がこれらのパラメーターを定義しています。この時計回りの角では、意図する4分の1円を選びます。円弧フラグのガイドは、誤った経路へ曲がる円弧の診断に役立ちます。

円の半径は最初の端点では垂直、2つ目では水平です。そのため接線は、入ってくる水平線と出ていく垂直線に沿います。曲線が丸く見えても結合部に折れがある場合がありますが、この構成では、これらの特定の辺と接線方向を一致させます。

半径が使える辺に収まるか確認する

この90度の角では、円形のフィレットは各隣接辺に沿って、半径と同じ距離を使います。入ってくる辺は140単位ですが、出ていく辺は70単位しかありません。この1つの角の構成では、正の半径は70以下である必要があります。出ていく辺に直線部分を残したい場合は、もっと小さい半径を選びます。

以下の関数は、このエンブレムと角だけに意図的に限定しています。JavaScriptコンソールやNode.jsで実行し、置き換える d 値を生成します。

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

半径80で単純に作ると、円弧は次の頂点(170, 100)を越えた(170, 110)で終わります。その後の V100 は逆方向へ戻ります。ブラウザーが何を描くかに任せず、その半径を拒否してください。

他の直線の角度では、接点までの距離は角度で変わります。内角θの通常の凸角では、その距離は r / tan(θ / 2) です。共有する辺の両端を丸める場合は、両方が使う距離を足してその辺に収める必要があります。凹角、既存の曲線、複合形状には追加の幾何学的判断が必要で、この関数は扱いません。

変えたシルエットを確認して元データを残す

1. 完全なSVGファイル2つを、同じサイズと背景で開きます。
2. 丸い結合を描く版から、一時的にストロークを外します。塗りは角張った原本と一致するはずです。
3. 丸めた版の右上の輪郭を比べます。他の辺、斜めの辺、全体の位置は原本と一致するはずです。
4. 半径チェックを20、次に80で実行します。前者は示したパスを生成し、後者は半径エラーを出します。
5. 保存したSVGを実際の使用先で確認します。意図した特徴が丸みで失われたり、使用先で見た目が変わったりする場合は、元に戻します。

検証方法：原本、丸いストローク、フィレット付きのパスをChromiumで描画しました。(169, 31)の塗りの確認点は、最初の2つの形の内部にあり、フィレット付きの形の外部にありました。上記の関数そのものは20を受け付け、80を拒否しました。円弧の両端も、半径と隣接する接線方向に照らして確認しました。これは提供した直線辺の例を検証するもので、汎用のフィレットアルゴリズムやカッターの出力の検証ではありません。

曲線が外へ膨らむ場合は、円弧の端点とスイープフラグを調べます。折れが残る場合は、曲線の接線が隣の線分と合うか確認します。ベジェの滑らかな結合ガイドが、その別の修復を説明しています。SVG編集ガイドは、開く、調べる、使えるマスターを保つ手順を扱います。

角の編集前のPerfectVectorの役割

デザインがラスター画像にしかない場合、PerfectVectorでベクターパスを取り出せます。まず取り出した輪郭を調べ、コピーでどの角を変えるか決めます。画像からベクターへの変換手順は取り出し工程を担うもので、このフィレットを自動適用するものではありません。

元のベクターファイルがあれば、それを使います。トレースした輪郭には、この直線辺の例に合わないベジェ線分や小さな凹凸がある場合があります。各トレース接続部を丸めるより、単純なエンブレムを意図どおり描き直すほうが簡単かもしれません。意図的な再設計の前に承認済みの形を残し、次の納品確認にはブログのワークフローガイドを使ってください。

よくある質問

ストロークを丸い結合にしても塗りの角が鋭いままなのはなぜですか？

結合設定は、パスの周囲に描くストロークを制御します。塗りは既存のパス形状に従うため、その形状を曲線へ置き換えるまで元の角を保ちます。

この関数をどんなSVGパスにも使えますか？

いいえ。示した直線辺のエンブレムの、指定した直角1か所を扱います。他の角度、凹角、既存の曲線、共有辺の制約には、それぞれの構成が必要です。

これでカット可能なファイルになりますか？

この例は塗りの輪郭を1つ変えます。保存した形状を調べ、実際のカッターや製造工程が求める確認を行ってください。このブラウザーテストは実物のカット結果を確立するものではありません。

出典

1. MDN — SVG stroke-linejoin — 比較で塗り形状と区別した、ストローク描画の設定を定義。
2. MDN — SVG rect — 単純な長方形に使える、より簡単な半径設定を説明。
3. W3C — SVGの楕円弧コマンド — 完全な丸めたパスで使う、円弧の半径、フラグ、端点を定義。

元のパスがなければ、PerfectVectorでデザインを取り出します。輪郭を見本と比べ、取り出したマスターを保存し、意図した角の変更を予定サイズの別コピーで試してください。