SVG (Scalable Vector Graphics) is a two-dimensional vector and vector-raster graphics file format designed primarily for web design. SVG allows for animation, transparency, and gradients, and it can be scaled without sacrificing quality.
PNG (Portable Network Graphics) is a raster image format for high-quality full-color pictures (primarily photos). It supports transparency and has a high compression ratio. Despite being designed to replace GIF, it does not support animation and is only 5-20% more compressible than the primer.
When to Use SVG?
It’s ideal for creating icons for websites with responsive design and things that need to look great on Retina displays. The format supports an unlimited number of colors and scaling has no effect on the quality. When you need transparent graphics that can be easily zoomed or compressed, lightweight animations, or you want to change an image regularly, SVG is the way to go.
When to Use PNG?
PNG is the only raster format that allows for transparency, which is why it is so popular among designers. Small static pictures, logos, navigation elements, prints, and other images with a translucent background and sturdy borders can all benefit from it.
Reference: