PNG
SVG
SVG
ЗАГРУЗИТЬ
ФАЙЛ
Ожидание файла...
Превью
Ожидание файла...
Tool guide
PNG usually arrives from a design app, a screenshots folder or a company press kit, and that is exactly the material outline tracing handles best: flat fills, crisp boundaries, a limited palette. Here the picture is split into colour regions, each region is written out as a curve, and the finished .svg is assembled inside the tab without leaving the machine. Mind the alpha channel: vectors do not store transparency, so an empty background turns into an ordinary shape. See also: vectorize a photograph that starts as JPG, build a site favicon from the same logo, threshold the artwork to clean edges before tracing, the other direction: get a PNG out of the vector with alpha.
The alpha channel does not survive. The image is drawn onto an opaque canvas before the regions are found, so whatever was empty picks up a definite colour and lands in the file as an ordinary shape. Removing it is easy: open the .svg in Inkscape or Figma, select the bottom-most object and delete it. Nothing else shifts, since the coordinates are already fixed.
You do not trace the labels at all. Type set at 10-12 px on screen is only a handful of pixels tall, the strokes have no room to separate into regions, and any tracer merges them into blobs. The workable route is to outline the graphics only and set the captions again with a real font on top of the result, so they stay crisp and remain editable.
Exactly as many fills as the icon actually has, usually 2-4. An export from a design app is already quantised: no noise, no stray shades, and allowing 16 colours only breeds thin ghost shapes along the anti-aliased edges. Count the fills in the source file, use that number, and add one more if the background is not transparent.
Yes, the output is a standard document made of path elements that every vector editor opens. Nodes move, fills recolour, unwanted shapes delete. A good habit right after opening: merge objects that share a colour and run the built-in simplify command, which cuts the file weight while the silhouette stays visually identical.
Anti-aliasing in the source causes it. The border between two fills in a PNG carries a strip of intermediate colour, that strip becomes its own region, and hairline slivers show through along its edges once curves are drawn. Lower the colour count so the strip merges into one side, or expand the lower shapes slightly under the upper ones in an editor.
For simple silhouettes yes, but the paths nearly always need cleaning first. Tracing leaves many nodes and small kinks where the artwork had a smooth arc, and a cutting head reproduces every kink. Before sending it to a machine, simplify the curves, delete the background shape and confirm the paths are closed: an open path is either skipped or cut in the wrong place.
Before: icon-download-256.png exported from Figma: three flat colours and transparency around the glyph
After: Colours 3, detail 4 — arrow and plate become separate curves and the shape stays clean on a three metre banner
Before: diagram.png, 1440×900 screen capture: coloured blocks, thin arrows, labels set at 11 px
After: Colours 8, detail 3 — blocks and arrows trace neatly, while the small type collapses into blobs and has to be retyped with a real font
Your rating and feedback help decide what to improve next.