SVG Patterns
SVG patterns allow you to fill shapes with any repeating graphical tile. Unlike CSS background-image patterns, SVG patterns are resolution-independent and can contain any SVG content.
The pattern Element
The pattern element is always defined inside defs and referenced via fill="url(#id)" on a shape. It works similarly to gradients in this regard.
Inside the pattern element, you draw whatever you want to repeat. The element then tiles that content to fill the target shape.
Main Attributes
| Attribute | Description |
|---|---|
id |
The unique ID used to reference the pattern. |
x, y |
Offset of the pattern tile's starting position. Typically 0. |
width, height |
The size of one tile. The content is repeated both horizontally and vertically to fill the target shape. |
patternUnits |
Defines the coordinate system for x, y, width, and height. userSpaceOnUse uses the SVG's user coordinate system (pixels). objectBoundingBox (the default) uses fractions of the target shape's bounding box. |
Example: A Repeating Dots Pattern
Here we define a 20×20 pixel tile containing a single circle, then use it to fill a rectangle:
The tile is 20×20 units, with a circle of radius 5 drawn at the center of each tile (10,10). The browser automatically repeats this tile as many times as needed to cover the entire rectangle.
You can put any SVG content inside a pattern tile to create complex repeating textures.