Drop in a PNG or JPG logo, icon or flat illustration and get a real SVG made of vector shapes, not a PNG wrapped inside an SVG file. Choose a preset, set the number of colours and how smooth the curves should be, compare the result with your original side by side, then download the SVG or copy it as markup or a React component. The tracing runs in your browser, so the image is never uploaded.
A PNG stores a grid of coloured squares. An SVG stores shapes: 'fill this outline with this colour'. Converting one to the other means guessing where the shapes are. For a logo with a handful of flat colours that guess is easy and the SVG usually looks the same as the original, only sharp at every size and often smaller.
The guess gets harder as images get more complex. Soft shadows, gradients, textures, photos and anti-aliased text smaller than about 12 pixels do not have clean outlines to find, so the tracer has to cut them into bands of flat colour. That can be a nice graphic effect, but it is not a faithful copy, and the file can end up larger than the PNG. When the source is a photo, keep it as a photo.
Tracing also cannot recover what is not in the pixels. A 64 pixel logo has no information about the true shape of its curves, so the tracer smooths what it sees. If you have the original vector file from the designer, that will always beat a tracing.
First every pixel is assigned to one of your chosen number of colours, picked by k-means clustering (it repeatedly moves each colour to the average of the pixels nearest to it). Black and white mode instead compares each pixel's brightness with the threshold. Transparent pixels stay transparent.
Next, tiny islands of colour smaller than the speck size are merged into the colour around them. Then the outline of each colour region is traced along the pixel edges, the one-pixel staircase steps are replaced by the line through their middle, and the outline is simplified so that it stays within your chosen detail tolerance. Sharp turns are kept as corners; gentler ones are turned into smooth Bezier curves.
Colours are stacked largest first, and each layer is drawn slightly under the colours on top of it. That is why neighbouring shapes meet cleanly with no white seams when the SVG is scaled up.
Start with the Logo preset, set the colours to the real count plus the background, and switch on Drop the background if the logo sits on a flat colour. Zoom in on the comparison to check curves and corners. If corners look rounded off, lower the smoothing; if curves look faceted, raise it.
Then look at the path count and file size. A simple logo is usually a few paths and a few kilobytes. If the numbers are much higher than you expect, there are probably stray specks or edge rings; raise the speck size or lower the colour count until they drop. For the website itself, put the SVG inline or use it as an img source, and give it an accessible name with alt text or an aria-label.
Yes. Many converters put your PNG inside an SVG file unchanged, so it still blurs when you scale it. This tool groups the pixels into colours, finds the outline of every shape, and redraws those outlines as straight lines and curves. Open the downloaded file in a text editor and you will see path data, not an embedded picture.
No. The image is read into a canvas in your browser and traced there. Nothing is sent to We.Inc or anyone else, which also means it works for logos you have not made public yet.
You can run one through, but the result will not look like a photo. Photos are made of smooth gradients and millions of slightly different colours; tracing reduces them to at most 16 flat colour shapes, so you get a posterised, cut-paper version with a large file. For photos on a website, keep them as WebP or JPG. Tracing is meant for logos, icons, flat illustrations, line art and scanned drawings.
Count the colours in your image and add one for the background. A one-colour logo on white needs 2, a three-colour logo on white needs 4. Going higher rarely helps a logo: the extra colours tend to come from the blended pixels along edges and show up as thin rings.
Lower layers are drawn slightly under the ones above them to prevent hairline gaps, so gaps are rare. Rings usually mean the colour count is too high and the blended edge pixels became their own colour. Lower the colour count or raise the speck size.
Files up to 25 MB open. Large images are scaled down before tracing (you can choose 600, 1000 or 1600 pixels on the longest side) because tracing time grows with the number of pixels. The SVG can then be shown at any size; a larger tracing size only keeps more small detail.
Yes. 'Copy React' gives a component that passes props through to the svg element, so you can add className, width, height or aria attributes. The SVG has a viewBox, so it scales with CSS like any icon.
Related: SVG to PNG converter, SVG optimizer, Favicon generator, PNG to WebP converter, Color palette from image.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.