A logo arrives in two files: logo.svg at 3 KB and logo.png at 40 KB. Both look the same in a browser tab. Blow them up to fill a projector screen and only one stays sharp. Try to upload them to a social profile and only the other one is accepted. And if all you have is the PNG, the tools that promise to "convert PNG to SVG" hand back something that is technically an SVG but not the file your designer would have made.
This guide explains the difference between the two formats in terms of what each file stores, when to use which, what happens when you render an SVG to pixels, and what tracing a PNG into vector shapes can and cannot recover. It includes real numbers from the tracing engine behind the Toolz converters, and sits under the image tools hub.
TL;DR: SVG is a vector format: it stores shapes as geometry, so it scales to any size without blurring and is ideal for logos, icons and diagrams. PNG is a raster format: it stores a fixed grid of pixels, losslessly, which suits screenshots, detailed artwork and anywhere that only accepts images. Going from SVG to PNG is exact at the size you choose; use the SVG to PNG converter at 2x or 4x for sharp output. Going from PNG to SVG is tracing, which rebuilds shapes from pixels and does not recover an original design. It works for flat logos and line art, and fails on photos. All conversions here run client-side, nothing uploaded, free, no signup.
What is the difference between SVG and PNG?
SVG describes an image as instructions for drawing it, while PNG stores the finished drawing as pixels. Everything else about the two formats follows from that one difference.
An SVG file, defined by the W3C in Scalable Vector Graphics (SVG) 2, is XML text. It lists paths, circles, rectangles, gradients and text, each with coordinates and colors. Nothing in it says how many pixels the image has. When a browser displays it, the renderer works out which pixels each shape covers at the size on screen, which is why the same file is crisp on a phone and on a 5K monitor.
A PNG file, specified by the W3C as Portable Network Graphics and published as ISO/IEC 15948, is a grid of colored pixels compressed with DEFLATE. The compression is lossless, so the pixels you decode are exactly the pixels that were saved. A PNG can carry a full alpha channel and up to 16 bits per channel. What it cannot do is add detail: a 512 x 512 PNG shown at 2048 x 2048 has each pixel stretched across a 4 x 4 block, and edges turn soft or blocky.
Here is the same simple badge as SVG source:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
Those four lines of markup are the whole image, and they stay four lines whether you display it at 240 pixels wide or 24,000. The PNG version of the same badge at 240 x 80 holds 19,200 pixels, and at 960 x 320 it holds 307,200.
SVG vs PNG: which format should I use?
Use SVG for anything made of shapes that must scale, and PNG for anything made of pixels or headed somewhere that only accepts raster images. This table sets them side by side:
| Property | SVG | PNG |
|---|---|---|
| Image model | Vector: paths, shapes, text | Raster: fixed pixel grid |
| Standard | W3C SVG 2 | W3C PNG, ISO/IEC 15948 |
| Scaling | Sharp at any size | Blurs or blocks when enlarged |
| Compression | Text; gzip on the server | Lossless DEFLATE |
| Transparency | Yes | Yes, full alpha |
| File size for a logo | Usually a few KB | Grows with pixel dimensions |
| File size for a photo | Impractical | Large but reasonable |
| Editable after export | Yes, shapes and colors in a vector editor | Only pixel by pixel |
| Text inside | Can stay selectable and searchable | Baked into pixels |
| Can contain scripts | Yes, which is a security concern | No |
| Accepted by social uploads, office apps, email | Often not | Almost always |
| Best for | Logos, icons, diagrams, charts, UI illustrations | Screenshots, detailed art, fixed-size assets |
A practical rule: keep the SVG as your master for anything vector, and export PNGs from it at the sizes each destination needs. Never keep only the PNG of a logo, because turning pixels back into shapes is lossy in a way turning shapes into pixels is not.
For photographs, neither format is the right choice for delivery. A photo in PNG is large, and a photo in SVG is either a PNG wrapped in XML or a traced approximation. JPEG, WebP or AVIF are built for that job; what WebP is and when to use it covers the photo side.
Why do so many places refuse SVG uploads?
Because an SVG is a document that can contain active content, not just an image. The SVG specification allows <script> elements, event handler attributes such as onload, links to external resources and embedded HTML through <foreignObject>. A site that accepts an SVG upload and later serves it from its own domain could end up running someone else's JavaScript for every visitor who opens the file directly.
Sanitizing SVG safely is possible but fiddly, so many platforms take the simpler route: profile pictures, marketplace listings, ad networks, many CMS media libraries and most email clients accept raster formats only. Office documents and chat apps have patchier support too.
That is the most common reason to convert SVG to PNG. A browser drawing an SVG as an image is the safe case, since an SVG loaded through an <img> element or onto a canvas is not allowed to run scripts or fetch outside files. The Toolz converters render SVGs exactly that way, which makes it safe to convert a file from an unknown source.
How do you convert SVG to PNG without losing quality?
Render the SVG at the pixel size you need, or larger, and never scale the PNG up afterward. Because the SVG is geometry, drawing it at 4x is as exact as drawing it at 1x; all quality loss in this direction comes from picking too small an output.
The SVG to PNG converter works out the size in this order:
- If the SVG root sets
widthandheight, those are used, with units such asmm,pt,inandcmconverted to CSS pixels. - If it only has a
viewBox, the viewBox width and height are used. - If it has neither, it is drawn at 1024 x 1024.
- If the longest side is still under 512 pixels, the drawing is enlarged in proportion until that side is 512, because a 24 x 24 icon drawn at its declared size is too small to use.
- The SVG scale option then multiplies the result by 1, 2 or 4.
Take the badge above, which declares width="240" height="80". The longest side is under 512, so it is enlarged to 512 x 171. At 2x the PNG comes out at 1024x342, with the unpainted corners left transparent. The note under the result states the size and where it came from, so there is no guessing.
Pick 2x for screens, where most phones and laptops use two or more device pixels per CSS pixel, and 4x for print or large displays. The output ceiling is 100 megapixels or 16,384 pixels on a side, and SVG files over 50 MB are refused; a smaller scale fixes the first case.
Two kinds of content do not survive rendering. Images and web fonts linked by URL are left out, because an SVG drawn as an image cannot fetch anything outside the file, so text falls back to a system font; converting text to outlines in your vector editor before export avoids that. And an animated SVG becomes a single still frame.
Should I convert SVG to PNG, JPG or PDF?
Convert to PNG by default, to JPG only when the destination rejects PNG or needs a smaller file for a photo-like graphic, and to PDF when you need a document to print or email.
| Target | Transparency | Size | What you lose | Use for |
|---|---|---|---|---|
| PNG | Kept | Medium | Scalability | Uploads, slides, app assets, anything with a transparent background |
| JPG | Filled with white | Smallest for complex art | Scalability, transparency, some edge sharpness | Forms that only take JPG, email attachments |
| PDF (rasterized) | Transparent areas show the white page | Larger | Scalability, selectable text, clickable links | Proof sheets, printing a chart, sending artwork to non-designers |
The SVG to JPG converter fills transparent areas with white, because JPEG has no alpha channel, and applies the Quality slider. Crisp edges on flat color are exactly where JPEG compression leaves faint ringing, so a logo usually looks better as PNG.
The SVG to PDF converter deserves a clear warning. It rasterizes: each SVG is drawn to pixels, stored as PNG, and placed on a page. The PDF contains no vector shapes, text cannot be selected, and zooming far enough shows pixels. The scale option still helps, since the page size stays fixed while 2x and 4x pack more pixels into it (72, 144 or 288 pixels per inch with Fit to image). If a print shop asks for a vector PDF, per ISO 32000 a PDF can carry true vector paths, but you need a vector editor's export for that, not an image converter.
What does converting PNG to SVG do?
Converting PNG to SVG traces the image: it groups the pixels into areas of similar color and fits outlines around each area, producing filled vector paths. It does not find the original vector file, because a PNG contains no record of the shapes that made it. Every edge in the output is an estimate drawn from the pixels.
The tracer behind PNG to SVG and JPG to SVG on Toolz is imagetracerjs, running in a background Web Worker so the page stays responsive. It works in two steps:
- Color reduction. The image is reduced to a small palette, the number you pick under Colors: 2, 8 or 16.
- Edge fitting. For each color layer, the tracer walks the boundary of every connected area and fits straight lines and curves to it, producing one filled path per area.
Each path also gets a 1 pixel outline in its own color. Without it, neighboring shapes leave hairline gaps where their edges do not quite meet, and the background shows through as thin white seams.
Detail controls how closely those outlines follow the pixels:
| Detail | Line and curve tolerance | Specks dropped below | Pre-blur | Result |
|---|---|---|---|---|
| Low | 2 px | 16 points | Slight | Smoother, simpler, smaller files |
| Medium (default) | 1 px | 8 points | None | Balanced |
| High | 0.5 px | 2 points | None | Follows pixels closely, keeps tiny shapes, heavier |
The traced SVG is written with its width and height set to the original image size and a viewBox in traced pixels, so it opens at the size you expect and scales cleanly wherever you place it.
What can tracing do well, and where does it fail?
Tracing does well on images that were vector-like to begin with: flat color, hard edges, few colors. It fails on anything with continuous tones, because a photo has no edges to find, only gradients.
| Source | How it traces | Suggested settings |
|---|---|---|
| Flat logo, 2 to 6 colors | Clean shapes, small file | 8 colors, Medium |
| Black-and-white line art, signatures, stamps | Very clean | 2 colors, Medium or High |
| Icons with a gradient | Gradient turns into bands | 16 colors, Medium, then simplify in an editor |
| Scanned drawing on paper | Paper texture becomes specks | 2 colors, Low |
| JPG logo with compression artifacts | Speckles along edges, background traced as a shape | Low detail; delete the background shape afterward |
| Screenshot with text | Letters become blobby outlines | Keep it as PNG |
| Photograph | Blotchy posterized shapes, huge file | Do not trace |
The photograph row is not a matter of taste. In testing the Toolz engine, a 2000 px noisy photo traced at 16 colors took 28 seconds and produced a 46 MB SVG, many times heavier than the image it came from and still visibly worse. Noise gives the tracer thousands of tiny regions, and each becomes its own path with its own coordinates.
That test is why the converter scales any image longer than 1200 pixels on a side down to 1200 before tracing. Tracing then finishes in seconds rather than minutes, and because the output keeps the original width and height, nothing about how the SVG is placed changes. A trace still running after two minutes is stopped with a message suggesting fewer colors or lower detail, rather than leaving the tab busy indefinitely.
JPG sources add two specific problems. JPEG compression leaves faint blocks around sharp edges, which the tracer can turn into stray shapes; Low detail blurs slightly and drops specks to counter it. And JPG has no transparency, so the white box around a logo becomes one more filled shape behind the artwork. In a vector editor, select that shape and delete it.
How do I get a clean SVG from a PNG logo?
Start with the simplest settings that preserve the design, look at the preview, and only add colors or detail when something is missing. Heavier settings rarely fix a bad trace; they add more paths to it.
A reliable sequence:
- Use the largest, cleanest source you have. A PNG export beats a screenshot, and a screenshot beats a photo of a printout.
- Count the colors in the logo and pick the nearest option at or above it. A two-color mark wants 2, a five-color mark wants 8.
- Trace at Medium. Check the preview and the file size shown under the result.
- If there are specks or rough edges, retrace at Low. If thin details vanished, retrace at High.
- Open the result in a vector editor for the last step: delete the background shape if there is one, merge shapes that should be one, and replace any traced text with real text in the right font.
When the file size shown after tracing is larger than the PNG, treat that as a signal. For a logo it usually means noise is being traced; for anything else it usually means the image should stay raster.
If the trace is headed for a cutting machine, laser engraver or embroidery software, 2 colors is often the right answer even for a colorful design, since those machines work from outlines rather than fills.
Can I convert between these formats in one place?
Yes. The general Image Converter accepts SVG along with JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG and PDF, and writes JPG, PNG, WebP, GIF, ICO, PDF or SVG. Choosing SVG as the target traces any raster source with the same Colors and Detail settings; choosing a raster target for an SVG source shows the SVG scale option.
The dedicated pair pages accept only their own source format, which keeps the options on screen relevant: the SVG pages show scale, the trace pages show Colors and Detail.
One combination is not offered: PDF to SVG. The converter refuses it with a message, and the route it suggests is two steps: convert the PDF page to PNG first, then trace the PNG. If the PDF came from a vector program, exporting SVG from that program keeps the real paths and is the better option.
An SVG can also become a favicon. Rendering it to ICO produces square PNG images at each icon size, and the 512 px minimum means a small icon SVG still gives a clean 256 px entry. Favicon sizes and what goes inside an ICO file covers which sizes to include.
Are SVG and PNG conversions private?
Yes. Rendering, encoding and tracing all happen client-side, inside the browser tab, so no file is uploaded. The SVG decoding step and the tracer are downloaded only when a file needs them, which keeps the page light when you are only converting between raster formats.
The limits, in one place: SVG files up to 50 MB, rendered output up to 100 megapixels and 16,384 pixels a side, raster sources up to 100 megapixels, tracing at up to 1200 px on the longest side, and a two-minute ceiling per trace. The tools are free, no signup, with a daily limit on conversions.
