SVGマスターへの道

線形グラデーション (<linearGradient>)

線形グラデーションは、ある方向に向かって色が直線的に徐々に変化する塗りです。水平、垂直、斜めなど、どんな方向にも設定できます。

主な属性:

• id: このグラデーションを識別するためのユニークなID。
• x1, y1, x2, y2: グラデーションの開始点 (x1,y1) と終了点 (x2,y2) を定義するベクトル。パーセンテージ (0%～100%) または数値で指定します。
• gradientUnits: x1, y1, x2, y2 などの座標の単位系。userSpaceOnUse (現在の座標系) または objectBoundingBox (適用対象の図形の境界ボックスを基準とする、デフォルト) を指定。
• spreadMethod: グラデーションベクトルが図形より短い場合の描画方法 (pad: 端の色で埋める (デフォルト), reflect: 反射して繰り返す, repeat: そのまま繰り返す)。

<linearGradient> 要素の中には、一つ以上の <stop> 要素を配置して、色の変化点を定義します。

• offset: グラデーションベクトル上の位置 (0%～100% または 0.0～1.0)。
• stop-color: その位置での色。
• stop-opacity: (オプション) その位置での色の不透明度。

円形グラデーション (<radialGradient>)

円形（または楕円形）グラデーションは、中心から外側に向かって色が放射状に変化する塗りです。ハイライトや光源のような効果を表現するのに適しています。

主な属性:

• id: このグラデーションを識別するためのユニークなID。
• cx, cy, r: グラデーションの外側の円の中心 (cx,cy) と半径 (r)。
• fx, fy, fr: グラデーションの焦点（光が最も強い点）の中心 (fx,fy) と半径 (fr)。frはSVG 2で追加。SVG 1.1ではfx,fyのみ。省略するとcx,cyと同じになり、同心円状のグラデーションになります。
• gradientUnits, spreadMethod: 線形グラデーションと同様。

<stop> 要素の使い方も線形グラデーションと同じです。

パターン (<pattern>)

<pattern> 要素を使うと、自分で定義した図形や画像をタイル状に敷き詰めて、図形の塗りや線として使用できます。壁紙や布地の模様のような表現が可能です。

主な属性:

• id: パターンを識別するためのID。
• x, y, width, height: パターンタイル1枚の位置とサイズ。これらの値の単位は patternUnits 属性で決まります。
• patternUnits: x, y, width, height の単位系。userSpaceOnUse または objectBoundingBox (デフォルト)。
• patternContentUnits: パターンの中身（<pattern> の子要素として描く図形）の座標系の単位。userSpaceOnUse (デフォルト) または objectBoundingBox。
• patternTransform: パターンタイル自体に適用する変形（回転、拡大縮小など）。
• href (または xlink:href): 他のパターンを継承して、それを基に変更を加えることができます。

<pattern> 要素の中に、タイルとして繰り返したいSVG図形（<rect>, <circle>, <path>, <image> など）を記述します。

まとめ

線形グラデーション、円形グラデーション、そしてパターンは、SVGの図形に深みと豊かさを与える強力なツールです。<defs> に定義し、fill や stroke 属性からIDで参照するという基本的な使い方を覚えれば、表現の幅が大きく広がります。

各属性の値をインタラクティブデモで変更してみて、その効果を確かめてみてください。特に gradientUnits や patternUnits、spreadMethod といった属性は、見た目に大きく影響するので、色々試してみるのがおすすめです。

次は、SVGにさらに高度な視覚効果を加える「魔法の効果 - SVGフィルター」について学びます。