Short answer
Use SVG for logos, icons, simple illustrations and charts on websites, where the image must stay sharp at every size and the file can stay small. Use PNG for screenshots, detailed artwork, images with transparency that go to places that don't take SVG, and anything you paste into documents, chats or social media.
Raster and vector
PNG is a raster format. It stores a grid of pixels, each with its own color and transparency, and it compresses them losslessly, so every pixel comes back exactly as it was saved. The grid has a fixed size. Shown larger than that, the browser has to invent the missing pixels, and the image turns soft or blocky.
SVG (Scalable Vector Graphics) is a vector format. The file is XML text describing shapes: paths, circles, gradients and text, each with coordinates and colors. The viewer draws those shapes at whatever size is needed, so the same file is crisp as a 16 px favicon and as a poster. Because it is text, an SVG can also be edited in code, styled with CSS and animated.
PNG vs SVG compared
| PNG | SVG | |
|---|---|---|
| Stores | Pixels | Shapes and text (XML) |
| Scaling | Blurs when enlarged | Sharp at any size |
| Transparency | Yes, per pixel | Yes, anything not drawn |
| Best for | Screenshots, detailed art, photos with transparency | Logos, icons, line art, charts |
| File size | Grows with pixel count | Grows with shape complexity |
| Editing | Image editors | Vector editors or a text editor |
| Support | Opens everywhere | Browsers and design tools; many apps and upload forms refuse it |
| Can contain scripts | No | Yes, which is why some sites block it |
When to use SVG
SVG fits graphics built from clean shapes: logos, icons, diagrams, maps and simple illustrations. A website can show one SVG logo on every screen density with no 1x, 2x and 3x versions. Exported SVGs often carry editor metadata and overly precise numbers, so running them through the SVG optimizer before publishing usually makes them smaller.
When to use PNG
PNG fits images made of pixels: screenshots, detailed artwork, pixel art and photos that need a transparent background. It is also the safe choice whenever you don't control where the image will be shown. Most social networks, many email programs and plenty of upload forms accept PNG and refuse SVG.
Converting between them
Going from SVG to PNG is exact: the vectors are drawn at the size you pick, and the result is as sharp as the SVG at that size. SVG to PNG does this at 1x, 2x, 4x or a custom width and keeps transparency. SVG to JPG does the same with a solid background. Convert at the largest size you will need, because a PNG can't be enlarged later without losing sharpness.
Going from PNG to SVG is an approximation called tracing. The tracer groups pixels of similar color and redraws their outlines as paths. Logos, icons and line art with a few flat colors trace well. Photos and soft gradients turn into large SVGs that look posterized, and those are better kept as PNG or JPG. PNG to SVG traces with presets for logos and illustrations, and you can adjust the number of colors, the smoothing and the detail.
Security of SVG files
An SVG can include scripts and links to other files. Browsers don't run those scripts when an SVG is shown with an <img> tag, but they do when the file is opened directly or placed inline in a page. That is why many platforms block SVG uploads. If you publish SVGs from sources you don't trust, convert them to PNG, which can't carry scripts.