SVGのマイターの突起：鋭い角と切れを直す

SVG輪郭の針のような先端は、通常、鋭角のマイター接続から生じます。不要ならstroke-miterlimitを下げるか、ベベルまたは丸い接続を選びます。デザインの一部なのに先端が消える場合は、viewBox内に描画ストローク用の余裕を作ります。前者は角の形、後者は表示できる範囲を変える、別の修正です。

テスト中は元のSVGを保管します。意図的な鋭いロゴの先端はマイターを保つ必要があり、読み込んだ輪郭の不要な突起は平らにする必要があるかもしれません。まず、どの角を残したいか決めます。

狭い角が突起を作る理由

ストロークのパスは中心線の両側に幅を持ちます。stroke-linejoin="miter"では外側の縁が交わるまで延長します。角が鋭いほど交点は遠くなります。SVG 2の描画定義によると、初期接続はmiter、stroke-miterlimitの初期値は4です。

制限は比率で、ピクセルやSVG単位の距離ではありません。マイター長をstroke-widthで割った値が制限を超えると、通常のmiter接続はベベルになります。高い制限は長い先端を許し、低い制限はより多くの鋭角を平らにします。MDNのマイター制限リファレンスは角度との関係を示し、CSSがSVG属性を上書きできるとしています。

1つのパス、4つの見える結果

このテストではd="M130 520 L180 200 L230 520"の開いた角張った紋章区間を、26単位のストロークで描きました。最初の2パネルはマイター制限10です。2つ目はy=170の狭い可視境界で先端を切ります。3つ目は制限4でベベルになり、4つ目はroundです。そのパスとレンダラーの条件を制御した図示で、すべての読み込んだSVGが同じ角になる約束ではありません。

赤い破線の中心パスは全パネルで同じです。接続を変えると、元のベクターパスを再構築せず描画輪郭を修正できることが重要です。

突起、ベベル、切れた先端を区別する

切れた先端は、一見意図的なベベルに似る場合があります。拡大し、端がファイル境界に揃うか確認します。消えるSVGストロークの診断は他の描画・クリップ原因を扱い、ここではマイター角に絞ります。

間違ったものを変えず角を直す

1. パスと実効的な接続を探す

ベクター編集ソフトで角を選ぶか、SVGテキストのstroke、stroke-width、stroke-linejoin、stroke-miterlimitを調べます。パス属性に加え、親グループとCSSも確認します。MDNの説明のとおり、インラインやスタイルシートのstroke-miterlimitが同じ属性より優先する場合があります。

ライブストロークでなく塗り輪郭なら、マイター調整をやめます。その塗りのパスを変えるか、未展開ストロークのマスターへ戻ります。読み込み全体のサイズが違うなら、線幅で補う前に既知サイズのSVG読み込みテストを行います。

2. 複製の接続設定を1つ変える

機械的な平らな角を許せるなら、まずbevelを試します。柔らかな縁が許されるならroundを試します。正確な先端が記号の一部ならmiterを保ち、意図した先端だけを残す制限を選びます。SVGのstroke-linejoinリファレンスは一般的な接続形の違いを定義します。

上のパスの小さなテストコピーです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

stroke-miterlimitを4へ変え、この角のベベル代替を確認します。10に戻してstroke-linejoinをroundかbevelへ変えます。その2種類ではstroke-miterlimitは無関係です。他の先端は意図的かもしれないため、1角の不具合だけでロゴ全体の制限を下げないでください。

3. 必要な先端にキャンバスを確保する

マイターは正しいのに端で消えるなら、パス座標だけでなく描画結果の周囲にviewBoxを広げるか位置を変えます。SVG 2の座標系定義は可視長方形を説明します。ストロークは中心パスの座標外へ伸びます。入れ子ビューポートとクリップパスも確認します。ルートのviewBoxを広げても親クリップが切り続ける場合があります。

大きなキャンバスを偶発的な針の修正と扱わないでください。その突起の見える範囲を広げるだけです。逆に狭いアートボードに収めるためbevelにすると設計した角を消す場合があります。実際の表示・印刷サイズで元の記号と納品ファイルを比較します。業者が物理的SVGサイズを測るなら、意図した幅と高さを保ち、viewBoxの対応を意図的に変えます。

4. 納品ファイルを開き直す

ブラウザーと利用先の編集・生産アプリで確認します。100%と最終サイズで先端を見ます。ライブストロークでなく塗り輪郭が要件なら元マスターを残し、編集ソフトで納品コピーをアウトライン化して新しい境界を調べます。アウトライン化は形状を変え、可逆なマイター設定ではありません。広い塗りと輪郭の確認にはSVG描画順ガイドを使います。

ラスターロゴに先に新しいパスが必要な場合

マイター制御はライブのベクターストロークだけに作用します。ロゴがPNGやJPGしかないなら、角の編集前にPerfectVectorのロゴベクター化手順で候補を作れます。復元シルエット、小さな隙間、パス構造を元と比較します。太いラスター線のトレースは元の編集可能な中心線でなく塗り輪郭になる場合があるため、stroke-miterlimitで自動修復できるとは考えないでください。ブランドマスターに厳密に合わせる幾何学的な先端は描き直します。

元SVGがあればスクリーンショットをベクター化せず、そのファイルを修復します。ロゴベクター化ガイドは本当にピクセルから再構築する場合に役立ちます。この記事は適したライブストロークがある段階から始まります。

最終的な角の確認

1. 手を加えていないベクターマスターを保存します。
2. ライブストロークか塗り輪郭かを確定します。
3. 対象パス1つでmiter、bevel、roundを比較します。
4. miterを保つなら制限を試し、描画先端全体の可視空間を残します。
5. 実際の利用先でSVGを開き直し、最終サイズで確認します。

よくある質問

SVGの鋭角に突起があるのはなぜですか？ マイターは外側のストローク縁を交わるまで延長します。鋭角では交点が中心パスから遠くなります。不要な先端には制限を下げるかbevelやroundを使います。

stroke-miterlimitを下げると角が平らになるのはなぜですか？ マイター長とストローク幅の比率が制限を超えると、通常のmiterはbevelに代替します。低い値はより多くの角で代替を起こします。意図的な鋭い先端なら高い制限を保ち、境界を確認します。

制限を上げても先端が切れるのはなぜですか？ 高い制限が先端を長くしても、viewBoxやクリップは切り続ける場合があります。描画ストロークの可視領域を広げるか位置を変え、納品SVGを利用先で開き直します。

参考資料

1. W3C — SVG 2の描画 — 接続、初期値、マイターの代替動作を定義します。
2. MDN — stroke-miterlimit — 制限比率と鋭角との関係を説明します。
3. MDN — stroke-linejoin — ストロークパスの一般的な角形状を定義します。
4. MDN — CSSのstroke-miterlimit — SVG属性に対するCSSの優先を説明します。
5. W3C — SVG 2の座標系 — 境界確認に使うviewBoxとビューポートの関係を定義します。

ラスターだけの記号に修正用のパスが必要なら、ロゴからSVG候補を作成し、形状を確認してください。その後、重要な角を調整するか描き直します。