PNG to SVG, in your browser.

Real editable paths, grouped per colour. Converting uploads nothing.

Drop a PNG, JPG or WebP
or paste from the clipboard
Best from 500 px wide, sharp edges, plain background
Or try:

PNG to SVG, in your browser

PNG is the format most logos, icons and lettering are exported in, and it is the best raster input a vectorizer can get: lossless pixels, sharp edges and, often, a transparent background already in place. GetSVG reads the PNG in your browser, decides whether it is a flat logo, hairline artwork, brush lettering, a sketch or an illustration, and traces it into smooth Bézier paths. Converting uploads nothing.

What is specific about PNG input

  • Alpha is respected. Fully transparent pixels are treated as background. Semi-transparent edge pixels are composited onto the detected background colour before tracing, so the soft rim of a logo does not turn into a second, thin outline shape.
  • Anti-aliasing becomes geometry. The grey fringe around every edge is what makes a PNG look smooth on screen. GetSVG traces at 2-3× the working size for logos and lets Potrace fit curves through that fringe, so the SVG edge is a clean curve rather than a staircase of pixel steps.
  • Palette PNGs and 24-bit PNGs behave the same. The file is decoded to RGBA first; an 8-bit palette PNG with 4 colours and a 32-bit PNG of the same logo produce the same paths.
  • Indexed "web" PNGs with dithering are the exception. Dithered gradients trace into speckle. Use the Illustration preset with Smooth gradients, or raise Remove specks.

Tips for the cleanest result

  1. Export the PNG at the largest size you have — 1000 px or more on the long side is ideal, 500 px is the practical minimum.
  2. If the PNG has a solid white or coloured background, leave Transparent background on; GetSVG detects the border colour and removes it.
  3. For a two-colour logo, check that Ink + one colour is selected; the accent (a red dot, a blue wave) is traced as its own shape.
  4. Turn on Paths before you download to see the anchor points; if there are far more than you would draw by hand, move Detail towards Simpler.

Also see JPG to SVG (for photographs of artwork and scans), WebP to SVG, and the guide to vectorizing a logo.

How PNG to SVG works in GetSVG

  1. Drop, paste or choose a picture. PNG, JPG or WebP. The file is read by your browser and is not uploaded.
  2. GetSVG picks a preset. It looks at the pixels — how many colours, how soft the edges are, how much plain background — and chooses Clean logo, Hairline, Brush, Sketch, Illustration or Artwork. Every other setting follows from that.
  3. The tracer runs. For each colour a mask is built and Potrace fits smooth Bézier curves to its outline, in a Web Worker so the page stays responsive. Re-tracing after a settings change keeps the previous result on screen until the new one is ready.
  4. Check it is real geometry. Turn on Paths to see outlines and anchor points, or drag the Split handle to compare original and vector.
  5. Download. SVG grouped per colour, PNG at 1×/2×/4×, or copy the SVG code.

What you get

  • Editable paths, not an embedded bitmap. The SVG contains only <path> elements with cubic Bézier curves.
  • One group per colour. Each colour is a <g fill="#…">, so one click selects a whole colour in Illustrator, Figma or Inkscape.
  • A tight view box. Empty space around the artwork is trimmed automatically, with a small safety margin.
  • Transparent background on request. The dominant border colour is detected and removed.
  • Real gradients when you want them. In Full colour mode, Smooth fits a linear gradient across a faded region and writes a genuine <linearGradient>.

Questions

Does the transparency in my PNG survive?

Yes. Transparent areas are ignored as background, and the resulting SVG has no background rectangle. Semi-transparent edge pixels are composited onto the detected background colour before tracing so they do not become their own thin shapes.

My PNG logo has anti-aliased edges. Will they turn into jagged steps?

No. GetSVG traces at two or three times the working size for logos, then fits smooth curves to the edge, so the soft grey fringe of anti-aliasing becomes a clean curve rather than a staircase.

What PNG size gives the best SVG?

Anything from about 500 px on the longest side upwards. Larger is better up to roughly 2200 px; beyond that the image is scaled down before tracing. Very small PNGs (under 300 px) are upscaled first, but the result will be rougher.

Can I convert a PNG screenshot of a logo?

Yes, if the logo is reasonably large and not blurry. Crop away any UI around it first, and prefer a screenshot taken at 2× device pixel ratio.

What is the actual difference between a PNG and an SVG?

A PNG stores a grid of coloured squares. Enlarge it and the squares get bigger, because there is no more detail to show. An SVG stores instructions: move here, curve to there, fill with this colour. It stays sharp at any size, and every shape can be selected and recoloured.

Will the text in my logo stay editable?

No, and no vectorizer can do that. Tracing turns letters into outlines, so the word becomes a set of shapes rather than type you can retype. If you need live text, identify the typeface and set it again in your design tool. The traced outline is still perfect for printing and cutting.

Why does my logo look slightly different after tracing?

Because the tracer is fitting smooth curves through pixels, and where the original had a soft anti-aliased edge there is no single correct answer. Corners can round very slightly. Move Detail towards Faithful to follow the pixels more closely, or lower Smooth edges to keep corners sharper.

How do I check the result is a real vector and not a bitmap in disguise?

Switch on the Paths overlay before downloading; it draws every outline and anchor point over the result. You can also open the downloaded file in a text editor: a genuine vector contains <path> elements, while a fake one contains an <image> tag with a long block of encoded data.

Is there a file size limit?

None imposed by us. The practical limit is your device's memory, since everything happens in your browser. Pictures larger than 2200 pixels on the long side are scaled down before tracing, because past that point extra pixels add time without improving the curves.