SVG (スケーラブル ベクター グラフィックス) では、グラデーションを使用して、滑らかに変化する色で形状を塗りつぶします。 SVG には、線形グラデーションと放射状グラデーションという 2 つの主なタイプのグラデーションがあります。両方の例を示します。

線形グラデーション:

例 1: 垂直線形グラデーション

 XML
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Define linear gradient -->
  <linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>

  <!-- Apply linear gradient to a rectangle -->
  <rect width="200" height="200" fill="url(#linearGradient)" />
</svg>

例 2: 斜めの線形グラデーション

 XML
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Define linear gradient -->
  <linearGradient id="diagonalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>

  <!-- Apply linear gradient to a rectangle -->
  <rect width="200" height="200" fill="url(#diagonalGradient)" />
</svg>

放射状グラデーション:

例 3: 放射状グラデーション

 XML
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Define radial gradient -->
  <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </radialGradient>

  <!-- Apply radial gradient to a circle -->
  <circle cx="100" cy="100" r="100" fill="url(#radialGradient)" />
</svg>

これらの例では、 <linearGradient>と<radialGradient>の要素がグラデーションを定義し、その内側の<stop>要素がグラデーションに沿ったカラーストップを定義します。シェイプのfill属性 (たとえば、 <rect>または<circle> ) は、 url(#gradientId)構文を使用してグラデーションを参照します。

属性と値を自由に試して、さまざまなグラデーション効果を作成してください。