Convert PNG to SVG online free: auto-trace logos and icons (not photos)

Upload a PNG and ToolHQ's PNG to SVG converter traces the image and outputs a scalable SVG file. Your file never leaves your device, conversion runs entirely in your browser.

Before we go further: this is one of the most misunderstood conversions in digital design. The results depend almost entirely on what type of image you are converting. Auto-tracing is powerful for the right input. For the wrong input, particularly photographs, the output is always a disappointment, and almost no tool will tell you that upfront.

This article will.

Key takeaways

• Auto-tracing works well on logos, icons, silhouettes, and simple solid-color graphics
• Auto-tracing ALWAYS disappoints on photographs, creates thousands of shapes, enormous files, unusable output
• SVG scales to any size without pixelation, that is why you want it
• Your file never leaves your device
• If you have a photograph that needs to scale, use AI upscaling instead

---

What SVG is and why it matters

SVG (Scalable Vector Graphics) is an image format that describes shapes mathematically rather than storing pixel data. A circle in SVG is stored as <circle cx="50" cy="50" r="40"/>, a mathematical description. When displayed at any size, the browser re-renders the circle from its description, producing a perfect edge at 10x10 pixels or 10,000x10,000 pixels.

A PNG stores pixels. Enlarge it past its original resolution and you get pixelation, the blurry, blocky degradation that happens when software has to guess what should be between existing pixels.

SVG is ideal for:

• Logos displayed at any size (website header, billboard, business card, favicon)
• Icons that appear at different sizes in different contexts
• Illustrations that need to be scaled or resized
• Any graphic that needs to look sharp on high-DPI (Retina) displays

The W3C SVG specification defines the standard, and the Wikipedia SVG article covers the format's history and capabilities.

---

When auto-tracing works (and when it does not)

Auto-tracing analyzes each pixel in your PNG and creates vector shapes that approximate the original image. This works well when the image has clear shapes with defined edges. It fails when the image has complex, continuous color variation.

Auto-tracing works well for:

• Logos with solid colors: A company logo with 3-5 solid colors, clean edges, and no gradients traces cleanly into a compact SVG with a handful of paths.
• Icons and symbols: Simple icons (arrows, checkmarks, social media icons, warning symbols) have clear geometric shapes that trace accurately.
• Silhouettes: Black or single-color shapes on white backgrounds produce clean SVG outlines.
• Clip art and illustrations: Cartoon-style illustrations with solid fills and defined outlines trace well.
• QR codes and barcodes: Binary (black/white) images with clear edges trace into exact SVG reproductions.
• Text converted to outlines: Text rendered as an image can be traced, though results vary by font complexity.

Auto-tracing fails on:

• Photographs: This is the important one. A photograph has millions of slightly different colored pixels. Auto-tracing tries to approximate each color region with a vector shape, resulting in tens of thousands of overlapping paths. The output SVG file is enormous (often larger than the original PNG) and looks like a pixelated mess at any zoom level. There is no way to make auto-tracing work well on photographs.

• Images with gradients: Smooth gradients (sky backgrounds, glowing effects, shadows) cannot be represented accurately by simple vector paths. The tracing algorithm approximates them with many small shapes, which produces poor results.

• Photographs of logos: A blurry or compressed photo of a physical logo does not trace cleanly. Source from the original vector file or a high-quality PNG with solid colors instead.

• Screenshots: Screenshots often have anti-aliasing (the smooth blending of pixels at edges), complex UI gradients, and many colors. They trace poorly.

---

What to do if your image is a photograph

If you need a photograph to display at large sizes without pixelation, the solution is AI upscaling, not SVG conversion.

The enhance image tool uses AI to reconstruct detail and upscale photographs to larger dimensions at high quality. A photograph at 800px upscaled to 3200px with AI will look much better than anything auto-tracing can produce from the same source.

SVG is not designed for photographic content. Photographs belong in JPG, WebP, or PNG format, scaled appropriately for their display size.

---

How to use ToolHQ's PNG to SVG converter

