How to Convert PNG to SVG: Tracing Logos, Icons and Line Art

A PNG is a raster image: a fixed grid of pixels, each with a color and, optionally, an opacity value. A 500 × 500 px logo holds exactly 250,000 of those squares and nothing else, so enlarging it to poster size can only make each square bigger or blur the gaps between them. An SVG is a vector image, a text file that lists shapes such as <path>, <circle> and <rect> with coordinates and fill colors. A browser or a cutting machine redraws those shapes at whatever size it needs, which is why a vector logo stays crisp on a phone screen and on a trade-show banner.

Going from vector to raster is easy because the renderer simply paints the shapes into pixels; SVG to PNG does exactly that in a second. Going the other way has no lossless shortcut, because the pixel grid holds no record of the shapes that produced it. Something has to look at the pixels and guess where each shape begins and ends. That guessing step is called tracing or vectorizing, and every honest PNG to SVG converter, from Illustrator to a command-line program, is a tracer underneath.

Some converters skip the hard part. They write a valid SVG file that contains one <image> element with the original PNG embedded as base64 text, which also makes the file about a third larger than the PNG. The result opens as an SVG and passes a file-type check, but it is still a pixel image in a vector wrapper: zoom in and you see the same jagged edges, and a cutting machine finds no paths to follow. Open any SVG in a text editor and search for data:image/png; if that string is there, nothing was vectorized.

Tracing rewards images that were drawn as shapes in the first place. A logo exported from a design app, a flat icon, a cartoon with black outlines, a scanned signature or a stencil all consist of a handful of solid colors separated by clear edges. The tracer groups each color into regions, follows their borders and fits smooth curves along them, so the SVG ends up close to the shapes the designer originally drew. Bold lettering in a wordmark traces well too, because a large letter is just another filled shape, and each glyph becomes an outline you can recolor or resize but no longer retype.

Photographs are the opposite case. A portrait or a product shot has thousands of subtly different tones blending into each other, and a vector format has no efficient way to describe that. Ask a tracer for 16 colors and you get a posterized illustration with visible bands; ask for 64 and you get tens of thousands of tiny shapes in a file much bigger than the PNG, which still does not look like a photo. Soft gradients, drop shadows and glows turn into stacks of thin bands in the same way. Small text is a third trouble spot: at 10–12 px, anti-aliasing blends every letter into its background, and the tracer cannot tell an "e" from an "o".

Resolution matters more than any setting. The tracer fits each curve to the staircase of pixels along an edge, and the finer that staircase, the truer the curve. If you exported the PNG yourself from Figma, Canva, Photoshop or a slide deck, export it again at two or three times the display size; a logo that is 1500–2000 px wide gives a tracer plenty to work with. Do not upscale a small PNG with an AI enlarger first unless the result looks clean at 100 % zoom, because invented edge texture is traced just as faithfully as real edges.

Next, make the background simple. PNG supports full transparency, and a transparent background is the easiest case: every fully transparent pixel is treated as empty space, so the SVG has no white box behind the artwork. If the PNG has a solid backdrop, crop tightly around the artwork first; our guide on how to crop an image to a ratio covers exact framing. A busy background, such as a logo photographed on a T-shirt, should be removed or painted over with one flat color before tracing.

Finally, reduce the color count before the tracer does it for you. Hide shadows, glows and gradient overlays in the source file, and replace a gradient fill with its middle color if the vector version does not need it. Count the solid colors left, including the outline color, and write the number down; it is the most useful number you will enter in the next step. If you are choosing between a JPEG and a PNG of the same logo, take the PNG, since JPEG compression adds noise around every edge, as explained in JPG vs JPEG vs PNG.

Every tracer asks the same three questions, even when the labels differ. The first is how many colors to keep. In the PNG to SVG converter, Color mode chooses between Color, Grayscale and Black & white, and Number of colors sets how many clusters the pixels are sorted into, from 2 to 64. Match it to the count you wrote down. Setting it too high makes the tracer split anti-aliased edge pixels into their own thin colors, which shows up as a faint halo around every shape; setting it too low merges two brand colors into one.

