SVG patternUnits and Tiling
patternUnits and patternContentUnits control how a pattern's tile size and internal content scale relative to the shape it fills.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Understanding patternUnits Values
The patternUnits attribute, typically set to objectBoundingBox or userSpaceOnUse, controls whether a pattern tile's width and height are interpreted as fractions of the filled shape's bounding box or as absolute coordinates in the document's user space, which significantly changes how the pattern scales when applied to differently sized shapes.
- objectBoundingBox sizes the tile as a fraction of the filled shape's dimensions
- userSpaceOnUse sizes the tile using absolute document coordinate units
- Choice significantly affects how the pattern scales across different shapes
Controlling Pattern Content with patternContentUnits
Separately, patternContentUnits controls how the actual shapes drawn inside the pattern tile are scaled, independent of the tile's own sizing units, and getting these two settings mismatched is a common source of unexpectedly stretched or oddly scaled pattern fills, making it worth testing pattern behavior carefully across differently sized target shapes.
- patternContentUnits scales internal pattern content independently of tile size
- Mismatched settings between the two are a common source of stretched patterns
- Testing across differently sized target shapes catches scaling issues early
Frequently Asked Questions
What's the simplest patternUnits setting for a predictable, evenly tiled pattern?
userSpaceOnUse with explicit width/height values in absolute units tends to give the most predictable, evenly repeating tile size regardless of what shape the pattern is later applied to.
Why does my pattern look stretched when applied to a differently sized shape?
This is usually a symptom of using objectBoundingBox units, which sizes the tile relative to each shape's own bounding box — switching to userSpaceOnUse with fixed absolute dimensions usually resolves inconsistent tiling across different shapes.
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