CSSスタイリングのためのfill属性の除去

CSSスタイリングのためのfill除去

SVGスプライト構築時の最も一般的な問題の1つは、ソースSVGにハードコードされたfillとstroke属性があり、CSSによる色制御を妨げることです。これらの属性を除去することが、柔軟でテーマ対応可能なアイコンシステムの構築に不可欠です。

問題

SVGパスにハードコードされたfillがある場合：

<symbol id="icon-star" viewBox="0 0 24 24">
  <path fill="#FFD700" d="M12 2l3.09 6.26..."/>
</symbol>

CSSでこの色をオーバーライドできません。<use>で作成されたシャドウDOM内で、ハードコードされたfill="#FFD700"はプレゼンテーション属性として継承されたスタイルよりも優先されます。

解決策

fillとstroke属性を除去してSVGがCSSから色を継承するようにします：

<symbol id="icon-star" viewBox="0 0 24 24">
  <path d="M12 2l3.09 6.26..."/>
</symbol>

CSSで色を制御できるようになります：

.icon { fill: currentColor; }

保持すべきもの

すべてのfillとstroke属性を除去すべきではありません：

• fill="none" — 領域を透明に保ちます。除去するとデフォルトのfill色（黒）になります。常に保持してください。
• stroke="none" — 明示的にストロークを除去します。保持して安全です。
• fill="currentColor" — CSS制御用にすでに設定されています。除去する必要はありません。

currentColorの使用

currentColorキーワードはCSSのcolorとSVGのfillの架け橋です。モノクロアイコンのデザインシステムで推奨されるアプローチです。

自動化

SVGスプライトジェネレーターには「Remove fill/stroke」トグルがあり、これを自動的に処理します。ビルドパイプラインでは、SVGOをプレゼンテーション属性を除去するように設定できます。