The second question is how to treat edges. Smoothing rounds off the stair steps left by pixels, and Detail decides how small a speck may be and still become a shape. The PNG page starts at Detail 70 and Smoothing 40, which keeps small corners on a clean export. Lower Detail if dust and stray dots appear, raise Smoothing if curves look wobbly, and set Curves to Straight lines for geometric logos built from straight edges or to Pixel edges for pixel art you want to stay blocky.

The third question only applies to black and white tracing: where to draw the line between ink and paper. Threshold runs from 1 to 254 with 128 as the default. Pixels darker than the threshold become black, lighter ones become empty. For a signature written in thin blue ballpoint, raise it toward 160–180 so faint strokes survive; for a bold marker drawing on slightly gray paper, lower it toward 100 so the paper texture does not turn into specks. Change one setting at a time and compare, because the effects interact.

Do not stop at the thumbnail. Open the SVG in a browser and zoom to 400–800 % on the tightest curve, a letter bowl or the tip of a point. A good trace shows smooth arcs and sharp corners where the design has corners; a weak one shows wobbles, dents and rounded tips. Then look at the file in a vector editor such as Inkscape, Illustrator or Figma and turn on outline or node view. A simple two-color logo typically needs a few hundred nodes; if yours shows several thousand, the tracer has been following noise and the paths will be painful to edit or cut.

File size is a quick sanity check. An optimized SVG of a flat logo is typically a few kilobytes to a few tens of kilobytes, often smaller than the PNG it came from. A traced file several times larger than the source PNG usually means too many colors, too much detail, or a photo that should not have been traced. Keep Optimise SVG switched on, since it rounds coordinates and merges paths without a visible change, and finally scale the artwork up to poster size and down to favicon size to confirm it reads well at both.

The free desktop option is Inkscape. Import the PNG, select it and open Path > Trace Bitmap (Shift+Alt+B). Single-scan modes such as Brightness cutoff produce one black path, which suits line art; multiple-scan modes trace a set number of colors or grays as stacked layers. Inkscape's black and white tracing is built on Potrace, a tracing library Peter Selinger released in 2001. Potrace itself is a command-line program that reads PBM, PGM, PPM or BMP rather than PNG, handles two-tone images only, and writes SVG, PDF, EPS or DXF, which makes it a good choice for scripting large batches of scans.

In Adobe Illustrator, Image Trace replaced the older Live Trace in Illustrator CS6. Place the PNG, open Window > Image Trace and start from a preset such as Black and White Logo, 3 Colors or 16 Colors, then adjust Paths, Corners and Noise in the advanced section. The trace stays live until you click Expand, which turns it into ordinary editable paths. If you do not have either program installed, a browser converter runs the same reduce-colors, find-edges, fit-curves process; the image to SVG converter also accepts JPG, WebP and HEIC and can write EPS, PDF or DXF instead of SVG.

On the web, SVG has been a W3C Recommendation since 2001 and every current browser renders it in an <img> tag, as a CSS background or inline in the HTML, where its colors can even change on hover. A traced logo usually replaces several PNG sizes for retina screens with one small file. For cutting machines, SVG is the format Cricut Design Space and Silhouette Studio expect: each traced shape becomes a cut path, and a multi-color trace arrives as separate layers you can cut from different vinyl colors. Laser cutters and CNC software usually prefer DXF, which PNG to DXF produces from the same tracing settings.

Print shops ask for vector artwork because a press, an embroidery digitizer or a sign cutter needs edges, not pixels, and a traced SVG often satisfies that for stickers, T-shirts or a banner. It is still an approximation: the curves are fitted guesses, the colors are averaged from pixels, and text is outlined. So before you trace a company logo, ask whoever made it. A designer or agency almost always has the original AI, EPS, PDF or SVG with exact curves, named colors and fonts, and sending it takes them a minute. Tracing is the right tool when that original is lost, when the logo only survives on a scanned letterhead, or when the artwork is your own drawing.