"<pattern>"

Defines a paint server containing a repeated pattern, which is tiled to fill the area.

• DOM object: SVGPatternElement
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#Patterns

A <pattern> is a tileable paint server: you draw a small graphic once inside the <pattern> element, then fill any shape with fill="url(#id)" and SVG repeats (tiles) that graphic across the filled region. Unlike gradients, which vary color smoothly, a pattern repeats an arbitrary sub-drawing — stripes, dots, crosshatches, custom textures — as many times as needed to cover the shape.

Patterns are typically declared inside a "<defs>" block. The width and height control the size of each tile (in either object-bounding-box or user-space units depending on patternUnits), and the viewBox lets the pattern contents author their own coordinate system. For smooth color transitions, use "<linearGradient>" or "<radialGradient>" instead.

<pattern id="MyPattern" viewBox="0,0,10,10" width="15%" height="15%">
  <circle cx="5" cy="5" r="5" fill="red" />
</pattern>

To reference it with a fill:

<rect fill="url(#MyPattern)" width="300" height="300" />

patternUnits: objectBoundingBox vs userSpaceOnUse

The patternUnits attribute controls how the pattern's tile rectangle (x, y, width, height) is interpreted. The two modes produce very different results when the same pattern is applied to shapes of different sizes.

• objectBoundingBox (default): the tile size is a fraction of the filled shape's bounding box. A 20% × 20% tile produces 5 × 5 tiles across any shape, so the pattern scales with the shape. Useful for "N tiles across" effects regardless of shape size.
• userSpaceOnUse: the tile size is in absolute user-space units (pixels). A 20 × 20 pixel tile produces more or fewer tiles depending on how large the shape is, so the pattern stays the same physical size across shapes. Useful for repeating textures that shouldn't distort with scale.

patternTransform

patternTransform applies an extra transformation to the tile grid — you can rotate, skew, or scale the tiling without affecting the filled shape itself. Common uses include diagonal stripes (rotate 45°) and textures drawn "on an angle".

Attribute	Default	Description
viewBox	(none)	A list of four numbers (min-x, min-y, width, height) that specifies a rectangle in userspace mapped to the pattern viewport.
preserveAspectRatio	xMidYMid meet	How to scale the viewport to fit the content. Only applies if viewBox is specified.
x	0	Top-left X of the tile rectangle. Interpretation depends on patternUnits.
y	0	Top-left Y of the tile rectangle. Interpretation depends on patternUnits.
width	0	Width of one tile. Interpretation depends on patternUnits.
height	0	Height of one tile. Interpretation depends on patternUnits.
patternUnits	objectBoundingBox	Coordinate system for x, y, width, height: objectBoundingBox (fraction of the filled shape's bounds) or userSpaceOnUse (absolute user-space units).
patternContentUnits	userSpaceOnUse	Coordinate system for the pattern contents. Has no effect when viewBox is specified.
patternTransform	identity	Additional transform applied to the tile grid (rotate, skew, scale) without affecting the filled shape.
href	(none)	Reference to another pattern element to use as a template.