SVG Pattern Fill: Repeating Tiles and Textures

SVG's pattern element tiles any SVG content as a repeating fill â€” stripes, dots, hatch textures, and complex patterns from a single tile definition.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Defining and Using SVG Pattern

Define a pattern tile in <defs> and reference it as a fill.

<defs><pattern id='dots' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<circle cx='5' cy='5' r='2' fill='#4F46E5'/>
</pattern></defs>
<rect width='300' height='200' fill='url(#dots)'/> â€” fills rect with repeating dot pattern
width/height: the size of one pattern tile
patternUnits='userSpaceOnUse': tile size is in SVG coordinates (recommended for predictable tiling)

Common Pattern Types

Patterns for common textures and backgrounds.

Diagonal stripes: <line x1='0' y1='10' x2='10' y2='0' stroke='gray' stroke-width='2'/> inside 10Ã—10 pattern
Horizontal lines: <line x1='0' y1='5' x2='10' y2='5' stroke='gray'/> inside 10Ã—10 pattern
Grid: two lines (horizontal + vertical) inside a square pattern tile
Checkerboard: two <rect> fills at offset positions in the tile
Dot grid: <circle cx='5' cy='5' r='1.5'/> in a 10Ã—10 tile

Scaling and Transforming Patterns

Control pattern size, angle, and position.

patternTransform='rotate(45)': rotate the pattern tile â€” creates diagonal effects
patternTransform='scale(2)': double the pattern tile size without redefining it
x/y attributes: offset the pattern start position
patternUnits='objectBoundingBox': sizes pattern relative to the filled shape (0â€“1 scale)
Animated pattern: animate patternTransform to create moving texture effects

Frequently Asked Questions

Can I use an image as an SVG pattern fill?

Yes â€” <pattern><image href='texture.png' width='50' height='50'/></pattern>. The image tiles repeatedly to fill the target shape.

How do I make a diagonal stripe pattern in SVG?

10Ã—10 tile: <pattern><line x1='0' y1='0' x2='10' y2='10' stroke='gray' stroke-width='2'/></pattern>. Apply to any shape for a 45-degree diagonal stripe fill.

How do I change the size of an SVG pattern without editing it?

Use patternTransform='scale(2)' to double the tile size, or scale(0.5) to halve it. This scales the tile without changing the tile's internal SVG coordinates.

Can SVG patterns be animated?

Yes â€” animate patternTransform with CSS @keyframes: @keyframes move { to { patternTransform: translate(10px, 0); } }. This creates moving stripe or dot pattern animations.

Does SVG pattern work with opacity?

Yes â€” set fill-opacity or opacity on the <rect> using the pattern fill. You can also set opacity on the shapes inside the pattern tile for a transparent pattern.

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