How to Convert PNG to SVG: Turning a Scanned Logo into Clean Vector Artwork

The short answer

You cannot turn a PNG into a usable SVG by renaming the file or by saving it with a new extension. A real conversion means rebuilding the image as vector paths, either by auto-tracing it in vector software or by redrawing it by hand over the original. For a logo, the most reliable workflow is to clean up the source image, trace or redraw the shapes, rebuild the lettering, set the colors from a known specification, and export a tidy SVG that contains only paths and no embedded image data.

A few terms help define what that conversion involves. A raster image, such as a PNG or JPG, is a grid of colored pixels; enlarge it and the edges turn blocky or blurry. A vector image describes shapes mathematically, so it stays sharp at any size. SVG (Scalable Vector Graphics) is a text-based vector format widely used on the web and accepted by most design tools. Vector shapes are built from paths: outlines defined by anchor points (also called nodes) joined by straight segments or Bézier curves, which are curves shaped by adjustable control handles. Tracing is the process of generating those paths from a raster image.

Why a file extension is not proof of vector artwork

An SVG file can hold an embedded raster image. Many quick converters and some export settings simply wrap the original PNG inside an SVG container. The file then has an .svg extension, but it still contains pixels and will still blur when enlarged, and it cannot be recolored or edited shape by shape. The same caution applies to EPS, PDF and AI files received from others: check the contents before treating them as editable vector artwork. An extension also says nothing about whether you have permission to reproduce or modify a logo.

<!-- True vector content: a shape described as a path -->
<path d="M10 80 C40 10, 65 10, 95 80 Z" fill="#1A1A1A"/>

<!-- Raster wrapped in SVG: still pixels, not vector -->
<image href="logo.png" width="400" height="200"/>

In the example above, the first line is real vector content. The second line places a bitmap inside the SVG. An embedded version of that bitmap appears as a very long string of encoded data in the href attribute, which is a quick visual giveaway when you open the file in a text editor.

Before you start

• Confirm you have the right to reproduce the logo, whether you own it, are working for the owner, or have written permission.
• Ask whether the original vector master already exists. A designer, printer, sign shop or the brand owner may have it, which saves redrawing work and preserves exact geometry.
• Gather the best available source: the largest, sharpest PNG or JPG, or a clean printed sample such as a letterhead or business card that can be scanned.
• Collect brand details if they exist: typeface names, official color values (Pantone, CMYK, RGB or hex), and any guidance on minimum size or clear space.
• Decide where the logo will be used, such as web, print, embroidery, signage or cutting, because that affects how many colors, how much detail and which export settings make sense.

Auto-trace or redraw by hand?

Approach | Works best for | Limitations

Automatic tracing | Simple, high-contrast marks with few colors; quick drafts; organic or hand-drawn shapes where slight irregularity is acceptable | Rounds off sharp corners, wobbles straight lines, produces excess anchor points, distorts small text, and picks up dust, blur and compression artifacts

Manual redrawing | Geometric logos, lettering, logos destined for print, signage or cutting, and low-quality or damaged sources | Takes longer and requires skill with the pen and shape tools, but produces cleaner geometry and fewer nodes

Hybrid | Most real-world logos | Auto-trace the organic parts, then redraw straight lines, circles and text precisely

Online PNG-to-SVG converters generally run an automatic trace, so the limitations in the table apply to them too. Uploading a logo also sends it to a third-party service, which may matter for unreleased or client-owned artwork. Whatever tool you use, inspect and clean the output before delivering it.

Step 1: Prepare the scan or source image

Tracing quality depends heavily on the input, so clean the image before it reaches the vector stage.

• Scan printed samples flat, at a high resolution, and with the scanner's sharpening and descreening options considered. Printed material often carries a halftone dot pattern that descreening can soften.
• Straighten the image so horizontal and vertical elements are truly level.
• Crop to the logo with a small margin.
• Increase contrast and, for one-color logos, convert to grayscale and apply a threshold so the artwork becomes solid black on solid white.
• Remove dust, specks, paper texture and stray marks with a retouching or eraser tool.
• For JPG sources, expect blocky compression artifacts around edges; reduce them with cleanup and thresholding, or plan to redraw those areas manually.
• Save a working copy in a lossless format such as PNG or TIFF.

Step 2: Set up the vector document

• Create a new document in a vector editor such as Adobe Illustrator, Inkscape, Affinity Designer or CorelDRAW.
• Import or place the cleaned image on its own layer.
• If you plan to redraw, lower the image's opacity, lock that layer, and create a new layer above it for your paths.
• If the logo is built on clear geometry, add guides for baselines, centers and key alignments.

Step 3a: Auto-trace the image

Most vector editors include a tracing feature. In Illustrator it is called Image Trace, and in Inkscape it is called Trace Bitmap. Menu locations, option names and defaults change between versions, so check the documentation for the version you are running. The settings below are common to most tracers, though labels vary.

