Convert a PNG logo to vector in Affinity Designer
How to turn a PNG logo into true vector artwork in Affinity Designer: redrawing with the Pen and shape tools, handling text and color, exporting clean SVG, PDF or EPS, and checking the result.
Contents
- The short answer
- Before you start: rights and source material
- How to redraw a PNG logo as vector in Affinity Designer
- 1. Set up the document and place the reference
- 2. Build simple geometry with shape tools
- 3. Trace organic shapes with the Pen tool
- 4. Handle text separately
- 5. Apply accurate color
- 6. Remove the reference and export
- Using an external tracer, then cleaning up in Affinity
- Final inspection checklist
- Gaps in the available evidence
The short answer
You can turn a PNG logo into vector artwork in Affinity Designer, but in most versions you do it by redrawing the logo, not by pressing a single convert button. A PNG is a grid of pixels. A vector logo is built from paths, which are mathematically defined curves and shapes that stay sharp at any size. Affinity Designer 1 and 2 have not included an automatic image-trace command like the one in some other vector editors. The usual method is to place the PNG as a reference, rebuild it with the Pen, Pencil and shape tools, then export the new paths. If you are using a newer Affinity release, check its own documentation for tracing features. The supplied evidence does not confirm what any specific current version includes.
The extension does not make a file a vector. Renaming a PNG to SVG does nothing to the pixels. Placing a PNG in Affinity and exporting it as SVG, PDF or EPS also leaves it raster: you get a vector-format container with the same pixel image embedded inside. The logo becomes vector only when its shapes exist as editable curves.
Before you start: rights and source material
Being able to download a logo does not give you the right to redraw, modify or reuse it. The artwork, any fonts in it and the trademark it represents can each carry separate restrictions. Before you rebuild a logo you do not own, confirm that the owner allows it. If the owner is a client, ask them for an original vector file first. Even an old one is usually more accurate than a redraw from pixels.
- Gather these before opening Affinity Designer:
- The largest, least-compressed version of the PNG you can find. Blurry or heavily compressed edges force guesswork.
- Any brand guidelines that state exact color values, clear space or proportions.
- The name of the typeface, if the logo has lettering, and confirmation that you have a license to use it.
- Notes on where the vector file will go (print vendor, web developer, sign maker), because that decides the export format.
How to redraw a PNG logo as vector in Affinity Designer
1. Set up the document and place the reference
- Create a new document with an artboard sized comfortably larger than the logo.
- Use File > Place to bring in the PNG.
- In the Layers panel, lower the image's opacity so new paths stand out against it, then lock the layer so it cannot be moved by accident.
- Add a new layer above it for your vector work.
2. Build simple geometry with shape tools
Circles, rectangles, rounded rectangles, polygons and stars are more accurate when you draw them with the shape tools than when you trace them by hand. Match each shape to the reference. Where a shape is a cut-out or combination of simpler forms, use the Boolean operations (Add, Subtract, Intersect, Xor, Divide). This keeps curves clean and symmetrical. Hand-drawn approximations of geometric shapes tend to wobble.
3. Trace organic shapes with the Pen tool
Use the Pen tool for irregular outlines, swooshes and custom marks. Place nodes at the extremes of curves and where direction changes, and use as few nodes as the shape allows. Fewer, well-placed nodes give smoother curves and a file that is easier to edit later. Refine the result with the Node tool by dragging handles, converting nodes between sharp and smooth, and deleting extras. If a line in the logo is drawn as a stroke but should behave as a fixed shape, use Expand Stroke to turn it into a filled outline.
4. Handle text separately
Tracing letters by hand rarely matches the original typeface. If you can identify the font and are licensed to use it, set the wordmark with the Artistic Text tool, then adjust size, tracking and baseline against the reference. When the logo is final, use Convert to Curves on the text. The recipient then does not need the font installed, and the letterforms cannot reflow. Keep an unconverted copy on a hidden layer in case the wording or spacing needs changing later. If the lettering is custom or heavily modified, redraw it with the Pen tool like any other shape.
5. Apply accurate color
Colors sampled from a PNG with the color picker are only approximate. Compression, color profiles and anti-aliased edges all shift pixel values. Use official values from brand guidelines whenever they exist. Save the final colors as document swatches so every shape uses exactly the same value. For print work, find out whether the vendor needs CMYK or spot color definitions. A screen-sampled RGB value is not a substitute for a specified print color.
6. Remove the reference and export
Delete or hide the placed PNG before exporting. Otherwise it can be carried into the output file and add an embedded raster that defeats the purpose. Then export with File > Export in the format the recipient needs:
| Format | Typical use | Settings to watch |
| SVG | Web, apps, developers | In the export options, set rasterization to nothing so no part of the artwork is converted to pixels; check that text has been converted to curves if fonts will not be available |
| PDF | Print vendors, general sharing | Avoid rasterizing artwork; confirm the color space matches the vendor's request |
| EPS | Older print and sign workflows that still request it | Check with the recipient that they actually need EPS rather than PDF or SVG |
Using an external tracer, then cleaning up in Affinity
If you want an automatic first pass, you can trace the PNG in a tool that has a bitmap-tracing feature, such as Inkscape's Trace Bitmap. Then open or place the resulting SVG in Affinity Designer for cleanup. Auto-traced output usually needs work. Expect too many nodes, uneven curves, stray fragments from compression noise and colors split into many near-duplicate shapes. Simple, high-contrast logos trace best. Fine detail, gradients and small text usually come out better when redrawn.
Final inspection checklist
- In the Layers panel, confirm the logo elements are listed as curves or shapes, and that no Image or Pixel layer remains in the exported artwork.
- Switch to outline view (available as a view mode in Affinity Designer 2) to see the bare paths. Look for stray nodes, overlapping duplicates and gaps between shapes that should meet.
- Zoom in far past the size you need. Edges should stay crisp, with no pixelation or blur.
- Compare the redraw with the reference at actual size and at large size, checking proportions, spacing and curve shapes.
- Confirm that text is converted to curves in the delivery file, or that the recipient has the licensed font.
- Check every fill against the specified color values.
- Reopen the exported file, ideally in a different application, and confirm it contains paths rather than an embedded image.
Gaps in the available evidence
This guide relies on general, widely documented behavior of Affinity Designer and vector formats. No version-specific test results, timing estimates or feature confirmations for the most recent Affinity releases were available. Menu names and export options may differ slightly between versions, so check them against the version you have installed.