Why a PNG converted to SVG looks bad, and how to get a clean one
The printer, the sign maker or the cutting machine wants the logo as an SVG. The converter produced one, and it has wobbly edges, a white box round it, thousands of shapes and a file ten times the size of the PNG.
Written · Updated
An SVG made from a PNG is not the original design file recovered. A PNG is a grid of coloured pixels; an SVG is a list of shapes. Converting one to the other is tracing: the program reduces the picture to a few colours, draws an outline round every patch of each colour, and fits curves to the outlines. It can only find shapes that are clearly there in the pixels, so a small, blurry, shaded or JPEG-compressed picture gives a bad trace however good the tracer is. For a clean SVG, start from the biggest, flattest copy you can find, tell the tracer how many colours the design really has, and drop the background. If the design came from a designer, ask for the vector file they made it in; nothing traced will match it. VECTOR traces in the browser tab with those settings in front of you.
What goes wrong, and why
| What you see | Why | What helps |
|---|---|---|
| Jagged or wobbly edges | The source is small, so each edge is only a few pixels and the tracer follows the stair-steps | A larger source; slightly less close outline-following |
| Thin halos and slivers along every edge | Anti-aliasing: the soft pixels between two colours become colours of their own | Fewer colours, so in-between shades are merged into their neighbours |
| Blotchy patches in flat areas | JPEG compression noise, traced as shapes | A PNG original; leave out specks below a few pixels |
| A white or coloured box round the logo | The background was traced as a shape like any other | Drop the background colour, so the SVG is see-through |
| Thousands of shapes, a huge file | A photograph, a gradient or a textured picture, which has no shapes to find | Nothing, honestly: keep photographs as JPEG or PNG |
| Text that looks melted | Small letters are only a few pixels tall, and their counters fill in | Retype the text in the SVG in the real font, or trace a much larger copy |
One more thing that looks like a failure and is not: a converter that "succeeds" instantly and gives a small file may have wrapped the PNG inside an SVG as an embedded picture, with no shapes at all. Open the SVG in a text editor; if you see <image and a long run of Base64, it is still pixels, and it will not cut, embroider or scale.
Getting a clean trace
- Find the best source. The largest version you can get, as a PNG rather than a JPEG, ideally at least 1000 pixels across. A logo taken from a website’s header is usually too small; the same logo from a PDF, a letterhead or the organisation’s press page is often much larger.
- Count the colours in the design. A two-colour logo should be traced with two colours plus the background, not sixteen. Every extra colour becomes a set of slivers.
- Choose what kind of picture it is. Line art, a signature or a stamp traces best as black and white; a flat logo as a handful of colours; an illustration with shading needs more colours and gives a larger, less clean file.
- Drop the background so the result is see-through, which is what a cutter, an embroidery program or a print on a coloured garment wants.
- Clean up after. Open the SVG in Inkscape (free) or Illustrator, delete stray shapes, and replace traced text with real text.
In the browser
VECTOR takes a PNG, JPEG, WebP, GIF or BMP and traces it in the tab: the colours are reduced to a palette, each patch outlined, and the outlines fitted with lines and curves by imagetracerjs. You choose the kind of picture (logo or flat illustration, something detailed with shading, or black and white), the number of colours, how closely the outlines follow the pixels, the smallest speck to keep, and whether to leave out the background. The trace redraws as you change a setting, beside the original, so you can see which setting fixed which problem. The picture is traced on your own device and never sent anywhere.
It is honest about its limits: it uses imagetracerjs rather than Potrace, which traces curves more smoothly but is GPL-licensed, and a photograph comes out as a poster of flat colour patches and a large file, because that is what tracing does to a photograph. A very large picture is traced at 1200 pixels on its longest side for speed and drawn back at the original size.
Tracing and comparing is free. Saving the SVG is part of OBSCURA Pro, or US$1 to save from one tool for a day.
The other way round
Going from SVG to PNG is the easy direction: an SVG can be drawn at any size, so a PNG made from it is as sharp as you ask for. RASTER does that. If a PNG made from an SVG looks soft, it was drawn too small and then enlarged; draw it again at the size you need.
Questions people ask about Why a PNG converted to SVG looks bad, and how to get a clean one
Why does my PNG to SVG conversion look bad?
Converting a PNG to SVG is tracing: guessing shapes from pixels. A small, blurry, JPEG-compressed or shaded source gives jagged edges, slivers and blotches. Use a larger, flatter source and fewer colours.
How do I convert a PNG to SVG without losing quality?
Start from the largest PNG you can find, set the number of colours to the number the design really has, drop the background, and clean up the result. Tracing can never reproduce the original design file exactly.
Why is my SVG file so large?
The source had gradients, texture or photographic detail, which traces as thousands of small shapes. Photographs should stay as JPEG or PNG.
Why is my SVG just a picture inside?
Some converters embed the PNG inside an SVG as a Base64 image instead of tracing it. It has no shapes, so it will not scale cleanly or cut. Open the SVG in a text editor and look for an image element with a long run of Base64.
Can you convert a photo to SVG?
It can be traced, but the result is a poster of flat colour patches and a large file. Tracing suits logos, icons, signatures and flat illustrations.
How do I remove the white background when converting to SVG?
Choose to leave out the background colour when tracing, so it is not drawn as a shape, or delete the background shape afterwards in Inkscape or Illustrator.
Related
- Opening a file without the software that made itMost files that will not open are a container your machine has no reader for. HEIC, .msg, winmail.dat, Word, Excel, zips and CSVs, opened in the browser tab.
- Why a PSD opens blank or white outside PhotoshopA layered PSD saved with Maximise compatibility off holds a white placeholder where the picture should be.
- Open a Canon CR3 raw file on WindowsCR3 is Canon's raw format since 2018. The free Windows extension that shows it, Canon's own software, the JPEG hidden inside every CR3, and converting one.
- Why your CSV opens in one columnA CSV does not record its own separator, so Excel guesses from a Windows regional setting rather than from the file.
- How to open a HEIC fileA photograph in a container most software cannot open: what the box is, what is inside it, and how to get a JPEG out without uploading it.
- Open a Word document without Word, without uploading itA .docx is a zip of XML a browser can read. Open it, change it, and save it back as Word or as PDF in the tab; what comes across, and what does not.
All 22 guides under “A file that will not open, or comes out wrong”.
A letter, now and then
An occasional letter when there is something worth reading: the new guides and what changed in the tools. Never more than once a month and nothing else, and you can leave at any time on the unsubscribe page.