SVG and PNG are fundamentally different types of images. SVG is vector — defined by mathematical shapes and paths. PNG is raster — defined by a grid of pixels. This distinction determines when each format is the right choice.
Use SVG for logos, icons, illustrations, diagrams, and any graphic made of shapes and text. SVG files scale to any size without quality loss — the same file works as a 16px favicon and a 16-foot banner. They're also tiny: a typical icon SVG is 1-5 KB, while the equivalent PNG might be 5-50 KB. And because SVGs are XML text, they can be styled with CSS and animated with JavaScript.
Use PNG for photographs, screenshots, complex textures, and any image with millions of colours or photographic detail. Raster images represent this kind of content efficiently. SVG technically can embed raster data, but that defeats the purpose. PNG also wins when you need pixel-perfect rendering — some SVGs render slightly differently across browsers.
For web development, the modern approach is: SVG for all UI elements (icons, logos, decorative graphics) and PNG/WebP/AVIF for photographic content. Using SVG for icons eliminates the need for multiple resolution versions — one SVG handles standard displays, Retina displays, and everything in between.
One edge case: text-heavy diagrams. SVG handles these beautifully (searchable text, crisp at any zoom), but only if the fonts are embedded or available. If font availability is uncertain, PNG provides guaranteed visual consistency.