HTML & CSS

Is Using SVG Images Good for Your Website’s Performance?

Maria Antonietta Perna
Share

SVG for Website Performance

There are a few good reasons why Scalable Vector Graphics, or SVG, are a great choice of graphics format for the web. Having a relatively small file size is certainly one of them. However, this claim is not without some qualification. Let’s delve a bit deeper.

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

Benefits of Vector Images

Raster images, e.g., .JPEG, .PNG, etc., are made of square pixels laid out in a grid. Therefore, the larger the image, the more pixels it uses, which causes the file size to increase.

Not only that, but pixels-based graphics don’t scale very well. Here’s what I mean. This is a .JPEG image of a flower at its original width of 300 x 225px:

Example of raster or bitmap image of a flower

Here’s the same image when it is displayed at a much higher resolution:

Example of scaled-up raster image of a flower

Notice the fuzzy edges, the blurry surface and how the overall quality of the image is considerably degraded.

With retina screens being now common on users’ devices, the risk of having raster images on your website looking like this is high. One alternative is to serve high resolution graphics, which of course can hit web performance pretty hard.

The srcset and picture Elements

Fortunately, modern HTML comes to the rescue with responsive images, i.e., the srcset and the picture elements, which at the time of writing are both supported in the latest versions of all major browsers, except for EI11 and Opera Mini.

The goal of responsive images is to serve the best quality image for the device being used. This involves making available images at various resolutions, but enabling the browser to load just that one image that fits the capabilities of the accessing device.

If you’re curious to know more about how these techniques work, How to Build Responsive Images with srcset by Saurabh Kirtani goes deeply into the topic.

Here’s what srcset looks like in practice:

<img srcset="image_3x.jpg 3x, image_2x.jpg 2x, image_1-5.jpg 1.5x" src="image.jpg" alt="image">

And below is an example of the picture element in action:

<picture>
  <source media="orientation:landscape" srcset="retina-horizontal-image.jpg 2x, horizontal-image.jpg">
  <source media="orientation:portrait" srcset="retina-vertical-image.jpg 2x, vertical-image.jpg">
  <img src="image.jpg" alt="image">
</picture>

As you can see, although only one copy of your image will be served according to the accessing device, both techniques require you to prepare and upload to your server multiple copies of that image. It won’t be a problem for your website’s performance, but it can negatively impact on your time and your server’s bandwidth.

SVGs are Resolution-Independent

Scaling is in the DNA of vector graphics, and SVG is an XML-based vector image format. SVGs are made of geometrical drawing instructions, e.g., shapes, paths, lines, etc., which are independent from pixel size. From the point of view of file size, it doesn’t really matter at what size the image is rendered, simply because those instructions remain unchanged.

One more implication of being resolution-independent is that you don’t need to prepare different copies of the same image for different devices; one size fits all and looks razor sharp at any screen resolution.

That said, there’s something that can have a negative impact on SVG file size, i.e. how complex the image is. The more complex the drawing instructions the larger the file size.

Suggestions for Performant SVG Files

Generally speaking, SVGs for web use are quite simple, things like logos, maps, icons, etc. It’s likely such simple SVG images have a small file size compared to their raster counterparts.

However, there are steps you can take to optimize the file size even more and ensure your visitors get an awesome experience on your website.

Here are a few tips for you.

Bake Performance in the Design from the Start

You can code simple SVG graphics yourself or use a JavaScript library like Snap.svg to draw your vector graphics. Often, to get the job done you’ll simply fire off a vector graphics editor like Adobe Illustrator.

If you use a graphics editor, thinking about simplifying SVG code at the design stage decreases the risk of breaking your artwork when you optimize it at later donw the line.

The first step you can take in this direction is to get the size of the canvas right in your graphics editor of choice. Sarah Drasner recommends setting it at 100 x 100px, give or take, depending on your project. This ensures the canvas is not too small, which generates lots of decimals you can hardly reduce at a later stage without messing up the graphic. On the other hand, this size is not too big either. In fact, a large canvas implies a corresponding large number of path points.

Next, reducing the number of path points is crucial to shave bytes off your SVG file. This means using shapes instead of paths wherever possible, but also combining multiple paths into fewer paths, unless you plan on animating them individually. Adobe Illustrator offers the Simplify panel to further reduce path points. Here’s a quick video tutorial to illustrate its use.

Export SVGs the Smart Way

Take full advantage of your graphic editor’s exporting capabilities. Not doing so, could mean getting some SVG code stuffed with proprietary markup and bloat you don’t need.

For instance, if you have the latest version of Adobe Illustrator (CC 2017 at the time of writing), export your SVG graphics using the Export As option, and select the .svg file type:

Export As feature in Adobe Illustrator

Illustrator’s panel offers a few settings to help you keep file size down and output clean, almost web-ready markup. You can even preview the code by clicking the Show Code button inside the panel.

Options in Save As panel in Adobe Illustrator

For a detailed walk-through of each option in Illustrator, The Different Ways of Getting SVG Out of Adobe Illustrator by Geoff Graham is a great read.

Squeeze more Bytes with SVG Optimization Tools

Once your SVG graphic has been exported, you can still shrink it a bit more using one of the excellent SVG optimization tools available.

SVGOMG (and and its web-based GUI counterpart) together with Peter Collingridge’s SVG Editor are the most popular tools.

Check out Optimising SVG images by Guillaume Cedric Marty to learn more about how to use SVGOMG.

Enable Delivery of Gzipped SVG Files

The last step in your SVG optimization to-do list is enabling gzip compression on the server. SVG is just XML markup, therefore it lends itself to compression without any issues.

The benefits in terms of file reduction are significant. Appendix J of the SVG 1.1 Specification shows a comparison table between examples of uncompressed and compressed SVG files. The results are overwhelmingly in favor of compression with a decrease of 77-84% in file size.

Conclusion

SVG graphics are an awesome choice for the web. Used for simple icons, logos, etc., are often more performant than their raster counterparts, especially if you take the few precautions listed in this article.

The tips I mention above are by no means exhaustive. You can push the envelope even more. For detailed optimization techniques, the resources below are a must read:

What is your SVG optimization workflow? Hit the comment box to share!