SVGのストローク配置：輪郭を内側・外側に置く

SVGのストロークはパスを中心に描かれます。閉じた形状の完全に内側に12単位の輪郭を置くには、24単位のストロークを描き、その形状でクリップします。同じ幅を外側に置くには、形状内部を隠すマスクを通して24単位を描きます。元パスのコピーを保持してください。クリップとマスクは見えるものを変え、元の形状は変えません。

提案されたstroke-alignmentプロパティはSVG Strokesの編集者草案にありますが、草案はSVG 2のストローク定義が規範のままとしています。ブラウザーや編集ソフト間で使うファイルには、提案のプロパティに頼らず、見える結果を構築してテストします。

描画される輪郭の位置を見る

このオリジナルの閉じたバッジは、3パネルすべてで同じパスを使います。青緑の塗り、公称12単位の見える輪郭、周囲の文書空間は同じです。珊瑚色の破線は中心パスです。中央では青帯の外側の縁、右では内側の縁に一致します。

中央パネルは、描画されたバッジの外側境界を元パスに保持します。外側パネルはパス周囲へ12単位広がります。viewBoxの端に近いと、追加部分が切れる場合があります。MDNの塗りとストロークのガイドは通常のストロークをパス中心と説明し、上の比較は3構成を1サイズで描画しています。

クリップで内側輪郭を作る

閉じたパスを<defs>に置き、塗りとクリップに各1回再利用します。別のコピーを必要幅の2倍で描き、そのストロークをパス内部へ制限します。クリップは形状外を見えなくしますが、隠れた半分を削除しません。MDNのclipPathリファレンスを参照し、読み込み後にクリップがずれたらclipPath座標ガイドを使います。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

24単位のストロークは通常パスの両側へ12単位届きます。クリップが外半分を除き、内側に12単位の見える帯を残します。内帯全体を見せるには、例のように塗りをクリップ付きストロークの下へ置きます。穴のある複合パスでは、内側を決めつける前に塗りとクリップの規則を確認します。

マスクで外側輪郭を作る

外帯には逆の可視領域が必要です。次のマスクは文書領域が白、バッジ内部が黒です。ストロークのコピーだけに適用し、マスクなしのコピーが塗りを供給します。明示的な領域が元形状の外のストローク用空間を確保します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

ここも中央24単位の半分だけが残り、外帯は12単位です。領域を意図的に設定してください。MDNの説明はmaskUnits、maskContentUnits、領域寸法の影響を扱います。白い長方形は外ストローク全体を覆う必要があります。小さすぎるマスクは、保ちたいエッジを切る場合があります。

不透明な塗りには短い視覚上の方法もあります。2倍幅のストロークを描き、paint-order="stroke fill"でその上に塗りを描きます。内半分は塗りに隠れますが存在し、塗りを半透明にしたり除いたりすると再び見えます。MDNの描画順の説明を参照してください。外帯を別の見える構成として保つなら明示的マスクを使います。多色アルファ全体のシルエット由来の輪郭はSVGのモルフォロジー輪郭を参照してください。元パスを保持して見た目を変えるフィルターです。

読み込み後のSVGを確認する

クリップとマスクは描画に作用しますが、下流アプリは塗りの輪郭を必要とする場合があります。編集可能なマスターを保持し、実際の利用先で納品コピーをテストします。

1. SVGを単独で開き、予定編集ソフトや生産アプリに置きます。同じ拡大率で内外の縁を比較します。
2. 外側版のviewBoxやアートボードを確認します。12単位の外帯と鋭い角の接続用空間を残します。
3. オブジェクト一覧を確認します。例は再利用パス、クリップかマスク、ライブストロークであり、1つの塗りつぶした輪郭は作りません。
4. 塗り形状が必要なら納品コピーで選んだストロークを変換し、できた形状を確認します。後の幅変更用にライブストローク元データを保持します。

書き出しで線が消えたら、ストローク可視性のチェックリストで描画色の欠落、クリッピング、読み込み対応を分けます。ストロークが塗りを予想外に覆う場合、SVG描画順の解説が最後に描くレイヤーを説明します。

PerfectVectorの役割

これらは編集可能なSVGパスから始める手順です。ロゴがPNGやJPGだけなら、クリップやマスクを加える前にPerfectVectorのロゴベクター化手順で候補を作れます。予定納品サイズでシルエット、角、開口部を元画像と比較します。ベクター化は形状候補を復元するもので、内外のストローク配置は指定しません。

元SVGパスがあれば直接編集してください。そのスクリーンショットのトレースは不要な再構築を加え、揃えたい境界を変える場合があります。ロゴベクター化ガイドは、トレース、描き直し、既存マスターの保持の選択を支援します。

よくある質問

SVGは内側・外側ストローク配置に対応しますか？ SVG Strokes編集者草案はその値を説明しますが、SVG 2が規範の定義のままとしています。持ち運べる納品には、草案のプロパティに依存せず検証したクリップやマスクを使います。

なぜストローク幅を2倍にしますか？ 通常のストロークはパスの両側に半分ずつあります。クリップやマスクが片方を捨てるため、例の24単位は内か外に見える12単位の帯を残します。

内クリップや外マスクで切断用輪郭ができますか？ いいえ。元パスとストロークを残したまま描画の見た目を変えます。塗りの輪郭が必要なら別の納品コピーを作り、適切な編集ソフトでストロークをパスに変換し、読み込み後の形状を確認します。

参考資料

1. MDN — 塗りとストローク — 中央ストロークと描画順の動作を定義しています。
2. W3C SVG Working Group — SVG Strokes編集者草案 — 提案された配置値とSVG 2に対する草案の位置づけを示します。
3. MDN — clipPath要素 — 内側構成の可視性制限を定義しています。
4. MDN — mask要素 — 外側構成の領域と座標属性を定義しています。
5. Alex Chan — SVGの内側・外側ストローク — オリジナルのバッジ例の出発点となった2倍幅のクリップとマスクを示します。

ロゴがまだラスターなら、PerfectVectorでSVG候補を作成し、パス境界を確認します。その後、編集ソフトで内側か外側の構成を試し、納品ファイルを利用先で検証してください。