1. Open the tool. Go to https://www.toolhq.app/tools/png-to-svg.
2. Upload your PNG. Select or drag the file. Best results come from logos, icons, and simple graphics with solid colors.
3. Adjust settings. Set the number of colors (fewer colors = cleaner, smaller output), smoothing level, and whether to ignore the white background.
4. Trace. Click Convert. The browser processes the image locally.
5. Review the result. Check the preview. If the result looks like a mess of shapes, the source image is too complex for auto-tracing.
6. Download. Save the SVG file.

Your file never leaves your device. All processing happens locally in your browser.

---

PNG vs. SVG: which to use

Use case	PNG	SVG
Photograph or realistic image	Always use PNG	Auto-tracing fails
Logo for website	PNG works at fixed size	SVG preferred (scales to any size)
App icon (multiple sizes)	Need multiple PNG sizes	One SVG for all sizes
Email image	PNG (universal support)	SVG (limited email client support)
Print at large format	PNG may pixelate	SVG always sharp
CSS animations	Not animatable	Fully animatable
File edited in Illustrator/Inkscape	Convert to PNG for sharing	Edit in native SVG format

SVG support in email clients is inconsistent. For email, PNG is the safer choice. For web, SVG is almost always preferable for logos and icons.

Tariq ran a small design agency and received logo files from clients as JPG or PNG exports. When website developers asked for SVG logos to use in code, he would use ToolHQ's PNG to SVG converter on clean, solid-color PNG logo files. Simple logos with 3-5 colors and clean edges produced usable SVG files in under 30 seconds. He kept in mind that any client-provided logo in low resolution or with soft edges from photo compression required re-tracing from the original design file rather than auto-tracing from a PNG export.

Convert PNG to SVG free at ToolHQ, browser-only, no upload

---

Tips for better auto-trace results

Start with a clean, high-resolution PNG. The more pixels available, the more accurately the tracer can detect edges. A 2000px logo will trace better than a 200px thumbnail.

Use solid colors, not gradients. Reduce the number of colors in the image before tracing if possible. Logos with 3 colors trace better than logos with 20 shades.

Remove the background first. A logo on a white or transparent background traces more cleanly than a logo with a complex background. The background remover can isolate the logo before you trace.

Use the lowest color count that still looks right. Reducing from full color to 8 or 16 colors simplifies the trace and produces a smaller, cleaner SVG.

Check the output file size. A well-traced logo SVG is typically 10-100KB. An output larger than 500KB suggests the source image was too complex for clean tracing.

When in doubt, try monochrome tracing first. A black-and-white silhouette traces more cleanly than a full-color image. If the monochrome result is good, add colors manually in a vector editor.

---

Frequently asked questions

Why does my photo look terrible as an SVG?

Photographs have millions of pixel variations that auto-tracing cannot represent as clean vector shapes. The tracer creates thousands of overlapping paths that approximate the pixels, producing a poor result that is also enormous in file size. SVG is not the right format for photographs.

Can I use the SVG in my website code?

Yes. SVG files can be embedded directly in HTML with <img src="logo.svg"> or inline as <svg> code. Inline SVG can be styled with CSS and animated with JavaScript.

Why is my SVG output file larger than the PNG?

This indicates the source image was too complex for clean tracing. Photographs and complex graphics produce SVG files with thousands of paths, which are larger than the equivalent PNG. Simplify the source image or reduce the color count setting.

Does auto-tracing work for handwritten signatures?

Variable results. A clean, dark signature on white paper traces reasonably well in monochrome mode. Signatures with varying line weight, rough paper texture, or low contrast trace poorly.

Can I edit the SVG after conversion?

Yes. SVG files can be opened and edited in Inkscape (free), Adobe Illustrator, Figma, and other vector editors. You can clean up paths, adjust colors, and simplify shapes after the initial auto-trace.

---

The short version

Auto-tracing converts the shapes in a PNG to mathematical vector paths. It works well for logos, icons, and simple solid-color graphics. It always produces poor results on photographs.

If you need to scale a photograph, use AI upscaling with the enhance image tool. If you have a simple logo or icon, auto-tracing with ToolHQ's PNG to SVG converter produces a scalable SVG in your browser.

For the reverse conversion, SVG to PNG renders an SVG at any resolution as a PNG. The bulk image converter handles batch conversion of PNG files to other raster formats.

Convert PNG to SVG free, browser-only at ToolHQ

---