Why You Should Be Using SVG on Your Website

Scalable Vector Graphics, or SVG, play an important role in website design today. If you are not currently using SVG in your web design work, here are some reasons why you should start doing so, as well as fallbacks you can use for older browsers that do not support these files.

Resolution

The biggest benefit of SVG is resolution independence. Because SVG files are vector graphics (as opposed to pixel-based raster images), you can resize them without losing image quality. This is especially helpful when you are creating responsive websites that must look good and work well across a wide range of screen sizes and devices. You can scale SVG files up or down to accommodate the changing size and layout needs of your responsive website without compromising their quality in any way.

Generally, SVGs have a smoother, crisper appearance than images of other formats, regardless of size.

File Size

One challenge with using raster images (e.g., JPG, PNG, GIF) on responsive websites is file size. Because raster images do not scale the way that vector images do, you must deliver your pixel-based images in the largest size at which they will be displayed. This is because you can always make an image smaller and retain its quality, but the same is not true for making images larger. The result is images that are far larger than the size at which they're being viewed, forcing browsers to download large files.

In contrast, vector graphics are scalable, so you can use very small file sizes regardless of how large those images may need to be displayed. This ultimately optimizes a site’s overall performance and download speed.

CSS Styling

You can easily add SVG directly to the HTML of a page. This is known as inline SVG. One benefit of using inline SVG is that, because the graphics are actually drawn by the browser, there's no need for an HTTP request to fetch an image file.

Another benefit: You can style inline SVG with CSS. Need to change the color of an SVG icon? Instead of editing that image in graphics editing software and then exporting and uploading the file again, you can change the SVG file simply with a few lines of CSS. You can use CSS to change SVGs for hover states and other design needs, too.

Animations 

Because you can style inline SVG files with CSS, you can use CSS animations on them as well. CSS transforms and transitions are two easy ways to add some life to SVGs. You can get rich Flash-like experiences on a page without using Flash—which the iPad no longer supports. In fact, Adobe is phasing out Flash by the end of 2020.

Uses of SVG

As powerful as SVGs are, they can't replace every other image format. Photos that require rich color depth still should be in JPG or PNG format, but simple images like icons are perfectly suited to be executed as SVG.

SVG is also appropriate for some complex illustrations, such as graphs, charts, and company logos. All of these graphics benefit from being scalable and able to be styled with CSS.

Support for Older Browsers

Current support for SVG is very good in modern web browsers. All in all, a very small percentage of the browsing population still uses incompatible browsers, and that number continues to shrink. This means that you can use SVG on your website without worry.