SVGを画像パターンで塗りつぶす

defsを使うとSVGのfill(塗りつぶし)にパターンも定義できます。

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

パターンのタイル1個分のSVG

リピートさせてパターンとする、素の図案のSVGを用意します。
8×8のドットです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
	<circle fill="black" cx="1.5" cy="1.5" r="1"/>
	<circle fill="black" cx="5.5" cy="5.5" r="1"/>
</svg>

塗りつぶしたい範囲のSVG

塗りつぶしたい範囲のSVGを用意します。
400×400の矩形です。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
	<rect width="400" height="400" fill="black" x="0" y="0" />
</svg>

タイル1個ぶんのSVGをdefsでパターン定義

塗りつぶしたい範囲のSVGにdefsタグを追加して、タイル1個ぶんのSVGをpatternとして定義します。
※この時点では見た目に変化なし

このとき、patternwidthheight
タイルサイズを塗りつぶし範囲で割った数値にしておきます。

この例だとこうなります

8(タイルのサイズ) ÷ 400(塗りつぶし範囲のサイズ) = 0.02

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
	<defs>
		<pattern x="0" y="0" width=".02" height=".02">
			<circle fill="black" cx="1.5" cy="1.5" r="1"/>
			<circle fill="black" cx="5.5" cy="5.5" r="1"/>
		</pattern>
	</defs>
	<rect width="400" height="400" fill="black" x="0" y="0" />
</svg>

fill(塗りつぶし)としてpatternを紐づける

patternidを付与して、塗りつぶし範囲のrect(矩形)のfill(塗りつぶし)として定義します。

紐付けはurl(#id名)という書式になります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
	<defs>
		<pattern id="dot" x="0" y="0" width=".02" height=".02">
			<circle fill="black" cx="1.5" cy="1.5" r="1"/>
			<circle fill="black" cx="5.5" cy="5.5" r="1"/>
		</pattern>
	</defs>
	<rect width="400" height="400" fill="url(#dot)" x="0" y="0" />
</svg>

関連記事