SVG and PNG both are a type of image format to store images.
SVG is an image file format created specifically for designing two-dimensional vector and vector-raster graphics for websites. SVG supports animation, transparency, gradients, and is easily scalable without losing quality.
PNG is a raster image format used for full-color images (mostly photos) in good quality. It has a rather high compression ratio and supports transparency. Though created to replace GIF, it doesn’t support animation and is only 5-20% more compressible compared to the primer.
Here are the important differences between SVG and PNG :
SVG stands for Scalable Vector Graphics.
PNG stands for Portable Network Graphics.
SVG image is vector based.
PNG image is pixel based.
SVG image quality remains same while zooming.
PNG image quality degrades while zooming.
SVG images is made up of paths and shapes.
PNG images is made up of pixels.
SVG images have layers and are editable. It can be animated.
PNG images have no layers and are not editable.
SVG images use .svg extension.
PNG images use .png extension.
small file size
large file size
SVG images are used in devices using high resolution images and can be animated and styled with CSS.
PNG images are generally used in image creation.
It supports transparent backgrounds.
When to use SVG?
SVG works best for designing icons for websites with responsive design and objects that should be displayed perfectly on Retina screens. Use SVG when you want to get transparent images that can be easily zoomed or compressed, need lightweight animations, or plan to modify an image soon or frequently.
When to use PNG?
If you're going to be using high quality images, detailed icons or need to preserve transparency, PNG is the best choice. Use it for small static images, logos, navigation elements, prints, and other images with transparent background and robust edges.
For photos, then PNG is the only suitable format.
Logos in headers can be PNG or SVG, depending on how the header is set up.
Animated illustrations should be SVG if you need them to be scalable. GIF if you want them to stay the same size.
Icons should be SVG if you want them to scale with the screen sizes and PNG if they will stay the same size.