Tutorials

How to Convert PNG to SVG in Adobe Illustrator (Image Trace)

ToSVG Team
9 min read

To convert a PNG to SVG in Adobe Illustrator, place the PNG on an artboard, run Image Trace with a preset that matches your artwork, adjust the colors, paths and noise settings, then expand the result and export it as SVG. The whole process takes a few minutes once you know which settings matter. If you don't have an Illustrator license, a free online converter can produce a comparable SVG from the same PNG.

  • Image Trace is the Illustrator feature that turns pixels into vector paths.
  • Pick a preset first (logo, line art, a set number of colors), then fine-tune paths, corners and noise.
  • Always expand the trace before exporting, or you will not get editable paths.
  • Export with Export As > SVG for clean web output, or Save As SVG to keep Illustrator data.
  • No license? A free browser-based PNG to SVG converter uses the same tracing idea with fewer menus.

Before You Start: Prepare the PNG for Image Trace

The quality of your SVG depends more on the source PNG than on any Illustrator setting. Tracing works by finding edges between areas of color, so a sharp, high-contrast image with few colors gives clean paths, while a blurry or noisy image gives jagged, bloated ones.

Check these points before you open Illustrator:

  • Resolution: aim for at least 1,000 pixels on the longest side for a logo or icon. A 200-pixel thumbnail does not contain enough edge detail to trace smoothly.
  • Crop tightly: remove empty margins and anything you don't want traced, such as a watermark or a photo border.
  • Transparent or flat background: a plain white or transparent background is easier to drop from the trace than a gradient or texture.
  • Limited colors: flat graphics with 2–8 colors trace far better than photos. If your PNG is a photograph, expect a stylized result rather than a faithful copy.

For a deeper look at what makes artwork trace well, our guide to getting clean vector results from a logo covers the common pitfalls.

How to Convert PNG to SVG in Illustrator, Step by Step

The basic workflow is place, trace, adjust, expand and export. Menu labels can differ slightly between Illustrator versions, but the panel and its main controls have stayed broadly the same for years.

  1. Create or open a document and place your PNG with File > Place, or drag the file onto the artboard.
  2. Select the image with the Selection tool. Illustrator treats it as an embedded or linked raster image.
  3. Open the Image Trace panel from the Window menu. Keeping the panel open gives you access to every setting, not just the quick preset button in the Properties panel.
  4. Choose a preset from the Preset dropdown. Good starting points are the black-and-white logo preset for one-color marks, a limited-color preset (3, 6 or 16 colors) for flat illustrations, and the line art or sketched art presets for drawings.
  5. Turn on Preview in the panel so changes render as you adjust them. On large images, previewing can be slow, so wait for each update.
  6. Adjust Mode, Palette and Colors (see the settings section below) until the shapes and colors look right.
  7. Expand the trace with Object > Image Trace > Expand, or the Expand button in the Properties panel. This converts the live trace into ordinary vector paths.
  8. Ungroup and clean up: delete any stray background shapes, merge small fragments, and check edges at high zoom.
  9. Export with File > Export > Export As and choose SVG, or use Save As and pick SVG as the format.

The Image Trace Settings That Actually Matter

Most of the difference between a messy and a clean trace comes from five controls: Mode, Colors, Paths, Corners and Noise. You rarely need to touch anything else.

SettingWhat it doesPractical starting value
ModeColor, grayscale or black and white outputBlack and white for one-color logos and signatures; Color for everything else
Colors / ThresholdNumber of colors kept, or the light/dark cutoff in black-and-white modeMatch the real color count of your artwork; around the middle of the threshold slider for clean scans
PathsHow closely paths follow the pixel edgesLower for smooth logos, higher for detailed illustrations
CornersHow readily curves become sharp cornersLower for rounded type, higher for geometric shapes
NoiseIgnores areas smaller than this many pixelsRaise it until specks disappear, stop before small details vanish

Advanced options worth knowing

Under the panel's Advanced section you'll find a few switches that save cleanup time. Ignore White drops white areas from the result, which is the fastest way to get a transparent background. Snap Curves to Lines straightens nearly-straight curves, useful for geometric logos. You can also choose whether the result uses fills, strokes, or both; fills are the safer choice for most artwork, while strokes suit thin line drawings you want to edit as lines.

Match the color count to the artwork

