SVG pattern Element
The pattern element defines a repeating tile of content that can fill any shape's fill or stroke attribute like a texture.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Defining a Reusable Tile
A pattern element is defined once inside defs with its own width, height, and child content like shapes or images, then referenced by any shape's fill attribute using fill="url(#patternId)", causing the browser to tile that content repeatedly across the filled shape's area automatically.
- A pattern is defined once in defs with its own width, height, and content
- Shapes reference it via fill="url(#patternId)" like any other paint server
- The browser automatically tiles the pattern content across the shape's area
Common Uses for SVG Patterns
Patterns are commonly used for hatching and crosshatching effects, dot grid or graph paper backgrounds, and repeating brand textures like stripes or polka dots, giving designers a way to fill a shape with rich repeating detail without manually placing dozens of individual elements.
- Hatching and crosshatching effects fill shapes with technical drawing textures
- Dot grids and graph paper backgrounds use simple repeating pattern tiles
- Repeating brand textures like stripes fill shapes without manual placement
Frequently Asked Questions
Can a pattern contain an image instead of vector shapes?
Yes, a pattern element can contain an image element as its child content, tiling a raster image repeatedly to fill a shape just like vector content would.
How do I control a pattern's tile size and spacing?
The pattern element's width and height attributes control the tile size, while patternUnits determines whether those values are absolute or relative to the filled shape's bounding box.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG