PNG to SVG with gradients: why you get stripes and how to keep the gradient
A gradient in a PNG is thousands of colours. Most converters cluster them into bands. How a real SVG gradient is recovered instead, which gradients can be recovered, and what to do for print and cutting.
Upload a logo with a soft blue-to-purple fill into a typical PNG to SVG tool and the result is a stack of flat stripes with hard edges between them. Raise the colour count and the stripes get thinner and more numerous. They never become a gradient, because the tool has no idea that a gradient is what it is looking at.
Why stripes happen
A gradient in a bitmap is a smooth run of thousands of slightly different colours. A posterise-and-trace converter first reduces the image to N colours, which cuts the run into N bands, then traces each band as its own shape. The SVG is technically scalable, but the design has been replaced by a contour map. Every extra band is also another path, another boundary that can show a hairline, and another thing to clean up in an editor.
What a real SVG gradient is
SVG has linearGradient and radialGradient elements: a direction or a centre, a few colour stops, and the renderer fills the shape smoothly at any size. One shape, one fill, a few bytes. That is how the designer would have drawn it, and it is what you want in the file: editable in Figma or Illustrator, and smooth on a 4K screen or a poster.
How svgize recovers it
The engine treats a gradient as a hypothesis. For every region it tests whether a flat colour, a linear gradient, a radial one or an elliptical one explains the pixels best, judged against the measured noise and compression of the source. When a gradient wins, it is written as a gradient element with its stops. When a flat colour wins, you get a flat colour. Nothing is sliced into bands on principle; the pixels decide.
- Linear gradients along any direction, including angled ones.
- Radial and elliptical gradients, for glows, buttons and spherical highlights.
- Gradients inside a shape that also has a crisp outline: the edge is shared with the neighbour, the fill is a gradient.
What cannot be recovered
A gradient with several colour reversals, a mesh gradient, or a soft photographic shading has no single SVG element that describes it. For those, the engine falls back to smooth tonal layers in the Illustration mode: it looks right, it scales, but it is a stack of shapes, not one fill. If the gradient matters for later editing, ask the designer or the generator for a simpler two-stop version.
Print, cutting and embroidery
Digital print and screens handle SVG gradients directly. Vinyl cutting, laser engraving and embroidery do not: a gradient cannot be cut or stitched. For those, convert a flat-colour version of the design, or set a colour limit in svgize so the gradient is deliberately reduced to a few flat steps the machine can handle. Screen printing sits in between; a few flat steps usually print better than a true gradient on fabric.
Checking the result
Open the SVG in a text editor and search for 'Gradient'. If the fill is one element with two or three stops, the gradient survived. If instead you see dozens of paths with slightly different hex colours, you have stripes. The path and colour counts shown next to every svgize result tell you the same thing before you download.