Use SVG for logos, icons and any flat artwork that needs to stay sharp at different sizes, and use PNG for photographs, screenshots and anything with fine gradients or texture. The exception: if the only file you have is a PNG, you can trace it into real vector paths with Image to SVG rather than settling for a raster logo forever.
When to use SVG
SVG is a text-based vector format. Instead of storing a grid of colored pixels, it stores shapes, paths and coordinates, and the browser draws them at whatever size the layout needs.
That makes it the right default for anything that behaves like a mark rather than a picture:
- Logos. One file serves the favicon, the header and a print-ready export. No second @2x copy, no blurry scaling on high-density screens.
- Icons and UI glyphs. A whole icon set can ship as one file, and each icon can be recolored with CSS instead of re-exported in five colors.
- Flat illustrations and diagrams. Charts, maps, line art and anything built from solid fills and clean edges.
- Anything that must stay editable. An SVG can be opened in a vector editor and its shapes changed; a PNG cannot.
- Small, simple graphics served over the web. A simple icon is often a few kilobytes of SVG against tens of kilobytes of PNG, and it compresses well over the wire.
The trade-off is that SVG is only as good as its paths. A traced SVG of a detailed photograph produces thousands of tiny shapes, which is heavier than the PNG it came from and looks worse. Vector suits flat artwork; it does not suit continuous tone.
When to use PNG
PNG is a raster format: a fixed grid of pixels, compressed losslessly. What you see is exactly what is stored, pixel for pixel, with no generation loss.
PNG is the better choice when:
- The source is a photograph or a screenshot. There is no clean geometry to trace, so a PNG keeps the actual image and an SVG would only approximate it badly.
- You need guaranteed pixel-exact output. A 1200x630 social card or a 16x16 favicon should render identically everywhere, and a raster file removes any doubt about how a renderer handles the vector.
- Transparency is required and the content is not vector-friendly. PNG's alpha channel is well supported and predictable.
- The receiving system is old or restrictive. Some CMS upload fields, email templates and print pipelines still reject SVG, sometimes for security reasons, since SVG can carry script. PNG is accepted essentially everywhere.
- You need a quick, cheap export. Every design tool and every screenshot utility produces PNG without a second thought. Turning a PNG into a clean SVG takes deliberate work; the reverse does not.
A common and entirely reasonable setup is to keep both: SVG as the master, PNG as the fallback for the places that demand a raster file.
Why doing this in the browser beats upload-based sites
Most 'convert your image' sites work the same way: you send the file to their server, it processes it, and you download the result. For a company logo that has not been published yet, that is a real disclosure — the file leaves your machine and lands on someone else's disk, under terms you probably did not read.
Alvseike's converters run entirely in the browser. The file is opened locally, the tracing happens on your device, and nothing is transmitted. That matters most for exactly the files people convert: unreleased logos, client work under NDA, internal icons, product art before launch.
A few practical differences follow from that architecture:
- No file-size cap. Because the work happens on your hardware rather than a metered server, there is no upload limit to hit and no 'upgrade to convert larger files' wall.
- No watermarks. The output is yours, not a preview.
- No account needed to try it. The free allowance is 5 exports a day without an account, or 15 with a free account. A run is one export, and Image to SVG works on one file at a time.
- Pro is one plan, not one tool. $12.99/month covers all 50 Alvseike tools across images, video, audio, PDF and marketing — compression and format conversion among them, plus editors, recorders and export packs. There is no separate purchase for any single tool. Pro also unlocks offline use, which free plans do not include.
If the goal is simply to change a PNG into a JPG or WebP, Universal Converter does that in the browser too. If the PNG needs reshaping before tracing — trimming dead space so the vector is tight — Smart Cropper handles the crop without an upload, and Smart Resizer fixes exact pixel dimensions.
Common mistakes
Tracing a photograph. This is the big one. A photo run through a tracer becomes a heavy SVG full of near-identical shapes: larger than the original, slower to render, and visibly worse. If the image has continuous tone, keep it as a PNG or a JPG.
Assuming a PNG with a .svg extension is a vector. Renaming a file does not change its contents. Open the SVG in a text editor: if you see path and shape elements, it is real vector; if you see a single embedded base64 image, it is a PNG in a costume and will blur exactly like one.
Tracing a low-resolution source. A 200px-wide logo has already lost the detail a tracer needs. Find the largest original available before converting, or recreate the mark in a vector editor.
Expecting gradients and soft shadows to survive. Tracing reduces an image to flat shapes. Subtle gradients collapse into banded steps and drop shadows usually vanish. Flat artwork traces well; glossy 3D-style logos do not.
Forgetting the fallback. A traced SVG can look subtly different from the original PNG — slightly simplified curves, a shifted edge. Keep the original file, and check the traced version at both small and large sizes before replacing anything in production.
Using SVG where the platform refuses it. If the upload field rejects it, do not fight the CMS. Export a PNG at the exact size required and move on.