SVG要素をデフォルトの`border-radius`適用対象から除外

Web Awesome 3.3.0では、native.cssのメディア要素に対するborder-radiusの適用ルールからsvg要素が除外されました。これにより、アイコンや透明背景を持つSVGに対する不要な角丸処理が回避されます。

背景

Web Awesomeはnative.cssで画像・動画・SVGなどのメディア要素に対して統一的なスタイルを適用していました。具体的には、img、picture、video、svgの4要素に対してborder-radius: var(--wa-border-radius-m)を設定し、メディアコンテンツに一貫した角丸表現を提供していました。

しかし、SVG要素の多くはアイコンやロゴとして使用され、透明な背景を持つケースが一般的です。このような用途では角丸処理が視覚的に不適切であり、デザイン意図に反する結果を生む可能性がありました。

技術的な変更

packages/webawesome/src/styles/native.cssで、メディア要素に対するスタイル定義が2つのルールセットに分割されました。

変更前:

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;

  border-radius: var(--wa-border-radius-m);
}

変更後:

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;
}

img,
picture,
video {
  border-radius: var(--wa-border-radius-m);
}

max-widthとheightは引き続き全メディア要素に適用されますが、border-radius はimg、picture、videoの3要素のみに限定されます。SVG要素は角丸処理の対象から外れ、要素本来の形状が保持されます。

設計判断

ルールセットの分割による段階的な適用 という方式が採用されました。

PR本文では、SVGが「アイコンとして使用されることが多く、透明背景を持つことが一般的」であるため、角丸処理が「益よりも害をなす可能性が高い」と説明されています。この判断に基づき、レスポンシブ対応に必要なmax-widthとheightは維持しつつ、視覚的スタイルであるborder-radiusのみを選択的に除外する設計となりました。

ネガティブマージンやオーバーライドで対応する代替案と比較して、デフォルトスタイルの適用範囲を最初から限定することで、開発者が個別にスタイルを打ち消す必要性を減らしています。

まとめ

本PRは、SVGの一般的な使用パターンに基づいてデフォルトスタイルの適用対象を調整した変更です。メディア要素全体に対する統一的なスタイル定義を見直し、要素の特性に応じた段階的な適用へと改善することで、より実用的なデフォルトスタイルを提供しています。