What do the width and height attributes on a element control?

The size of a single repeating tile

The total size of the final filled shape

The stroke thickness applied to the pattern's content

With the default patternUnits='objectBoundingBox', what does width='0.25' mean for a pattern tile?

The tile is 25% of the width of the shape's bounding box

The tile is exactly 0.25 user units (pixels) wide

The tile repeats exactly 25 times across the shape

What does patternContentUnits control, separately from patternUnits?

The coordinate system used for the shapes drawn inside the pattern's tile

The number of times the tile repeats across the target shape

Whether the pattern tile has rounded or square corners

How would you rotate a pattern's tile by 45 degrees without altering the shapes drawn inside it?

Apply patternTransform='rotate(45)' on the element

Add transform='rotate(45)' to each shape inside the pattern individually

Patterns cannot be rotated as a whole; only their individual content can rotate

SVG Patterns

Learn how the <pattern> element tiles a small piece of artwork across a shape's fill, turning any repeated icon or texture into reusable SVG paint.

Defining a Pattern

A <pattern> is declared inside <defs> with an id, a tile size (width and height), and its own child content - any shapes you like. Once defined, a shape references it exactly like a gradient, with fill="url(#id)". The browser repeats the pattern's content tile after tile, both horizontally and vertically, until the target shape is completely covered, then clips the result to that shape's outline.

patternUnits and Tile Size

The default patternUnits value, objectBoundingBox, makes width and height fractions (0 to 1) of the shape being filled, so width="0.2" repeats the tile five times across the shape regardless of its actual size. Most real patterns instead set patternUnits="userSpaceOnUse" so width and height are absolute pixel dimensions, which keeps a tile - say, a 20x20 dot grid - the same physical size no matter how big or small the filled shape is.

Example

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <pattern id='dots' patternUnits='userSpaceOnUse' width='20' height='20'>
      <rect width='20' height='20' fill='#eef3f8'/>
      <circle cx='10' cy='10' r='3' fill='#4f9dde'/>
    </pattern>
  </defs>
  <rect x='0' y='0' width='200' height='200' fill='url(#dots)'/>
</svg>

</body>
</html>

Building Richer Tiles

A pattern's content isn't limited to one shape - stack multiple shapes inside it to build stripes, checkerboards, crosshatching, or small repeated icons. Because the pattern tile is its own tiny coordinate space, positioning is done in local tile coordinates: a 16x16 tile with a diagonal line from one corner to the opposite corner draws one diagonal stripe per tile, and repeating that tile produces a continuous hatch pattern across the whole fill.

Example

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 120' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <pattern id='hatch' patternUnits='userSpaceOnUse' width='16' height='16'>
      <rect width='16' height='16' fill='#fff6e9'/>
      <path d='M0,16 L16,0' stroke='#e8a33d' stroke-width='3'/>
    </pattern>
  </defs>
  <rect x='10' y='10' width='180' height='100' rx='8' fill='url(#hatch)'/>
</svg>

</body>
</html>

A pattern can also embed its own viewBox, letting you design the tile in one coordinate system and have it scale to fit whatever width/height the pattern tag declares - handy for reusing a complex icon-based tile at different physical sizes without redrawing it.

Example

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <pattern id='petals' patternUnits='userSpaceOnUse' width='40' height='40' viewBox='0 0 10 10'>
      <rect width='10' height='10' fill='#2f2350'/>
      <circle cx='5' cy='5' r='3' fill='#c85c8e'/>
    </pattern>
  </defs>
  <circle cx='100' cy='100' r='90' fill='url(#petals)'/>
</svg>

</body>
</html>

Set patternUnits="userSpaceOnUse" whenever a tile should stay a fixed pixel size across differently sized shapes.
Give the pattern's own background rect a fill so gaps between tiled shapes don't show through as transparent.
A pattern's viewBox lets you author a tile at a convenient scale (like 0 0 10 10) and have it stretch to whatever width/height the pattern declares.
Reference the same pattern id as a fill or a stroke on multiple shapes to keep a texture consistent across a drawing.

Note: patternContentUnits works like patternUnits but scales the content inside the tile instead of the tile itself - useful when you want tile size in pixels but the artwork inside described as fractions.

Note: If a pattern tile's width or height is left at objectBoundingBox's tiny default fractions without realizing it, the tile can end up scaled to a sliver and repeat far more times than intended - always double check patternUnits before tuning width/height.

Attribute	Purpose
width / height	Size of one repeating tile
patternUnits	objectBoundingBox (fractions of the target shape, default) or userSpaceOnUse (absolute coordinates)
patternContentUnits	Same two choices, but applied to the coordinate system of the pattern's own child content
x / y	Shifts where the tiling grid starts, letting you offset the pattern relative to the shape
viewBox	Lets the pattern's content be authored in its own coordinate system and scaled to fit width/height
patternTransform	Applies a transform (rotate, skew, scale) to the whole tiling grid

Exercise: SVG Patterns

How do you fill a shape with a repeating tile defined by <pattern id='p1'>?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVG Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to SVG and tweak your resume