In more detail
An SVG file is XML text describing shapes such as rect, circle and path, with fills, strokes, gradients and text. The viewBox sets an internal coordinate system that is scaled to whatever size the image is displayed at, which is why it stays sharp on any screen. It suits logos, icons, charts and diagrams, and can be edited as text or styled and animated with CSS. An optimiser removes editor metadata and rounds numbers to shrink the file; convert to PNG when a pixel image is required.
Why it matters
SVG is a document, not just a picture: it can contain scripts, links and references to external files. An SVG uploaded by a user and served from your own domain can run JavaScript in visitors' browsers (Cross-site scripting (XSS)), so sanitise uploads or serve them as downloads. Text inside an SVG depends on the viewer having the font, so logos usually convert text to paths. Photographs are a poor fit and become huge.
Example
A 200 × 200 pixel blue circle in one short file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
width="200" height="200">
<circle cx="50" cy="50" r="40" fill="#3366cc"/>
</svg>
The circle is defined in 100 × 100 units and drawn at twice that size; changing width and height rescales it with no loss.
Common confusion
SVG is vector (shapes); PNG is raster (a grid of pixels).