Step-by-step guide to converting PNG images to SVG using free online tools, Inkscape, Adobe Illustrator, Figma, and manual redrawing.

Converting a PNG image to SVG transforms a fixed-pixel raster file into a resolution-independent vector graphic that looks sharp at any size. This is essential for logos, icons, and illustrations that need to work across websites, print materials, and cutting machines. Here are five reliable methods, ordered from easiest to most advanced.

Method 1: Shape to Vector (Free Online Converter)

The fastest approach for most users. No software installation, no account creation, and no watermarks on the output.

  1. Open shapetovector.com in any browser
  2. Drag and drop your PNG file onto the upload area, or click the upload button to browse
  3. Click Convert
  4. Once processing completes, click Download to save your SVG file

Shape to Vector uses a pixel-level shape detection algorithm. It scans every pixel in your image, groups connected pixels of the same color into regions, then traces the boundary of each region to produce vector paths. The result is an SVG that reproduces your image shape-by-shape and color-by-color.

Best for: Flat-color PNGs such as logos, icons, clipart, and simple illustrations. You can convert up to 10 files in a single batch.

Limitations: Like all automated converters, results are best with images that have clear edges and limited colors. Photographs and complex gradient images will not convert well with any automated tool.

Method 2: Inkscape (Free Desktop Application)

Inkscape is a free, open-source vector graphics editor available for Windows, macOS, and Linux. It includes a powerful bitmap tracing feature that converts raster images to vector paths.

  1. Open Inkscape and import your PNG file (File → Import)
  2. Select the imported image on the canvas
  3. Go to Path → Trace Bitmap (or press Shift+Alt+B)
  4. In the Trace Bitmap dialog, choose a tracing mode:
    • Brightness cutoff — best for black-and-white graphics
    • Colors — best for multi-color graphics (set the number of passes to match your color count)
    • Autotrace — uses the potrace engine for centerline tracing
  5. Click OK to generate the vector trace
  6. Delete the original bitmap image underneath the new vector
  7. Save as Plain SVG (File → Save As, choose "Plain SVG" format)

Pro tip: After tracing, use Path → Simplify (Ctrl+L) to reduce the number of path nodes and produce a cleaner, smaller SVG file.

Method 3: Adobe Illustrator (Paid / Subscription)

Illustrator's Image Trace feature is the industry standard for professional vectorization.

  1. Open your PNG file in Illustrator
  2. Select the image and click Image Trace in the control bar (or go to Object → Image Trace → Make)
  3. Choose a preset from the dropdown: "High Fidelity Photo", "Low Fidelity Photo", "3 Colors", "6 Colors", "16 Colors", "Shades of Gray", "Black and White Logo", "Sketched Art", "Silhouettes", "Line Art", or "Technical Drawing"
  4. Adjust the threshold, paths, corners, and noise sliders in the Image Trace panel until the preview looks right
  5. Click Expand to convert the trace to editable vector paths
  6. Save as SVG (File → Save As → SVG)

Best for: Professional work where you need fine control over the trace quality, or when converting complex illustrations with many colors.

Method 4: Figma (Free / Paid)

Figma does not have a built-in bitmap-to-vector tracing feature, but the community plugin Image Tracer adds this capability. Install it from the Figma Community, select your imported PNG, and run the plugin. The results are generally simpler (fewer color passes) than Inkscape or Illustrator, but adequate for basic icons and logos.

Method 5: Manual Redraw

For the highest quality result — especially for a brand logo or a design asset that will be used at every scale across all media — the best approach is to manually redraw the image as vector paths using Illustrator, Inkscape, or Figma. This takes more time and skill, but produces the cleanest, most editable output with optimal file size.

This approach is particularly worthwhile when the original PNG is low-resolution, damaged, or has complex details that automated tracing handles poorly.

Tips for Getting the Best Automated Conversion

  • Start with a transparent background. Transparent pixels are ignored during tracing, producing cleaner results. If your PNG has a white background, use a background removal tool first.
  • Use the highest resolution source you have. Higher resolution PNGs provide more pixel data for the tracing algorithm, resulting in more accurate contours.
  • Flat colors convert best. Images with solid-color regions (no gradients, no textures, no photographic detail) produce the most accurate SVG output.
  • Optimize after conversion. After downloading your SVG, run it through SVGOMG to strip metadata, simplify paths, and reduce file size for production use.
  • Check the result at multiple sizes. Open your SVG in a browser and zoom in/out to verify that all shapes traced correctly and edges look clean.