PNG to SVG - when to vectorize a raster image

Last reviewed 2026-05-04. "Vectorizing" a raster image (PNG, JPG, screenshot) means re-drawing its visible shapes as resolution-independent vector paths instead of a fixed grid of pixels. The free PNG to SVG tool runs this conversion server-side and returns the SVG file. The catch: PNG and JPG carry no path information by definition - they are grids of coloured pixels - so any tool can only approximate a vector reading by tracing edges between similar colour regions. Whether the approximation is useful depends entirely on what is in the input. Logos, icons, line art, high-contrast silhouettes, and screenshots of UI elements convert beautifully. Photographs, soft gradients, fine textures, and anything with smooth colour transitions usually do not.

What raster vs vector means (and why this conversion is approximate)

A raster image (PNG, JPG, BMP, screenshot, photograph) is a fixed grid of coloured pixels - the file knows the colour of pixel (0,0), (0,1), and so on, and nothing else. A vector image (SVG) is a list of geometric instructions - "draw a circle of radius 12 at (50,50) filled red", "draw a path along these 14 points stroked black" - which a renderer turns into pixels at whatever size the page asks for. Because raster carries no shape data, no tool can recover the original geometric instructions from a PNG; the pixels do not remember which ones used to belong to "the letter A" or "the curve of the logo". Vectorizers therefore read the pixel grid, find runs of similar colour, follow the boundaries between them, and emit one SVG <path> per region. The output SVG looks like the input only when those colour boundaries match the actual shapes the human eye reads; when they do not, the output is a noisy mosaic of polygons that scales infinitely but does not look like the photograph.

When PNG-to-SVG actually works

Vectorization produces a usable SVG when the input has a small number of solid colour regions with sharp boundaries between them. The four common cases:

• Logos and brand marks. A logo is usually 1-4 solid colours with crisp edges - exactly what auto-tracing needs. The output SVG scales to billboard size without losing edge sharpness, can be recoloured by editing the fill attribute, and ships in a few kilobytes. This is the canonical use case.
• Icons and pictograms. Single-colour silhouettes (folder icons, hamburger menus, chevrons, social-media glyphs) trace cleanly because there is exactly one foreground / background boundary. The result is editable as paths and recolours with one CSS rule.
• Line art and ink drawings. Black-on-white drawings, comic line art, hand-drawn sketches scanned at high contrast: each stroke becomes one closed path, and the SVG can be re-stroked in any colour or weight afterwards.
• UI screenshots of crisp shapes. Screenshots of buttons, dialog boxes, simple charts, or text on a flat background have anti-aliased pixel edges that vectorize into very close approximations of the original geometry. The result is perfect for embedding into responsive documentation.

When PNG-to-SVG does NOT work

The same algorithm that does so well on logos produces unusable mosaics on photographs. The three counter-cases:

• Photographs. A photo of a face, a landscape, or a product shot has thousands of subtly different colours blending into each other. The vectorizer either treats every pixel as its own polygon (output file balloons to tens of megabytes and scrolls slowly in a browser) or quantises the colours to a few dozen regions (output looks like a posterized version of the photo, not the original). For photos, keep the raster and optimise it as JPG or WebP.
• Soft gradients and fine texture. A button with a smooth top-to-bottom gradient, a watercolour painting with bleeding edges, or any image with film grain has no sharp colour boundaries to trace. The vectorizer invents arbitrary boundaries at quantisation thresholds, and the SVG looks "stripey" or "blocky" where the original was smooth.
• Anti-aliased text rendered as pixels (low-contrast / small). Text rendered at small sizes or with heavy anti-aliasing becomes a soup of grey pixels around each glyph. Auto-tracing produces unreadable letterforms. If you need the text as paths, set the document up with the actual font in a vector tool instead of vectorizing a rendered screenshot.

Vectorizing on freetoolonline

Open PNG to SVG, upload the PNG or JPG, and download the SVG result. The file is processed on the freetoolonline AWS service: it is uploaded via the standard upload pipeline, the conversion runs server-side, and the output file is rotated off the service storage after the retention window so you should download and save it locally if you need to keep it. The output SVG opens in any modern browser (the SVG element has been a first-class citizen of HTML since the early 2010s), and it can be imported into Inkscape, Adobe Illustrator, Figma, Affinity Designer, or any other vector editor for further refinement. If the result looks blocky or noisy, that is a signal the input was not a good vectorization candidate (see the section above) - keep the original raster and either optimise it as PNG / WebP or, if the asset is a logo / icon / illustration, ask a designer for the original vector source.

What PNG-to-SVG is NOT

Three operations are often confused with vectorization; each is a different action with a different result.

• "Save as SVG" of a PNG inside an editor. Most editors will happily save a PNG as an SVG file - but what they really do is wrap the PNG bytes inside an SVG <image> element. The result has a .svg extension and the same pixels as the input; it does NOT scale better and is NOT editable as paths. Vectorization (what https://freetoolonline.com/png-to-svg.html does) re-draws the content as actual <path> elements, which is a different operation.
• SVG to PNG (rasterizing). The reverse direction - taking a vector and rendering it to a fixed-size raster - is a separate task with different trade-offs (resolution choice, anti-aliasing, embedded fonts). See SVG to PNG - when to rasterize an SVG for the rasterization side, and the SVG to PNG tool for the operation.
• Compressing a PNG to a smaller PNG. If the goal is "the file is too big" and the content is photographic or texture-rich, the right move is raster compression, not vectorization. See Compress JPEG without losing quality - quality vs size for the photo-compression trade-off, JPG vs PNG for web for raster format choice, and the Compress Image tool for the operation.

Companion guides on the image-conversion cluster: SVG to PNG - when to rasterize an SVG (the reverse direction), PNG vs SVG - when to use which (the format-choice decision before you convert), and JPG vs PNG for web (raster format choice when vectorization is not the answer).