SVGマスターへの道

基本の「塗り(Fill)」と「線(Stroke)」

SVGの図形の見た目を決める最も基本的な属性は fill（塗りつぶし）と stroke（枠線）です。

fill - 図形の内部を塗りつぶす

fill 属性は、図形の内部を特定の色で塗りつぶします。色の指定方法はたくさんあります。

• 名前付きカラー (Named Colors): red, blue, lightseagreen など、約140種類の色名が使えます。
• 16進数カラーコード (HEX): #RRGGBB (例: #FF0000 は赤) や #RGB (例: #F00 は赤)、透明度付きの #RRGGBBAA (例: #FF000080 は半透明の赤)。
• RGB / RGBA: rgb(赤, 緑, 青) (各0-255、例: rgb(255,0,0)) や rgba(赤, 緑, 青, 透明度) (透明度は0.0-1.0、例: rgba(255,0,0,0.5))。
• HSL / HSLA: hsl(色相, 彩度%, 輝度%) や hsla(色相, 彩度%, 輝度%, 透明度)。色相は0-360。
• 特別な値: none または transparent を指定すると、塗りつぶしなしになります。currentColor は現在のテキスト色を使用します。

stroke - 図形の輪郭線を描く

stroke 属性は、図形の輪郭線の色を指定します。色の指定方法は fill と同じです。none を指定すると線は描かれません。

線のスタイルを極める

stroke で線の色を決めたら、次は線の太さや端の形、点線など、もっと細かいスタイルを設定してみましょう。

stroke-width - 線の太さ

線の太さを数値で指定します。通常、単位なしの数値はピクセルとして扱われます。

stroke-linecap - 線の端点の形

開いたパス（例えば <line> や閉じていない <path>）の線の端をどのような形にするかを指定します。

• butt: (デフォルト) 線が座標点で正確に終わります。
• round: 端が丸くなります。線は座標点から半径分だけはみ出ます。
• square: 端が四角くなります。線は座標点から線の太さの半分だけはみ出ます。

stroke-linejoin - 線の角の形

パスの線が折れ曲がる部分（角）の形状を指定します。

• miter: (デフォルト) 角が尖ります。非常に鋭い角度の場合、角が極端に長くなることがあります。これを制御するのが stroke-miterlimit です。
• round: 角が丸くなります。
• bevel: 角が面取りされたように平らになります。

stroke-miterlimit: stroke-linejoin="miter" の時のみ有効。線の太さに対するマイターの長さの最大比率を指定します。デフォルトは4。これを超えると、角は bevel のように処理されます。

stroke-dasharray と stroke-dashoffset - 点線・破線

stroke-dasharray は、点線や破線のパターンを定義します。カンマまたはスペースで区切られた数値のリストで、線部分の長さと空白部分の長さを交互に指定します (例: "5, 3" は長さ5の線、長さ3の空白の繰り返し)。

stroke-dashoffset は、ダッシュパターンの開始位置をずらします。アニメーションで線が動いているように見せる効果にも使われます。

透明度 (Opacity)

図形やその一部を半透明にするには、以下の属性を使います。値は 0.0 (完全に透明) から 1.0 (完全に不透明) の範囲で指定します。

• opacity: 図形全体（塗りも線も）の透明度。
• fill-opacity: 塗りつぶし部分のみの透明度。
• stroke-opacity: 線部分のみの透明度。

CSSによるスタイリング

これまで見てきた fill や stroke などの属性は「プレゼンテーション属性」と呼ばれ、SVG要素に直接記述してスタイルを指定します。しかし、SVGのスタイルはCSSを使っても指定できます。CSSを使うと、スタイルを一元管理したり、ホバーエフェクトをつけたりと、より高度な制御が可能です。

スタイルの指定方法

1. プレゼンテーション属性: <rect fill="blue" />
2. インラインCSS (style属性): <rect style="fill: blue;" />
3. 内部スタイルシート (<style>要素): SVG内の<defs>や直接<svg>直下に<style>タグを置き、CSSルールを記述します。

   <svg>
     <style>
       .myRect { fill: blue; stroke: red; stroke-width: 2; }
       .myRect:hover { fill: green; }
     </style>
     <rect class="myRect" x="10" y="10" width="50" height="50" />
   </svg>

4. 外部スタイルシート: HTMLファイルから通常のCSSファイル（例: styles.css）を読み込み、その中でSVG要素のIDやクラスに対してスタイルを定義します。これが最も一般的な方法です。

CSSプロパティ名は、SVGの属性名とほぼ同じですが、ハイフン（-）が入るものがハイフン区切りになります (例: stroke-width)。

多くのプレゼンテーション属性よりも、CSSで指定されたスタイルの方が優先度が高いです。ただし、!importantが使われるとさらに複雑になります。

まとめ

このページでは、SVG図形の見た目を豊かにするための様々なスタイリング方法を学びました。fill や stroke といった基本的な属性から、線の端点や角の形状、点線、透明度、そしてCSSを使った柔軟なスタイリングまで、多くのテクニックがあります。

これらの知識を駆使すれば、SVGで表現できるデザインの幅がぐっと広がります。インタラクティブデモで色々試して、各プロパティの効果を確かめてみてください。

次は、SVGで文字を扱う方法について学ぶ「文字だって描ける - SVGテキスト入門」です。図形だけでなく、美しいテキストもSVGの重要な要素ですよ！