What is an SVG? Well, SVG stands for Scalable Vector Graphics, and they are rendered in XML. This vector image format means that the file size is very small compared to other image types like JPEG, PNG, and GIF. This vector-based rendering also means that SVG can scale without losing any quality, which is great for responsive web design. So why should we use SVG?
Since SVGs are rendered in XML, the file size is small compare to PNG and JPEG. With vector graphics, the data that determines and handles the image's rendering are XML tags with attributes to specify how the elements should be displayed. In comparison, without boring you how PNGs or JPEGs are composed, they are more complicated and more expensive: hence larger file size. Since SVGs have a smaller footprint than their counterparts, this means fewer bytes have to be sent over the wire. This will help boost load time and performance.
SVGs are resolution-independent, meaning they retain the same, pixel-perfect quality no matter what screen size they are being rendered on. Unlike JPG or PNG, where if you try to scale them, they will start to become pixelated and blurry if the image is not large enough. It's possible to have different file sizes types for JPG and PNG, but this requires additional work, and it means sending more data over the wire. Bottom line: SVG's are responsive and look high-quality no matter how much they are scaled.
Examples of SVGs:
Using inline SVGs can help the performance of your app because it will eliminate the need for an HTTP request to load an image file. Since an inline SVG does not require a downloaded file, this will decrease the loading time of the page. This will help improve the user experience as it will allow your page to load faster.
Hopefully, by now, you have a better understanding of the benefits of SVG's and might think twice before using PNG, JPEG, or GIF. In short, SVGs will help with your app's performance, are responsive with their pixel-perfect scaling, and can be highly customized.
If you liked this content, follow me on Twitter @alexi_be3 💙
07/23/2020: Thank you, Filip Biterski, for pointing out that SVGs are more than just an image.
07/24/2020: As noted by Jan Küster:
So it is vital to sanitize your SVGs whether a user uploads it or if you're importing an SVG from a 3rd party resource.