The most common mistake is leaving the color slider too high. A logo with three colors traced at 30 colors produces dozens of near-identical shapes along every anti-aliased edge. Set the number of colors to the number you can actually see, then increase it one step at a time only if a color is missing.

Cleaning Up and Exporting a Clean SVG from Illustrator

A clean export starts with removing what you don't need: background rectangles, hidden fragments and tiny shapes left over from anti-aliasing. After expanding, use Select > Same > Fill Color to grab every shape of one color at once, which makes it easy to delete a leftover background or recolor a section.

When you export, the two routes behave differently:

  • Export As SVG is designed for screens. It writes leaner markup and lets you choose how styling is stored (presentation attributes, internal CSS or inline styles) and whether to minify. This is the right choice for websites and apps.
  • Save As SVG can preserve Illustrator editing capabilities in the file. That's convenient if you'll reopen it in Illustrator, but it can add extra data that bloats the file.

Even a careful export usually contains redundant groups, long decimal coordinates and metadata. Running the file through an SVG optimizer typically shrinks it further without visible change, which matters if the SVG will be loaded on a web page.

Check the result before you ship it

Open the exported SVG in a browser and zoom in. Look for gaps between adjacent shapes, wobbly straight lines and leftover white patches. If you plan to use the file on a cutting machine, also check that there are no hairline slivers; our guide on how to make SVG files for Cricut explains what cutting software expects.

Common Image Trace Problems and Fixes

Most trace problems trace back to the source image or to a single slider. Here's how to diagnose them quickly.

  • Jagged or lumpy edges: the PNG is too small. Find a larger original or redraw critical parts rather than pushing the Paths slider higher.
  • Hundreds of tiny shapes: raise Noise and lower the color count.
  • White box behind the artwork: enable Ignore White before expanding, or select and delete the white shapes afterward.
  • Text looks melted: traced lettering rarely matches the original typeface. If you know the font, retype the text and convert it to outlines instead.
  • Huge file size: photos traced at high fidelity create thousands of paths. For photos, a raster format is often the better choice; read what SVG is and when to use it for the trade-offs.

A Faster Free Alternative When You Don't Have Illustrator

If you only need to convert a PNG to SVG occasionally, you don't need an Illustrator subscription. ToSVG is a free online PNG to SVG converter with no signup and no watermark. It accepts PNG, JPG, WebP, GIF, BMP and TIFF files up to 10 MB and traces them in the browser workflow you already know.

The controls map closely to Image Trace:

Illustrator Image TraceToSVG equivalent
Mode: Color / Black and WhiteColor or black-and-white mode
Colors sliderColor precision (fewer or more colors)
NoiseSpeckle filter
CornersCorner threshold
Paths fidelityPolygon or spline (curve) path mode

ToSVG also includes a small editor to crop, rotate, flip and resize the image before conversion, which covers most of the preparation steps above. What it doesn't do is edit the paths afterward, so if you need to redraw a letter or merge shapes, open the SVG in Illustrator or a free editor like Inkscape. For a full explanation of each option, see advanced image-to-SVG conversion options.

When Illustrator is still the better choice

Illustrator wins when you need to refine the result by hand: redrawing curves with the Pen tool, building shapes with the Shape Builder, setting up print-ready color, or exporting to AI, EPS or PDF. For a quick, clean vector from a simple logo or icon, an online converter is usually faster.

Frequently Asked Questions

Can Illustrator convert PNG to SVG automatically?

Yes. Image Trace converts the PNG into vector paths automatically based on the preset and settings you choose. You still need to expand the trace and export it as SVG to get a usable file.

Why does my traced SVG look different from the PNG?

Tracing approximates pixel edges with curves and merges similar colors, so fine gradients, soft shadows and tiny details get simplified. Increasing the color count and lowering Noise brings it closer to the original, at the cost of a larger file.

How do I make the background transparent when tracing?

Enable Ignore White in the Image Trace panel's advanced options before expanding. If white shapes remain, select one, choose Select > Same > Fill Color, and delete them.

Is Save As SVG or Export As SVG better?

Export As is better for the web because it writes cleaner, smaller markup. Save As is useful when you want to reopen and keep editing the file in Illustrator.

Can I convert PNG to SVG for free without Illustrator?

Yes. Free online converters and open-source editors like Inkscape both trace PNG images into SVG paths without a paid license.

No Illustrator license on hand? Upload your file to the free ToSVG PNG to SVG converter and get a clean, watermark-free SVG in seconds.