SVGのグラデーション：線形と放射
コード例つき
SVGのグラデーションは <defs> 内で一度定義し、fill="url(#id)" で適用します。種類は線形（linear）と放射（radial）の2つです。
線形グラデーション
<defs> <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"> <stop offset="0" stop-color="#6c8cff"/> <stop offset="1" stop-color="#ff6c9c"/> </linearGradient> </defs> <rect width="100" height="100" fill="url(#g1)"/>
x1,y1 -> x2,y2 が方向（0〜1）を定義。各 stop は offset を持つカラーストップです。
放射グラデーション
<radialGradient id="g2"> <stop offset="0" stop-color="#fff"/> <stop offset="1" stop-color="#6c8cff"/> </radialGradient>
中心から外側へ広がります。ハイライトや球体に便利。
複数のストップ
2つ以上の stop で多色のグラデーションにできます。offset は0〜1（または％）。
グラデーションの透明度
ストップに stop-opacity を使うと、色が透明へフェードします。
再利用
同じグラデーション（id で）を複数の図形に適用できます。<defs> 内で一度定義します。
視覚的に作る
svgdeskで塗りと線の色を設定し、コードパネルにグラデーションのブロックを貼って即確認できます。