SVG GRADIENTS TO PNG

How do you keep SVG gradients correct in a PNG?

Confirm the gradient reference, choose the intended coordinate system, and simplify the stops before changing PNG size. A gradient can shift because it follows an object bounding box, disappear because its ID or stops are invalid, or show bands because a correct transition is being rasterized into too few pixels.

Preview and convert your SVG

FAST DIAGNOSIS

Separate gradient geometry from PNG resolution

PNG symptom	What to inspect	First controlled test
The gradient changes when the object is resized	`gradientUnits="objectBoundingBox"` ties positions to the painted object's bounds.	Switch a copy to `userSpaceOnUse` and use coordinates from the SVG viewBox.
The fill becomes a flat color	The `url(#...)` reference may point to a missing ID, or all stops may collapse to one offset.	Confirm the ID and test two stops at `0%` and `100%`.
The center or angle is wrong	Linear endpoints, radial center, focal point, or `gradientTransform` may use a different coordinate system than expected.	Remove the transform and use a horizontal two-color gradient.
Visible bands appear in a smooth area	The gradient may be correct but compressed into too few output pixels or a narrow color range.	Compare the intended output with a 2x PNG before changing the stops.
Colors repeat or reverse at the edge	`spreadMethod` may be `repeat` or `reflect`.	Set `spreadMethod="pad"` and compare the outer area.

Start with the reference. A larger PNG cannot repair a missing gradient ID or a gradient whose coordinates never cross the painted object.

COORDINATE SYSTEM

Choose whether the gradient follows the object or the SVG

objectBoundingBox

Gradient coordinates are relative to the bounds of each painted object. This is useful when the same definition should stretch to fit different shapes.

userSpaceOnUse

Gradient coordinates use the current SVG user coordinate system. This is useful when multiple objects must share one fixed light direction or center.

For a linear gradient, inspect x1, y1, x2, and y2. For a radial gradient, inspect cx, cy, r, plus fx and fy when a separate focal point is used.

COLOR STOPS

Make every stop position and opacity explicit

Keep stop offsets in nondecreasing order from the beginning to the end of the gradient.
Check stop-color and stop-opacity separately; a correct color with zero opacity is still invisible.
Resolve CSS variables or inherited values if the gradient depends on styles outside the SVG.
Test with two obvious colors before restoring subtle brand colors.
Inspect the final PNG against both a light and a dark background when transparent stops are present.

Transparent color is still color data. Use the intended RGB color together with the intended stop opacity.

TRANSFORMS AND SPREAD

Debug rotation, scaling, and repeated color ranges independently

Setting	Job	Safe debugging move
`gradientTransform`	Transforms the gradient coordinate system without changing the target geometry.	Remove it, verify the base gradient, then restore one transform function at a time.
`spreadMethod="pad"`	Extends the first and last stop colors beyond the gradient range.	Use it as the baseline when repeats are not intended.
`spreadMethod="reflect"`	Mirrors the color sequence on alternating repeats.	Check whether the apparent reversal is intentional.
`spreadMethod="repeat"`	Restarts the same color sequence repeatedly.	Check whether the gradient vector or radius is too small for the target.

REPEATABLE WORKFLOW

Prepare an SVG gradient for PNG export

Find each fill or stroke that uses url(#...).
Confirm the referenced element is a linear or radial gradient with a unique ID.
Write gradientUnits explicitly and compare its coordinates with the target bounds.
Reduce the gradient to two visible stops.
Remove gradientTransform and use spreadMethod="pad".
Restore stops, transforms, and spread behavior one at a time.
Export at the intended PNG size, then inspect for raster banding at 100% zoom.

FAQ

SVG gradient to PNG questions

Why did my gradient become a solid fill?

Check the URL reference, unique ID, stop offsets, and stop opacity. Then verify that the gradient line or radius crosses the target object.

Why does the same gradient look different on two shapes?

Object-relative gradient units fit the gradient to each object's bounding box. Use user-space coordinates when the shapes should share one fixed gradient.

Will a 4x PNG remove gradient banding?

It can provide more pixels for a smooth transition, but it does not fix wrong stops, missing references, or incorrect gradient geometry.

Make the gradient predictable before increasing the PNG size.

Open the SVG to PNG converter

Published October 8, 2026. Catch-up page for the October 2 content slot.