SVG PATTERNS TO PNG

How do you keep SVG patterns correct in a PNG?

Make the pattern tile and the shapes inside it use coordinate systems you intend, then check the filled object at the final PNG size. A pattern can shift or stretch because patternUnits controls the tile box while patternContentUnits controls the tile's contents. A viewBox on the pattern changes how those content coordinates are interpreted, so test the pattern itself before changing PNG scale.

Preview and convert your SVG

FAST DIAGNOSIS

Find whether the tile or its contents are changing

PNG symptom	What to inspect	First controlled test
Pattern gets larger when the target shape gets larger	`patternUnits="objectBoundingBox"` makes tile dimensions relative to the painted object's bounding box.	Set explicit user-space tile dimensions in a copy and compare the repeat count.
Tile size looks right but the marks inside stretch	`patternContentUnits` controls the coordinate system of the shapes inside the tile.	Set it explicitly, or add a pattern `viewBox` and reason from that coordinate system.
Pattern disappears after editing width or height	The tile may have a zero or invalid dimension, or its content may fall outside the tile.	Give the tile explicit non-zero `width` and `height`, then remove extra transforms in a test copy.
Pattern begins in a surprising place	`x`, `y`, and `patternTransform` change the tile origin or orientation.	Remove `patternTransform` temporarily and compare with a tile starting at zero.
Pattern is visible in the SVG but too fine in PNG	The complete pattern may be present but its details are smaller than the final raster pixels.	Confirm the pattern at 1x, then compare a 2x export; do not use scale to repair a missing pattern definition.

Separate coordinate errors from raster resolution. If the repeat count or origin is wrong, changing PNG width only makes the wrong pattern larger.

TWO UNIT SYSTEMS

patternUnits and patternContentUnits do different jobs

Attribute	What it controls	Useful question
`patternUnits`	The coordinate system for the pattern's `x`, `y`, `width`, and `height` tile rectangle.	Should the tile size follow the target object's bounding box or the SVG's user coordinates?
`patternContentUnits`	The coordinate system for shapes and other content drawn inside the pattern tile.	Should the marks inside the tile scale with the target box or use the current user space?
`viewBox` on `<pattern>`	Provides a view coordinate system for the pattern contents and changes how content units are interpreted.	Can the tile be designed in a small, stable coordinate grid instead of mixed percentages and user units?

For a pattern that should keep a fixed 20 by 20 user-space tile, make that intention explicit:

<pattern id="grid" patternUnits="userSpaceOnUse"
  x="0" y="0" width="20" height="20">
  <path d="M 20 0 L 0 0 0 20"
    fill="none" stroke="#cbd5e1" stroke-width="1" />
</pattern>

For a pattern that should scale with each target shape, object-relative units may be appropriate. The important part is to choose them deliberately and not assume the tile rectangle and its internal shapes share the same defaults.

VIEWBOX AND TRANSFORMS

Keep the tile's coordinate grid easy to inspect

A pattern can have its own viewBox, and patternTransform can rotate, scale, or translate the tile. Those features are useful, but they add another mapping between the source numbers and the pixels in the PNG.

Start without a transform

Remove patternTransform in a diagnostic copy. Confirm the tile repeats correctly before adding rotation or scaling back.

Use one grid

Keep the pattern's viewBox, tile dimensions, and internal path coordinates easy to compare. Avoid mixing unexplained percentage and pixel values while debugging.

Check the target shape

The same pattern can look different on objects with different bounds when object-relative units are used.

Inspect at 100%

Thin pattern lines can be softened by rasterization. Check the downloaded PNG at its actual pixel size, not only browser zoom.

If a pattern is clipped at the edge of the artwork, inspect the target element's clip paths, masks, root viewBox, and overflow. The pattern definition can be correct while the painted object is still clipped elsewhere.

COMMON MIX-UP

Do not confuse a pattern tile with a gradient

A gradient interpolates colors along a line or across a circle. A pattern redraws a graphics object at repeated intervals. Both can use object-relative or user-space coordinates, but changing a gradient's units will not repair a pattern whose tile or internal shapes are wrong.

When the source uses fill="url(#name)", find the referenced definition in <defs> and confirm whether the ID names a <pattern>, <linearGradient>, or <radialGradient>. Then debug the attributes belonging to that element.

Do not use a larger PNG as the first repair. First make one repeat tile correct in the browser preview; only then choose a raster size that preserves its details.

REPEATABLE WORKFLOW

Prepare patterned SVG artwork for PNG export

Find each fill or stroke that uses url(#...).
Open the matching definition in <defs> and confirm it is a pattern.
Write down patternUnits, patternContentUnits, tile size, and any pattern viewBox.
Temporarily remove patternTransform and compare the repeat origin.
Make the tile and internal shape coordinates explicit in a diagnostic copy.
Load the SVG in the converter and inspect the complete filled object.
Export at the intended size, then compare 1x and 2x only if the pattern geometry is already correct.

Keep the source editable. Once the pattern is correct, save the cleaned definition rather than permanently flattening it into a raster image.

FAQ

SVG pattern to PNG questions

Why does my SVG pattern stretch with the rectangle?

The pattern tile may use object-relative units, which tie its dimensions to the target object's bounding box. Use explicit user-space tile dimensions when the tile should stay fixed.

Why are the shapes inside the pattern the wrong size?

The tile coordinate system and the content coordinate system are separate. Inspect patternContentUnits and any pattern viewBox before changing the PNG size.

Why does my pattern start from the wrong corner?

Check the pattern x and y values and remove patternTransform in a copy. A transform can change the tile origin and orientation.

Will 4x PNG export fix a missing pattern?

No. A larger raster may preserve small, already-visible details better, but it cannot restore a pattern that is invalid, clipped, or outside the tile.

Make one pattern tile predictable, then export the full SVG.

Open the SVG to PNG converter

Published October 7, 2026.