グラデーションとは、"fill"（塗り）と"stroke"（線）プロパティの特殊な例です。グラデーションとは、ベクターに沿ってある色から別の色へ継続的でなめらかなに推移する色のことです。同じベクターに沿って他の色へさらに推移していくこと場合もあります。SVGでは、線形と円形のグラデーションを提供しています。

グラデーションは、<defs>エレメント内で指定され、グラフィック・オブジェクトのfill またはstrokeプロパティを使って参照されます。（<defs>エレメントは、定義を含む非描画エレメントです。これは、SVGドキュメントの後のほうで参照されます。）<defs>エレメントにあるものはすべて、描画されるアイテムで参照されるまでは描画されません。たとえば：

<defs>
	<radialGradient id="gradient1" cx="150.0005"
	 cy="100" r="113.7914" fx="150.0005" fy="100">
		<stop offset="0.19" style=
		 "stop-color:#FFFF00"/>
		<stop offset="0.4782" style=
		 "stop-color:#FFD00D"/>
		<stop offset="1" style=
		 "stop-color:#FE7312"/>
	</radialGradient>
</defs>

ここでは、"gradient_star"と名付けられたエレメントが黄色からオレンジ色へ変化する円形のグラデーション（"gradient1"と呼びます）をもっています。（注：SVGのすべての色値は、16進数カラー、色名、ICCプロファイル・カラーと、対応するsRGBカラーで定義することが可能です。）また、Illustratorのグラデーション・コントロールを見れば、これらの数値はIllustratorの場合に対応しますから、SVGファイルでどう見えるのか予想できるでしょう。