What is an SVG an why should I care?

An SVG, which stands for Scalable Vector Graphic, is essentially an image that is defined in with a combination of basic and custom shapes. SVGs provide many benefits, especially when used on the web. These benefits can save you time in development, boost the performance of your website, and even provide a better user experience to a wider range of users. When used in situations that are suited to their strengths, SVGs offer tremendous benefits over most other image formats.

Scalability

The first, and largest, benefit of SVGs is that they can be scaled up or down infinitely without losing quality or becoming blurry. This means that you no longer have to worry about providing multiple versions of the same PNG or JPEG file at different resolutions to support different sized devices. You can now handle scaling an image up or down through styling and you never have to worry about images becoming blurry again. This also means that you have an infinite number of possible image sizes that you can use, not just the handful of sizes that you can acquire. This scalability has the added benefit of making your images future proof. A PNG or JPG file may look great today, but what happens when the size or resolution of displays increase in the future? Do your images now have to be half of their previous size? Do you display the original image as a blurry, scaled up image that is the size? If you use an SVG instead then you don’t have to worry about compromising your image. Your SVG will automatically resize according to your website’s styles and it will still look just as great on an 8k TV as it once did on a 720p monitor.

Simplicity

This scalability offers yet another benefit that many website designers and developers will be especially happy about. Not only do you get to remove the different image resolutions, you also no longer have to worry about coordinating those other sizes in code. Now you can simply use your image in HTML and CSS without having to specify the alternate images and the rules that determine which version to display. You can also simplify your images’ dimensions by using sizes that are agnostic of the original image resolution, such as 4vh or 2rem. If you decide to increase or decrease the size of the page that the image takes up then its as simple as adjusting the size in the styles, you no longer need to go through the pain staking process of recreating the image at a different resolution.

Small file size

As if the time and productivity that SVGs will give back to you wasn’t enough of a reason, then perhaps the performance gains will be. Due to the nature of SVGs, you don’t have to store pixel by pixel information. Instead you only save the shapes, colors, and other aspects that define an image. This format usually produces a noticeably smaller file than similar PNG or JPEG images. This means that SVGs will have to transmit less data when requested from the server, which will improve load times and reduce band with. This size reduction also means that an SVG will take up less storage space than similar image formats, especially when you take into account that you don’t have to store alternate images. Sometimes on a very small image, such as 10 pixels by 10 pixels, the PNG or JPEG may be slightly smaller due to the amount of characters that an SVG uses to define an image. Although this may look tempting, the slightly larger file size is often off set by the other benefits that it provides, like reusability in other parts of the site or the flexibility to change its size with fewer reprecusions later on.

Drawbacks

Despite their numerous benefits, there are some cases that SVGs simply aren’t cutout to handle. Due to the way that an SVG stores an image, they don’t handle detailed images well, such as photographs or complex digital paintings. Also, older browsers often don’t support SVGs. Many modern sites may choose to not support these browsers, such as internet explorer, but some sites and web apps may be required to support older browsers. In the later case, SVG’s can still be used but it may involve extra work to also support fallback images for these older browsers.

When to use them vs when not to

Despite a couple of drawbacks that are inherent in SVGs, they are an excellent candidate for many images that are used across the web. SVGs really display their strengths when used for logos, icons, and decorative elements on a web page. These use cases are often fairly simplistic, usually being compose of basic forms and patterns. These elements may also be used in multiple places with different sizes, so having the ability to reuse a single image often proves to be extremely useful and makes swapping the image incredibly simple in the future. I would suggest that everyone start using SVGs more often on their websites. You definitely won’t regret upgrading your website logo or your commonly used icons to svg.