A print shop, a sign maker or an embroidery service will often ask for "the vector file" of a logo, and what most people have is the PNG that came off a website: 220 pixels across, soft at the edges. Enlarging it in any image tool only makes it blurrier, because there is nothing more in the file to enlarge. The way out is to trace it: let software find the outlines in the picture and redraw them as curves. The steps below do that in the Vector Editor of the osFoundry desktop app, with a made-up café logo (a green circle, a cream cup, an orange cloud of steam, 220 × 220 px), and end with an SVG file.

Drop the PNG in and look at what you have

Open the Vector Editor from Canvas and drag the PNG onto the artboard. Then use the Zoom tool and click a few times on the lettering.

The PNG zoomed in: the edges of the circle and the letters are soft

The edges go soft. A PNG is a grid of coloured squares, 220 by 220 here, and each square has exactly one colour. Zooming in just makes the squares bigger. The soft edge is the squares in between: wherever the green meets the cream, there is a row of in-between greens. This particular PNG has 2,110 different colours, though the artwork was drawn with three.

Trace it

Switch to the Selection tool, click the image, and click Image Trace in the properties panel on the right. The editor looks for every place where the colour changes and draws a curve along it.

The first result is black and white. The default setting only decides, for each pixel, whether it is dark or light, so the green circle turns black and the pale orange cloud turns white.

The default trace: black and white, the cloud has disappeared into the background

Open the Preset list in the same panel and choose 3 Colors. Now every pixel is moved to the closest of three colours before the outlines are drawn, which is what turns those 2,110 colours into the three the logo was made of.

With the 3 Colors preset the trace keeps green, cream and orange. The blue dots are the points the curves are drawn through

The blue dots on the outlines are the anchor points. A curve between two of them is stored as a handful of numbers instead of a row of squares, which is why a vector doesn't blur: the editor redraws the curve at whatever size is asked for. The Preset list has other choices for logos with more colours.

Expand it into shapes

At this point the trace is still a live link to the picture underneath. Click Expand, and it becomes ordinary shapes you can select and edit. Zoom in on the lettering again.

After Expand and zooming in, the edges of the letters are still sharp

The edges stay sharp however far you zoom. In this run Expand produced 17 shapes in three colours, with 324 anchor points.

Export as SVG

Open File, then Export, then Export As SVG…, and confirm. The file is a plain text SVG that opens in a browser, in Illustrator or Inkscape, and in whatever a print shop uses. Here it came to 11.9 KB, against 15.0 KB for the original PNG.

It is not smaller because vectors are always smaller. At 220 pixels the PNG is tiny already. The difference shows up when the logo has to be big: the same artwork as a PNG at 1,760 px across is about 325 KB, and the SVG is still 11.9 KB, and as sharp as it was.

Before sending the file off, compare the result with the original at full size: the trace follows the blurred pixels, so a letter that was smudged in the PNG will be smudged in the vector, and fixing it means redrawing that shape by hand.

The Vector Editor is part of the free osFoundry desktop app for macOS, Windows and Linux.