stroke-widthプロパティは何を制御しますか？

stroke-widthプロパティは、SVG要素やベクターグラフィックスで描かれる線（ストローク）の太さを制御します。

stroke-widthプロパティにはどんな値がありますか？

stroke-widthプロパティには、数値や長さの単位を指定でき、pxやem、パーセンテージも使用できます。

stroke-widthはどんな場面で使用しますか？

stroke-widthは、アイコン、グラフ、イラストレーションなどSVGを使った線の太さを調整する場面で使用されます。

【CSS】stroke-widthの使い方 - 線の太さを指定する

stroke-widthとは？

CSSのstroke-widthプロパティは、SVG（Scalable Vector Graphics）やベクターグラフィックスで描かれる線（ストローク）の太さを指定するために使用されるプロパティです。SVG要素を使ったグラフィックやアイコン、図形などで、輪郭や線の太さを調整することで、デザインにメリハリをつけたり、視覚的なアクセントを与えることができます。 stroke-widthは、数値や長さの単位を使って、細い線から太い線まで柔軟に調整できるため、Webデザインやイラストレーションで重要な役割を果たします。

stroke-widthの構文

.element {
  stroke-width: <length>;
}

値の詳細

length
線の太さを指定します。単位はpx、em、rem、%などが使えます。数値のみを指定した場合、pxがデフォルトとなります。例:
stroke-width: 2; → 2ピクセルの線
stroke-width: 0.5em; → フォントサイズの50%の太さ
stroke-width: 10%; → 親要素のサイズに基づいたパーセンテージ指定

stroke-widthを使った基本的な使用例

SVG内でstroke-widthを使用する方法を簡単な例で見てみましょう。以下の例では、円形（circle）の線の太さを変更しています。

例: 円のストロークの太さを変更

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" stroke="blue" stroke-width="5" fill="none" />
</svg>

解説

cx、cy: 円の中心位置を指定しています。
r: 円の半径を指定しています。
stroke: 線の色を指定します（ここでは青色）。
stroke-width: 線の太さを5ピクセルに設定しています。
fill: 円の塗りつぶしを「なし」にするため、noneを指定しています。この例では、stroke-widthを5pxに設定して、青い円の輪郭の太さを調整しています。線の太さを変えることで、図形の視覚的な強調が可能です。

単位を使ったstroke-widthの例

stroke-widthプロパティには、ピクセル（px）以外にもさまざまな単位が使えます。次に、異なる単位を使用して線の太さを指定する例を見てみましょう。

例: 異なる単位を使用したストロークの太さの調整

<svg width="200" height="200">
  <!-- ピクセル単位 -->
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4px" fill="none" />
  
  <!-- em単位 -->
  <circle cx="150" cy="50" r="40" stroke="green" stroke-width="0.5em" fill="none" />
  
  <!-- パーセンテージ単位 -->
  <circle cx="100" cy="150" r="40" stroke="blue" stroke-width="10%" fill="none" />
</svg>

解説

4px: 赤い円のストロークは4ピクセルの太さです。
0.5em: 緑の円は、em単位を使用してフォントサイズの50%の太さにしています。
10%: 青い円は、SVGの親要素に基づいた10%の太さで描かれています。このように、stroke-widthにさまざまな単位を使用することで、コンテキストに応じたサイズ調整が可能になります。

stroke-widthのアニメーション

stroke-widthプロパティは、アニメーションを適用することもできます。アニメーションを使って線の太さを動的に変更することで、インタラクティブな効果を持たせることが可能です。

例: stroke-widthのアニメーション

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" stroke="purple" fill="none" stroke-width="5">
    <animate attributeName="stroke-width" from="5" to="20" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

解説

animate要素: attributeNameでアニメーション対象の属性（ここではstroke-width）を指定し、fromとtoで開始と終了の値を設定します。durはアニメーションの継続時間を示し、repeatCountは無限に繰り返すように設定しています。
この例では、線の太さが5pxから20pxまで2秒間で変化し、繰り返されます。

stroke-widthの一般的な使用ケース

stroke-widthプロパティは、特にアイコン、グラフ、ロゴ、イラストレーションなど、SVGを活用した多くのデザイン要素で使用されます。以下はその具体的な使用例です。

アイコンやシンプルな図形のデザイン

アイコンデザインでは、線の太さが視認性に大きな影響を与えます。stroke-widthを適切に調整することで、アイコンのスタイルや用途に応じて強調したり、細部をはっきりさせることができます。

データビジュアライゼーションやグラフ

線グラフや円グラフを描く際に、異なるデータシリーズの区別をつけるために線の太さを変えることがよくあります。stroke-widthを使うことで、特定のデータセットを強調表示することができます。

ロゴやイラストレーション

SVGで描かれたロゴやイラストにおいて、線の太さは全体の印象を大きく左右します。ロゴの一部を太くしたり、細くすることで、ブランドのイメージを調整できます。

ブラウザ対応

stroke-widthは、SVGをサポートするすべてのモダンブラウザで広くサポートされています。一般的なブラウザ（Google Chrome、Firefox、Safari、Microsoft Edgeなど）では問題なく使用できます。また、モバイルブラウザでもサポートされているため、レスポンシブデザインやモバイル対応のSVGグラフィックスでも利用可能です。

まとめ

CSSのstroke-widthプロパティは、SVG要素の線の太さを調整するための重要なプロパティです。アイコンやグラフ、ロゴなど、さまざまなグラフィックデザインで活用され、視覚的な強調やデザインのメリハリをつけるために役立ちます。また、アニメーションと組み合わせることで、インタラクティブな動的効果も実現できます。線の太さを調整することで、デザインの意図をより明確に伝えることができるため、SVGを使ったWebデザインにおいてstroke-widthは非常に重要なプロパティです。ぜひ活用して、デザインにアクセントを加えてみてください

参照:

stroke-width - SVG: Scalable Vector Graphics | MDN