PNG to SVG Converter

This PNG to SVG converter traces a raster image — PNG, JPG, WebP, GIF or BMP — into an SVG made of filled vector shapes, entirely in your browser. It is for people who need a scalable version of a logo, icon, signature or flat illustration and only have a pixel image of it.

A PNG is a grid of coloured pixels; an SVG describes shapes with coordinates, so it stays sharp at any size. There is no information inside a PNG that says where the shapes are, so conversion means guessing them. This tool uses imagetracerjs, an open-source tracer, in five steps: it reduces the image to a small palette of colours (the Colours setting, 2 to 64) with k-means clustering, separates each colour into its own layer, finds the outline of every connected region, fits those outlines with straight lines and quadratic curves, and writes each region as an SVG path filled with its palette colour. Fully transparent areas are left out, so a logo on a transparent background stays transparent.

The three image types set how the tracer behaves. Logo / icon starts at 4 colours, squares off right-angle corners and drops specks shorter than 8 outline points, which removes most anti-aliasing fuzz. Illustration starts at 16 colours, keeps smaller details and lets corners round naturally. Detailed starts at 48 colours and uses the library's own "detailed" settings: nothing is discarded and lines and curves are fitted twice as tightly, which gives a closer match and a much bigger file. If the result has blotches of the wrong shade, raise the colour count; if it has too many tiny shapes, lower it.

Because tracing cost grows with the number of pixels, images over 1 megapixel (for example 4000 × 3000) are shrunk to about 1 megapixel before tracing, and the SVG's width and height are then set to the original dimensions exactly, so it drops into place at the same size. The tool tells you when this happens. The trace itself runs in a background worker so the page stays usable.

Be clear about what you get. The SVG is an approximation redrawn from pixels, not the original vector file a designer made: edges are re-fitted, gradients become bands of flat colour and very small text may blur into blobs. Tracing works best on flat artwork with a few solid colours and crisp edges. It is a poor fit for photographs — a photo has thousands of subtly different colours and no clean shapes, so the tracer either posterises it into a few flat areas or produces tens of thousands of tiny paths, often several megabytes larger than the original. Keep photos as PNG or JPG; if you have access to the source file (AI, EPS, PDF or SVG) of a logo, use that instead of tracing.

Everything happens on your device: the image is decoded, traced and turned into an SVG in the browser tab. You can confirm in your browser's developer tools (Network tab) that no request carries your image — the page does load Google Analytics, but nothing about your file is sent.

1. The file's first bytes are checked to confirm it is really PNG, JPG, WebP, GIF or BMP, whatever its name says; files over 30 MB are refused. 2. The browser decodes the image (for animated images, the first frame). If it is larger than 1,000,000 pixels it is drawn smaller, keeping its aspect ratio, so that it has at most about 1 megapixel. 3. The RGBA pixels are sent to a Web Worker running imagetracerjs 1.2.6 with the preset's options: palette size from the Colours box, deterministic colour sampling, 3 k-means cycles, and the preset's line/curve error thresholds (1 or 0.5 px), speck threshold (8, 4 or 0 outline points) and right-angle setting. 4. The tracer quantises colours, outlines each colour layer, and fits straight lines and quadratic Bézier curves. Coordinates stay in traced pixels. 5. The SVG is tidied: fully transparent shapes are removed, opacity values are rounded to 3 decimals, the viewBox is set to the traced size and width and height to the original image size, so a downscaled trace is stretched back to exactly the original dimensions (any aspect difference is under one traced pixel). Each shape also carries a same-colour outline one traced pixel wide, which closes hairline gaps between neighbouring shapes but makes every shape about half a pixel fatter on each side — 1-pixel lines come out slightly thicker. 6. The result is shown next to the original as an image, and offered as a .svg download and as copyable SVG code.