グラデーション
 色の濃淡を段階的に変化させたものを日本語ではグラデーションgradationというが,以下においてグラデーションを表現するために用いる英語はgradient(傾き)となっている.
 SVGグラフィックスで使えるグラデーションには線形グラデーションと円形グラデーションがある.
(1)
(1)は線形グラデーションの基本です.
<defs>
<linearGradient id="red_to_yellow">
<stop offset="0%" style="stop-color:red;" />
<stop offset="100%" style="stop-color:yellow;" />
</linearGradient>
</defs>
<rect x="1" y="1" width="18" height="8" style="fill:url(#red_to_yellow); stroke:black;stroke-width:0.1;" /> @
<ellipse cx="10" cy="15" rx="8" ry="4" style="fill:url(#red_to_yellow); stroke:none;" /> A

 まず,<defs>要素を使って,線形グラデーションのテンプレート(型版)を作ります.
 <linearGradient >は />で閉じずに>だけとし,</linearGradient>までを要素とします.
 ここで命名したid識別子を参照する側@Aでは,#を付けます.
 offsetは0%から100%まで,または0から1まで指定するのが基本です.これにより既定値として「左から右へ,0%のstop-colorから100%のstop-colorまで」のグラデ―ションが描かれます.
(2)
 stop-offsetとstop-colorの組は2つとは限られず,0%と100%の間を何色にも色分けすることができます.(2)は
<defs>
<linearGradient id="rainbow1">
<stop offset="0%" style="stop-color:red;" />
<stop offset="18%" style="stop-color:orange;" />
<stop offset="36%" style="stop-color:yellow;" />
<stop offset="54%" style="stop-color:green;" />
<stop offset="72%" style="stop-color:blue;" />
<stop offset="90%" style="stop-color:indigo;" />
<stop offset="100%" style="stop-color:violet;" />
</linearGradient>
</defs>
の形で7色に色分けしたものです.

(3)
 stop-offset,stop-colorに加えて不透明度opacityを不透明は1,透明は0の間で指定することができます.
左の図で,上の楕円はopacity指定なし(opacity:1;),下の楕円はopacity指定をしたものです.
<defs>
<linearGradient id="green_to_yellow1">
<stop offset="0%" style="stop-color:green;" />
<stop offset="100%" style="stop-color:yellow;" />
</linearGradient>
<linearGradient id="green_to_yellow2">
<stop offset="0%" style="stop-color:green;stop-opacity:0.8;" />
<stop offset="100%" style="stop-color:yellow;stop-opacity:0.1;" />
</linearGradient>
</defs>

(4)
 グラデーション・ベクトルの定義
 グラデーションは既定値では「左から右へ,0%から100%に向かって」変化しますが,この向きを変更することができます.(4)の左上の図は次のように書いたものです.
<defs>
<linearGradient id="down1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:red;stop-opacity:1;" />
<stop offset="100%" style="stop-color:yellow;stop-opacity:1;" />
</linearGradient>
</defs>
<circle cx="5" cy="5" r="4" style="fill:url(#down1); stroke:none;" />
これにより↓向きのグラデーションになります.
(x1,y1)から(x2,y2)へ向かうベクトルがグラデーションの変化する向きを表すようになっています.
(4)の右上の図はx1="0%" y1="100%" x2="0%" y2="0%"(すなわち↑の向き),
左下の図はx1="100%" y1="0%" x2="0%" y2="0%"(すなわち←の向き),
右下の図はx1="0%" y1="0%" x2="100%" y2="0%"(すなわち→の向き)
(5)
(5) 斜め向きのグラデーションもあります.なお,座標で向きを考えるときに,デフォルトでyは下が正であることに注意
左上の図は
x1="0" y1="0" x2="1" y2="1"(すなわち(0,0)→(1,1)向き:
右上の図は
x1="0" y1="1" x2="1" y2="0"(すなわち(0,1)→(1,0)向き:
左下の図は
x1="1" y1="0" x2="0" y2="1"(すなわち(1,0)→(0,1)向き
右下の図は
x1="1" y1="1" x2="0" y2="0"(すなわち(1,1)→(0,0)向き

(6)
(6)は円形グラデーションの例です.円形グラデーションを描くには<radialGradient>を使います.
(6)の左は,
<defs>
<radialGradient id="rad1">
<stop offset="0%" style="stop-color:white;stop-opacity:1;" />
<stop offset="100%" style="stop-color:black;stop-opacity:1;" />
</radialGradient>
</defs>
<circle cx="5" cy="5" r="5" style="stroke:none;fill:url(#rad1);"/>
(6)の右は,
<radialGradient id="rad2">
<stop offset="0%" style="stop-color:violet;stop-opacity:1;" />
<stop offset="25%" style="stop-color:indigo;stop-opacity:1;" />
<stop offset="40%" style="stop-color:blue;stop-opacity:1;" />
<stop offset="55%" style="stop-color:green;stop-opacity:1;" />
<stop offset="70%" style="stop-color:yellow;stop-opacity:1;" />
<stop offset="85%" style="stop-color:orange;stop-opacity:1;" />
<stop offset="100%" style="stop-color:red;stop-opacity:1;" />
</radialGradient>
</defs>
<circle cx="15" cy="5" r="5" style="stroke:none;fill:url(#rad2);"/>
と書いたものです.