How to Improve Page Load Speed with SVG Optimization

SVG optimization is, and will always be one of the biggest improvements you can make to a web page to improve load speed. With the increasing resolutions of tablets and smartphones, getting a crisp image using bitmaps across multiple devices has become a tedious task, often requiring multiple images of differing quality. This is one of the primary driving forces of the illustrative era of web design. Simple illustrations that can be created with SVGs and are infinitely scalable, and crisp at any size while maintaining a small file footprint.

While being extremely efficient at storing information next to its bitmap counterpart, SVGs themselves are not immune to file size bloat. SVG code generated by tools such as Adobe illustrator, Inkscape or Sketch, can be ballooning with unnecessary comments and XML attributes, making the resulting SVG much larger than necessary.

Once the bloat is removed, the file size can decrease by a large amount, which speeds up your end user load speed, especially if you have lots of SVGs on a single page.

This article will show you what to remove from your SVGs to stop them from slowing down your page and giving your end user a poor experience.

Let’s Kick Into SVG Optimization

For the sake of this blog post I created a very simple image in Adobe Illustrator 2016, and exported as an SVG 1.1. The output is the below code, which totals 609 bytes. (I wrote another blog post on how to create an SVG burger button here.)

<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> <svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200"      viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <style type="text/css">     .st0{stroke:#0000FF;stroke-width:20;stroke-miterlimit:10;}     .st1{fill:#FF0000;} </style> <g id="group">     <rect x="20" y="20" class="st0" width="160" height="160"/>     <circle class="st1" cx="100" cy="100" r="26"/> </g> </svg>

But We Can Do More!

There are tools that exist for SVG optimization and monitoring page performance which I’ll leave at the bottom of this post, however, I’m going to run through how you can optimize the code by hand. This is especially useful if you are animating the paths of a file.

Here’s a quick overview of which pieces can be removed, then I’ll go into detail as to why they exist in the first place:

XML doctype

<?xml version="1.0" encoding="utf-8"?>

The XML doctype is only required when the SVG is being used in a context where a doctype hasn’t already been declared, otherwise it inherits the doctype from its parent.

Since in most cases you’re using the image in a website where the doctype has already been declared, it is safe to remove.

Removing comments

<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

The comments generated by illustrator can be safely removed, their only purpose is for illustrator to let itself know what the image was created by.

Removing unnecessary attributes on the SVG element.

The only required attributes on the SVG element are the xmlns type (if the SVG is not inline) and the viewbox, which controls the dimensions of the SVG’s artboard (not physical size!) Here are the unnecessary elements you may want to remove:

SVG tag result:

//Before <svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> //After <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

Removing path groups where possible

<g id="group">

Groups are a container for paths and shapes. Useful for organising paths in the creation of the SVG, but unless you plan on using CSS to animate or move the group and its children around inside the SVG element, the group tag can be removed without any ill effect.

Remove white space from new lines

Where possible, remove whitespace from new lines, indents and tabs to aid with SVG optimization.

End Result

After removing all the unnecessary attributes, groups, comments and XML, I have managed to reduce the file size by over 50%, reducing the 609 bytes file down to just 300 bytes.

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <style type="text/css"> .st0{stroke:#0000FF;stroke-width:20;stroke-miterlimit:10;} .st1{fill:#FF0000;} </style> <rect x="20" y="20" class="st0" width="160" height="160"/> <circle class="st1" cx="100" cy="100" r="26"/> </svg>

Saving 50% of the original file is nothing to sneeze at. Depending on your own use of SVGs, the amount of unnecessary code can quickly accumulate and may lead to a poor user experience.

Final Thoughts

SVG optimization by hand like this shouldn’t really be done very often (only really if you are looking at animating the paths of a file). There are tools that exist to make the job easier. I suggest you take a look at the tools below to help:

Browser tools:

https://kraken.io/web-interface
https://jakearchibald.github.io/svgomg/

Grunt library

https://github.com/sindresorhus/grunt-svgmin

Monitoring software

Raygun Pulse (especially the Pulse Insights feature)

Related articles:

Tools of the trade: 10 front end development tools I can’t live without

Making an SVG HTML Burger Button

Designing for developers – pixel pushers and code crunchers unite!