SVG Patterns

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Styling & Effects

SVG patterns tutorial illustration showing repeating tile fills

Overview

What You’ll Learn

SVG <pattern> tiles a small design to fill any shape. This tutorial covers defining patterns in <defs>, tile size with width/height, coordinates with patternUnits, rotation with patternTransform, applying paint with url(#id), five worked examples, and how patterns compare to gradients and solid fills.

<pattern>

Core element

Define a reusable repeating tile inside <defs> with a unique id.

Tile Size

width / height

Set how large each repeat unit is — smaller tiles mean denser repetition.

patternUnits

Coordinate space

userSpaceOnUse for fixed units or objectBoundingBox for relative sizing.

url(#id)

Apply paint

Use fill or stroke with url(#yourId) on any shape.

patternTransform

Rotate & scale

Rotate, scale, or skew the tile with patternTransform.

Multi-Shape Tiles

Dots, stripes & more

Patterns can contain circles, rects, paths, and even other SVG elements.

Introduction

SVG patterns let you fill shapes with repeating textures — dots, stripes, grids, and custom motifs — all defined as vectors. They add visual interest to backgrounds, charts, maps, and UI elements without exporting raster images.

You define a <pattern> once (usually in <defs>), draw the tile content inside it, then reference it with url(#id) on fill or stroke.

Why it matters?

Raster background images blur when scaled and add HTTP weight. SVG patterns stay crisp, stay tiny in markup, and can be shared across many shapes with one definition.

Key Highlights

Reusable Tile Paint

One pattern id can fill or stroke many shapes.

Tile Dimensions

width and height control how often the motif repeats.

Any Shape Inside

Dots, stripes, paths — anything SVG can draw works as a tile.

Fill or Stroke

Same paint works for solid fills and patterned outlines.

In short: draw a small tile in <pattern>, then paint shapes with url(#id).

Foundation

📝 Syntax

Basic form of an SVG pattern:

index.html

<svg width="300" height="120">
  <defs>
    <pattern id="dots" patternUnits="userSpaceOnUse" width="12" height="12">
      <circle cx="6" cy="6" r="3" fill="#ef4444" />
    </pattern>
  </defs>
  <rect x="20" y="30" width="260" height="60" rx="12" fill="url(#dots)" />
</svg>

Elements & Attributes

Name	Type	Description
`<pattern>`	Element	Defines a repeating tile; place inside `<defs>` with an `id`.
`width`, `height`	Length / %	Size of one repeat unit (the tile).
`patternUnits`	Keyword	`userSpaceOnUse` (absolute) or `objectBoundingBox` (0–1 relative).
`patternContentUnits`	Keyword	Coordinate system for shapes inside the pattern tile.
`patternTransform`	Transform list	Rotate, scale, or skew the pattern, e.g. `rotate(45)`.
`x`, `y`	Length / %	Offset of the pattern tile origin.
Tile content	SVG shapes	Any elements drawn inside `<pattern>` become the repeating motif.

Common tile styles

Effect	Tile contents	Notes
Polka dots	`<circle>` centred in the tile	Classic background texture
Stripes	Two `<rect>` side by side	Vertical or horizontal bars
Diagonal	Any tile + `patternTransform="rotate(45)"`	Rotated repetition

Minimal workflow

index.html

<!-- 1. Define -->
<defs>
  <pattern id="stripes" patternUnits="userSpaceOnUse" width="20" height="20">
    <rect width="10" height="20" fill="#3b82f6" />
    <rect x="10" width="10" height="20" fill="#f8fafc" />
  </pattern>
</defs>

<!-- 2. Apply -->
<rect fill="url(#stripes)" />

Cheat Sheet

⚡ Quick Reference

Goal	Code
Define pattern	`<pattern id="p" patternUnits="userSpaceOnUse" width="10" height="10">...</pattern>`
Fill a shape	`fill="url(#p)"`
Stroke a shape	`stroke="url(#p)" stroke-width="8"`
Rotate tile	`patternTransform="rotate(45)"`
Fixed coordinates	`patternUnits="userSpaceOnUse"`
Scale tile	`patternTransform="scale(0.5)"`

Compare

📋 Pattern vs Linear/Radial vs Solid Fill

All paint SVG shapes — pick the paint that matches the look you want.

Pattern

repeating tile

Textures, grids, dots, and motifs

Linear

straight blend

Colours along a vector — UI bars & buttons

Radial

centre-out

Highlights, glows, and orbs

Solid

one colour

Simplest fill when no texture is needed

Context

When to Use SVG Patterns

Reach for <pattern> when a shape needs a repeating texture rather than a smooth colour blend.

Background textures
Dots, stripes, and grid fills for panels and hero sections.
Charts & maps
Hatch fills to distinguish series or regions without extra colours.
Decorative UI
Subtle motifs on cards, badges, and illustration backgrounds.
Patterned strokes
Dashed or textured outlines on paths and circles.
Not for smooth blends
For directional colour ramps, use linear gradients instead.

Key benefit: one tile definition, infinite repetition — crisp textures at every scale.

Hands-On

Examples Gallery

Five starter snippets using <pattern>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Define a pattern tile, fill a shape, then try stripes and rotation.

Example 1 — Polka Dot Pattern Fill

Define a small dot tile and repeat it across a larger rounded rectangle.

index.html

<svg width="220" height="180" viewBox="0 0 220 180">
  <defs>
    <pattern id="dots" patternUnits="userSpaceOnUse" width="12" height="12">
      <circle cx="6" cy="6" r="3" fill="#ef4444" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="200" height="160" rx="16" fill="url(#dots)" />
</svg>

Try It Yourself

How It Works

The pattern lives in <defs>. Each 12×12 tile contains one circle; fill="url(#dots)" tiles it across the rectangle.

Example 2 — Striped Pattern (Two Rects)

Patterns can contain multiple SVG elements. Here two rectangles form a repeating stripe tile.

index.html

<svg width="220" height="180" viewBox="0 0 220 180">
  <defs>
    <pattern id="stripes" patternUnits="userSpaceOnUse" width="20" height="20">
      <rect width="10" height="20" fill="#3b82f6" />
      <rect x="10" width="10" height="20" fill="#f8fafc" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="200" height="160" rx="16" fill="url(#stripes)" stroke="#e2e8f0" />
</svg>

Try It Yourself

How It Works

The tile is 20×20: a blue half and a light half. SVG repeats the tile horizontally and vertically to cover the shape.

📈 Practical Patterns

Rotation, circles, and patterned strokes.

Example 3 — Rotated Pattern with patternTransform

Rotate the stripe tile 45° for diagonal hatching without redrawing the tile content.

index.html

<svg width="220" height="180" viewBox="0 0 220 180">
  <defs>
    <pattern id="diag" patternUnits="userSpaceOnUse" width="16" height="16"
             patternTransform="rotate(45)">
      <rect width="8" height="16" fill="#a855f7" />
      <rect x="8" width="8" height="16" fill="#f3e8ff" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="200" height="160" rx="16" fill="url(#diag)" />
</svg>

Try It Yourself

How It Works

patternTransform="rotate(45)" rotates the entire tile before repetition — a quick way to get diagonal stripes from vertical bars.

Example 4 — Pattern Fill on a Circle

Patterns work on any shape, not just rectangles. Here a dot tile fills a circle.

index.html

<svg width="240" height="200" viewBox="0 0 240 200">
  <defs>
    <pattern id="circleDots" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle cx="5" cy="5" r="2.5" fill="#22c55e" />
    </pattern>
  </defs>
  <circle cx="120" cy="100" r="80" fill="url(#circleDots)" />
</svg>

Try It Yourself

How It Works

The browser tiles the pattern across the circle’s bounding box, then clips to the circle shape — same url(#id) syntax as a rectangle.

Example 5 — Pattern Stroke on a Shape

Apply a repeating pattern to a path’s stroke for a textured outline.

index.html

<svg width="260" height="160" viewBox="0 0 260 160">
  <defs>
    <pattern id="strokePat" patternUnits="userSpaceOnUse" width="8" height="8">
      <rect width="4" height="8" fill="#f97316" />
      <rect x="4" width="4" height="8" fill="#fdba74" />
    </pattern>
  </defs>
  <rect x="30" y="30" width="200" height="100" rx="20" fill="none"
        stroke="url(#strokePat)" stroke-width="12" />
</svg>

Try It Yourself

How It Works

stroke="url(#strokePat)" paints the outline with the repeating tile. Use fill="none" when you only want the patterned border.

Use Cases

Real-world places where SVG patterns show up every day.

1. Card Backgrounds

Subtle dot or grid textures behind content panels.

Example: light polka dots on a hero card.

2. Chart Hatch Fills

Distinguish data series when colour alone is not enough.

Example: diagonal stripes for a secondary bar series.

3. Map Regions

Fill geographic areas with repeating motifs.

Example: cross-hatch for water vs land zones.

4. Icon Textures

Add depth to flat icons with fine-grain patterns.

Example: noise dots inside a badge shape.

5. UI Dividers

Patterned strokes as decorative separators.

Example: dashed stripe line between sections.

6. Loading States

Animated pattern shifts for skeleton screens.

Example: sliding stripe tile via CSS transform.

Pro Tip: keep pattern ids unique per inline SVG on a page — duplicate ids can make the wrong tile apply.

Advantages

Why paint with SVG patterns instead of raster background images.

1. Resolution Independent
Stays sharp on retina screens without extra image assets.
2. Tiny & Reusable
One tile definition paints many shapes via url(#id).
3. Infinite Repetition
One small tile covers shapes of any size automatically.
4. Works on Strokes
Textured outlines on paths, circles, and rectangles.
5. Easy to Transform
Rotate or scale tiles with patternTransform without redrawing.

Pro Tip: for UI backgrounds, keep tiles subtle — low-contrast dots or fine grids read better than bold stripes.

Usage Tips

Follow these practices for clean, scalable SVG patterns.

1. Define Before You Reference
Put patterns in <defs> (or earlier in the SVG) before url(#id).
2. Start with userSpaceOnUse
Absolute tile units are easier to reason about than objectBoundingBox.
3. Use Clear Ids
Names like dots, stripes, or gridPat are easier to maintain.
4. Use patternTransform for Angles
Rotate existing tiles instead of redrawing diagonal content.
5. Test on Different Shapes
Verify the tile looks good on rects, circles, and paths before shipping.

Pro Tip: smaller tile sizes (8–16 px) usually produce smoother-looking textures on large shapes.

Common Pitfalls

Avoid these mistakes when your pattern refuses to show up.

1. Wrong or Missing Id
fill="url(#missing)" paints nothing useful.
→ Match the id on <pattern> exactly.
2. Duplicate Ids Across Inline SVGs
Multiple SVGs on one page sharing the same id can collide.
→ Give each pattern a unique id per document.
3. Tile Size Mismatch
Too-large tiles look sparse; too-small tiles can feel noisy.
→ Adjust width/height until repetition looks balanced.
4. Confusing patternUnits
objectBoundingBox uses 0–1 coordinates, which behave differently from pixels.
→ Stick to userSpaceOnUse until you need relative sizing.
5. Using Patterns When Gradients Fit Better
Smooth colour blends need gradients, not repeating tiles.
→ Use linear gradients for directional colour ramps.

Pro Tip: if a fill is blank, check the id spelling, that tile content exists inside <pattern>, and that the pattern is defined in the same SVG document.

🧠 How an SVG Pattern Is Applied

Define the pattern in <defs>

Patterns should live in <defs> so they can be reused across multiple shapes.

Define

Draw the tile content

Place shapes inside <pattern> — circles, rects, paths, or any SVG elements that form one repeat unit.

Tile

Set width, height & units

width and height define the tile size. patternUnits="userSpaceOnUse" uses absolute coordinates.

Size

Apply via url(#id)

Use fill="url(#id)" to fill shapes or stroke="url(#id)" to paint outlines. The tile repeats automatically.

Apply

Repeating vector textures

SVG patterns make graphics feel richer and more tactile while staying crisp at any scale.

Important Notes

Define patterns in <defs> and reference them with url(#id).
width/height set the tile dimensions that repeat across the shape.
patternTransform rotates or scales the tile before repetition.
Works for both fill and stroke on any shape.
patternUnits="userSpaceOnUse" is the most predictable choice for beginners.
Need smooth colour blends? Use linear gradients instead.

Quick Takeaway: draw a tile in <pattern>, give it an id, paint with url(#id). Keep ids unique on the page.

Compatibility

Browser Support

SVG <pattern> is supported in all modern browsers — and has been for many years — as part of SVG 1.1 paint servers.

✓ SVG 1.1+

SVG <pattern>

Use patterns in inline SVG or external .svg files. Tile fills, patternTransform, and url(#id) paints work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<pattern> Universal

Bottom line: Safe for production sites. Prefer inline SVG or cached .svg assets; no polyfill is required for current browsers.

Wrap Up

🎉 Conclusion

SVG patterns are reusable tile paint: define <pattern> with tile content and dimensions, then apply with fill or stroke via url(#id).

Practice the five examples above, then continue to SVG Linear Gradients when colour should blend smoothly in a direction.

Keep ids unique, start with userSpaceOnUse, and use patternTransform for rotation without redrawing tiles.

View Examples Gallery Continue to Linear Gradients

Pro Tips

💡 Best Practices

✅ Do

Start with patternUnits="userSpaceOnUse" for predictable tile sizing
Keep tile sizes small (8–20 px) for smooth-looking textures
Use patternTransform for rotation or scaling
Name ids clearly (e.g. dots, stripes, gridPat)
Test patterns on different shapes (rectangles, circles, paths)

❌ Don’t

Reuse the same pattern id across separate inline SVGs on one page
Use huge tile sizes for fine textures (it looks sparse)
Forget that objectBoundingBox uses 0–1 coordinates
Overcomplicate patterns when a simple gradient works better
Assume patterns will look identical on every display without checking

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG patterns

Paint shapes with repeating vector tiles.

Core concepts

▶ 01

<pattern>

Reusable tile in defs

API

▦ 02

Tile Size

width + height

Repeat

🗺 03

patternUnits

user space vs bbox

Coords

🔗 04

url(#id)

fill or stroke

Apply

↻ 05

Transform

rotate & scale tiles

Rotate

❓ Frequently Asked Questions

How do SVG patterns work?

An SVG <pattern> defines a small tile inside <defs>. When you use fill="url(#patternId)", the tile repeats to cover the shape.

What is patternUnits in SVG patterns?

patternUnits controls the coordinate system for the pattern tile. userSpaceOnUse uses absolute SVG units; objectBoundingBox uses relative 0–1 units based on the target shape's bounding box.

Can I use patterns for stroke?

Yes. You can use stroke="url(#patternId)" to paint the outline with a repeating pattern (and set stroke-width as needed).

Why does my pattern look stretched?

This often happens with objectBoundingBox units or when the tile size is mismatched to the target. Try patternUnits="userSpaceOnUse" and adjust width/height to control repetition.

How do I rotate or scale a pattern?

Use patternTransform, for example patternTransform="rotate(45)" or patternTransform="scale(0.5)".

When should I use patterns vs gradients?

Use patterns for repeating textures, grids, dots, and motifs. Use linear or radial gradients when colour should blend smoothly in one direction or radiate from a centre point.

Did you Know? 🔊

An SVG <pattern> is reusable tile paint — define it once in <defs> with an id, then apply it with fill="url(#id)" or stroke="url(#id)". You can also animate patternTransform with CSS or SMIL for sliding or rotating texture effects.

Continue to SVG Linear Gradients

Learn smooth directional colour blends for buttons, bars, and icons.

Linear Gradients tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

SVG Filters SVG Linear Gradients

SVG Patterns

What You’ll Learn

<pattern>

Tile Size

patternUnits

url(#id)

patternTransform

Multi-Shape Tiles

Introduction

Why it matters?

Reusable Tile Paint

Tile Dimensions

Any Shape Inside

Fill or Stroke

📝 Syntax

Elements & Attributes

Common tile styles

Minimal workflow

⚡ Quick Reference

📋 Pattern vs Linear/Radial vs Solid Fill

When to Use SVG Patterns

Background textures

Charts & maps

Decorative UI

Patterned strokes

Not for smooth blends

Examples Gallery

📚 Getting Started

Example 1 — Polka Dot Pattern Fill

How It Works

Example 2 — Striped Pattern (Two Rects)

How It Works

📈 Practical Patterns

Example 3 — Rotated Pattern with patternTransform

How It Works

Example 4 — Pattern Fill on a Circle

How It Works

Example 5 — Pattern Stroke on a Shape

How It Works

Use Cases

1. Card Backgrounds

2. Chart Hatch Fills

3. Map Regions

4. Icon Textures

5. UI Dividers

6. Loading States

Advantages

1. Resolution Independent

2. Tiny & Reusable

3. Infinite Repetition

4. Works on Strokes

5. Easy to Transform

Usage Tips

1. Define Before You Reference

2. Start with userSpaceOnUse

3. Use Clear Ids

4. Use patternTransform for Angles

5. Test on Different Shapes

Common Pitfalls

1. Wrong or Missing Id

2. Duplicate Ids Across Inline SVGs

3. Tile Size Mismatch

4. Confusing patternUnits

5. Using Patterns When Gradients Fit Better

🧠 How an SVG Pattern Is Applied

Define the pattern in <defs>

Draw the tile content

Set width, height & units

Apply via url(#id)

Repeating vector textures

Important Notes

Browser Support

SVG &lt;pattern&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG patterns

<pattern>

SVG <pattern>