SVGをグラデーションで塗りつぶす

Illustratorでグラデーションで塗りつぶしたベクター画像をSVG書き出しすると、
わざわざグラデーション部分をラスタライズ画像として保存しマスキングする構造のSVGを生成してくれます。
せっかくビットマップ画像と決別したかったのにこれでは煮え切らない (笑)
ということでXMLコードだけでfillをグラデーションにする方法を探しました。

SVG内の画像素材を取り扱えるdefsタグ

グラデーションやパターンをSVG内の素材として定義できる、defsタグというのがありました!
これで、linearGradientradialGradientを書けば
線状グラデーション、円状グラデーションを設定できます。

<br />
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;<br />
	&lt;defs&gt;<br />
		&lt;linearGradient id=&quot;gradient&quot;&gt;<br />
			&lt;stop offset=&quot;0%&quot; stop-color=&quot;white&quot; /&gt;<br />
			&lt;stop offset=&quot;100%&quot; stop-color=&quot;black&quot; /&gt;<br />
		&lt;/linearGradient&gt;<br />
	&lt;/defs&gt;<br />
        &lt;path fill=&quot;url(#gradient)&quot; d=&quot;(略)&quot; /&gt;<br />
&lt;/svg&gt;<br />

idで命名し、url(#ID名)でfillに紐付けます。

参考:
defs – SVG | MDN

CSSだけでグラデーション塗りつぶしイラストが置ける

data:image/svg+xmlと組み合わせて、画像ファイルを置かずにグラデーションつきSVG画像を表示させたサンプルです。

See the Pen SVG gradient by webdev (@webdev-jp-net) on CodePen.0

関連記事