Why You Should Be Using SVG on Your Website Today

The benefits of using Scalable Vector Graphics

Format
mla apa chicago
Your Citation
Girard, Jeremy. "Why You Should Be Using SVG on Your Website Today." ThoughtCo, Jan. 27, 2017, thoughtco.com/using-svg-in-web-design-3470014. Girard, Jeremy. (2017, January 27). Why You Should Be Using SVG on Your Website Today. Retrieved from https://www.thoughtco.com/using-svg-in-web-design-3470014 Girard, Jeremy. "Why You Should Be Using SVG on Your Website Today." ThoughtCo. https://www.thoughtco.com/using-svg-in-web-design-3470014 (accessed September 26, 2017).
SVG icon
SVG icon.

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 instead of pixel-based raster images, they can be resized without losing any image quality.

This is especially helpful when you are creating responsive websites that need to look good and work well across a wide range of screen sizes and devices.

SVG files can be scaled up or down to accommodate the changing size and layout needs of your responsive website and you do not need to worry about those graphics having compromised quality any step of the way.

File Size

One of the challenges with using raster images (JPG, PNG, GIF) on responsive websites is the file size of those images. Because raster images do not scale the way that vector ones do, you need to deliver your pixel-based images at 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 end result is that you often have images that are far larger than they are being shown on a person’s screen, which means they are needlessly being forced to download a very large file.

SVG addresses this challenge. Because the vector graphics are scalable, you can have very small file sizes regardless of how large those images may need to be displayed. This will ultimately have a positive impact on a site’s overall performance and download speed.

CSS Styling

SVG code can also be added directly to the HTML of a page.

This is known as “inline SVG.” One of the benefits of using inline SVG is that since the graphics are actually drawn by the browser based on your code, there is no need to make an HTTP request to fetch an image file. Another benefit is that inline SVG can be styled with CSS.

Need to change the color of an SVG icon? Instead of needing to open that image in some kind of editing software and export and upload the file again, you can simply change the SVG file with a few lines of CSS.

You can also use other CSS styles on SVG graphics to change them on hover states or for certain design needs. You can even animate those graphics to add some movement and interactivity to a page.

Animations          

Because inline SVG files can be styled with CSS, you can use CSS animations on them as well. CSS transforms and transitions are two easy ways to add some life to SVG files. You can get rich Flash-like experiences on a page without succumbing to the downsides that come with using Flash on websites today.

Uses of SVG

As powerful as SVG is, these graphics cannot replace every other image format you are using on your website. Photos that require deep color depth will still need to be a JPG or perhaps a PNG file, but simple images like icons are perfectly suited to be executed as SVG.

SVG can also be appropriate for more complex illustrations, like company logos or graphs and charts. All of the graphics will benefit from being scalable, able to be styled with CSS, and the other advantages listed in this article.

Support for Older Browsers

Current support for SVG is very good in modern web browsers. The only browsers that really lack support for these graphics are older versions of Internet Explorer (Version 8 and below) and a few older versions of Android. All in all, a very small percentage of the browsing population still  uses these browsers, and that number continues to shrink. This means that SVG can be used pretty safely on websites today.

If you do want to provide a fallback for SVG, you can use a tool like Grumpicon from the Filament Group. This resource will take your SVG image files and create PNG fallbacks for older browsers.

Edited by Jeremy Girard on 1/27/17

Format
mla apa chicago
Your Citation
Girard, Jeremy. "Why You Should Be Using SVG on Your Website Today." ThoughtCo, Jan. 27, 2017, thoughtco.com/using-svg-in-web-design-3470014. Girard, Jeremy. (2017, January 27). Why You Should Be Using SVG on Your Website Today. Retrieved from https://www.thoughtco.com/using-svg-in-web-design-3470014 Girard, Jeremy. "Why You Should Be Using SVG on Your Website Today." ThoughtCo. https://www.thoughtco.com/using-svg-in-web-design-3470014 (accessed September 26, 2017).