• Mode and colors: use black-and-white or a single color for one-color marks. For multicolor logos, set the color count to match the logo's actual number of colors rather than letting the tool guess.
• Threshold: controls which pixels become filled shape. Adjust it until thin strokes stay intact without edges bleeding outward.
• Path fitting or smoothing: tighter fitting follows pixels closely but adds nodes and roughness. Looser fitting is smoother but can drift from the original shape.
• Corners: raise corner sensitivity for logos with crisp angles so the tracer does not round them off.
• Noise or speckle removal: set this to drop tiny specks without deleting small intentional details such as dots on letters.
• Ignore white or remove background: turn this on so the background is not traced as a filled shape.
• Preview the result, adjust, then expand or convert the trace into editable paths. In Illustrator this is the Expand step; Inkscape places the traced paths alongside the original bitmap, which you can then delete.

Step 3b: Redraw the logo manually

• Build geometric parts from primitive shapes, such as rectangles, ellipses and polygons, rather than tracing them freehand.
• Use the pen tool for curves. Place anchor points at the extremes of each curve (top, bottom, left and right points) and at corners, and keep handles horizontal or vertical where possible. This gives smooth curves with few nodes.
• Combine and cut shapes with path operations, often called Pathfinder or Boolean operations: union, subtract, intersect and exclude.
• Match the intended design, not the flaws of the scan. Ink spread, print blur and paper texture are not part of the logo.
• Keep repeated elements consistent by duplicating them instead of redrawing each one.

Step 4: Clean up the paths

• Switch to outline or wireframe view to see the actual path structure without fills.
• Delete stray fragments, overlapping duplicates and empty paths.
• Simplify paths that carry far more anchor points than the shape needs, then check that the simplification has not distorted the outline.
• Straighten lines that should be straight and snap them to guides.
• Join open paths that should be closed, so fills behave predictably.
• Merge shapes of the same color where appropriate, and make sure counters, the enclosed holes in letters such as O, A and e, are true cut-outs rather than white shapes stacked on top.
• Convert strokes to filled outlines if the logo must scale without line weights changing, or if the file is headed for cutting or embroidery workflows.

Step 5: Handle the typography

Auto-traced text is usually the weakest part of a converted logo, because letter edges soften and small details close up. Rebuild the lettering instead of relying on the trace.

• Identify the typeface from brand guidelines, the original designer, or a font identification tool, and confirm the font license covers logo use.
• Set the text as live type in the matching font, then align its size, tracking (overall letter spacing) and kerning (spacing between specific letter pairs) to the original on the reference layer.
• If the lettering is custom or modified, redraw it as shapes instead of forcing a near-match font.
• Convert the finished text to outlines before export, so the logo displays correctly on systems without the font installed. Keep a separate working file with live text for future edits.

Step 6: Apply the correct colors

Do not sample colors from a scan or a compressed image, because scanners, paper, ink and compression all shift color. Use the official values from the brand guide where they exist. SVG is primarily a screen format, so hex or RGB values are typical. For print, also keep a version with the specified CMYK or spot color values in a print-oriented format, since SVG does not reliably carry spot color information through every print workflow. If no official colors exist, flag this to the client or decision maker rather than presenting sampled values as definitive.

Step 7: Export the SVG

Export options differ by application and version, so confirm the exact labels in your software. Look for settings that cover the following points.

• Delete or hide the reference image layer before export so it is not embedded in the file.
• Fit the artboard or page tightly to the artwork, or to the artwork plus its intended clear space, so the SVG's viewBox, the coordinate area that defines its visible frame, matches the logo.
• Choose outlined text rather than embedded fonts for logo delivery.
• Use plain SVG or an optimized export rather than an editor-specific variant, which can add extra metadata. Inkscape, for example, distinguishes between its own Inkscape SVG and Plain SVG.
• Choose a styling method, such as presentation attributes, inline styles or internal CSS, based on where the file will be used. Presentation attributes tend to be the most broadly compatible.
• Set coordinate precision high enough to keep curves accurate. Too few decimal places can visibly distort small details.
• If the file is for the web, consider running it through an SVG optimizer, then recheck it visually, because aggressive optimization can alter shapes.

Step 8: Confirm the result

Before delivering the file, run through these checks. Each one gives a visible pass or fail result.

• Outline view shows clean, closed paths and no embedded image.
• Open the SVG in a plain text editor and search for an image element or a long block of encoded data. Neither should be present.
• Search the same file for a text element. If the text has been outlined as intended, none should be found.
• Zoom in heavily. Edges should stay crisp, with no pixel steps, bumps or wobbles on straight lines and curves.
• Overlay the new artwork on the original at reduced opacity and compare shapes, spacing and proportions.
• View the logo at a very small size to confirm fine details do not fill in, and at a large size to reveal any curve flaws.
• Open the SVG in at least one web browser and one other application to confirm it displays the same way.
• Check that every fill uses the intended color value and that no unintended white shapes are hiding behind or on top of the artwork.

What to deliver alongside the SVG

An SVG covers web and many digital uses, but print vendors often ask for PDF, EPS or native application files. A practical logo package usually includes the master vector file with live text kept separately, an outlined SVG, a print-ready vector file with the specified print colors, and PNG exports at the sizes the client needs. Name files clearly by color version and intended use.

Limits of this guide

No version-specific menu paths, default values or numeric settings were verified for this article, so the steps describe common features rather than exact commands. Check your application's current documentation for precise option names. Ideal scan resolution, tracer thresholds and decimal precision depend on the source image and the logo's level of detail, so test and compare rather than relying on fixed numbers.