Background

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?

Benefits

Smaller File Sizes

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.

Scalability: Pixel-Perfect

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.

Stylizing

Since SVGs are just code you can customize and manipulate them with CSS and JavaScript. This ability opens the door to endless possibilities. A developer can easily change the colors by adding CSS classes or changing the SVG attributes to render different SVGs dynamically. One can also use JavaScript to animate the SVG elements. Below I have added a couple of links of animated SVGs to give you an idea of what is possible.

Examples of SVGs:

• Animated SVG Scene
• Animated SVG Robot
• Animated SVG Bookmark Button
• Animated SVG with React Spring

Performance

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.

More Than an Image

While an SVG can serve the same purpose as that of their pixel counterparts, they can provide a rich, interactive user experience. SVGs are composed of individual DOM nodes that we can think of as graphical elements that can create complex user interactions. For example, you can create dynamic charts with SVGs. One chart library that I have used in a production, client-facing app is Recharts, which is built on top of SVG elements. Since SVGs are scalable, there is minimal overhead to make the SVG chart responsive. With some JavaScript and CSS, you can create sophisticated features with SVG elements. Here is another example of a Clock with progress ring countdown built with SVGs and React:

Summary

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.

Happy Coding 🚀

If you liked this content, follow me on Twitter @alexi_be3 💙

Updates:

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:

SVG can validly contain inline JavaScript and thus implies an XSS vulnerability if you allow your users to upload SVG that are then displayed to other users.

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.