1. 導入：なぜ今、strokeプロパティを見直すべきなのか
Webサイト制作において、アイコンやロゴをSVGで実装することは今や一般的です。しかし、SVGの装飾をすべてHTMLの属性（attribute）で制御していると、CSSによるレスポンシブ対応やホバー時の色変更が煩雑になりがちです。CSSのstrokeプロパティを理解し活用することで、SVGの「枠線」に関するスタイルをCSSで一元管理できるようになります。これにより、メンテナンス性の高いコードが実現し、デザインの変更にも柔軟に対応できるようになります。
2. 基礎知識：strokeプロパティの役割
strokeは、SVG要素の輪郭線（塗り）を指定するCSSプロパティです。HTML要素（divなど）には直接適用できず、rect、circle、pathなどのSVG要素に対して有効です。
重要なのは、CSSで指定したstrokeは、SVG要素に直接書かれた属性（stroke=”red”など）よりも優先されるという点です。これにより、マークアップはそのままで、CSSだけで見た目を動的に切り替えることが可能になります。なお、現時点でのブラウザサポートでは、strokeは主に色の指定に使用され、線の太さや破線などは個別のプロパティ（stroke-widthなど）で制御するのが一般的です。
3. 実装/解決策：CSSによる効率的な制御
実務では、SVGファイル内のインラインコードにCSSクラスを付与し、ホバー時にstrokeの色を変化させる手法が最も効率的です。また、SVG内の塗りつぶし（fill）と併用することで、よりリッチな表現が可能になります。
4. サンプルプログラム：ホバーで色が滑らかに変わるSVGアイコン
以下のコードは、CSSのクラス切り替えでstrokeを制御する実用例です。そのままコピーして確認してみてください。
5. 応用・注意点：現場で陥りやすい罠
実務で特に注意すべきポイントは以下の2点です。
・CSSグラデーションは使えない
CSSのlinear-gradientなどはstrokeプロパティの値として指定できません。グラデーションの線を引く場合は、SVG内でdefsタグを使ってlinearGradientを定義し、そのIDをCSSのurl(#id)形式で指定する必要があります。
・paint-orderプロパティの活用
strokeはデフォルトで要素の境界線の中心に描画されます。太い枠線を引くと、図形のサイズが意図せず大きく見えることがあります。そんな時は、CSSのpaint-order: stroke fill;を併用してください。これにより、strokeが塗り（fill）の下に描画されるようになり、図形の形状を維持したまま枠線を太くすることが可能です。
これらのテクニックを使いこなすことで、SVGの表現力は格段に向上します。ぜひ、次回のプロジェクトから「属性頼み」のSVGから「CSS制御」のSVGへ切り替えてみてください。
コメント