How to improve page load speed with SVG optimization

By Kyle | Posted Nov 15, 2016 | 5 min. (1055 words)

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" 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 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.

<!-- 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.

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:

  • version="1.1"

    While recommended to comply with file standards, this can be removed as it is ignored by every browser user agent.

  • id="layer"

    In this example, the ID of the SVG is the layer the artwork exists on in the illustrator file. Removing this will have no impact on the image, but will cause the layer name to be lost if you were to open the file up in illustrator.

  • xmlns="http://www.w3.org/2000/svg"

    This is required for external files, however if your SVG code is inline with your HTML, it is safe to remove it.

  • xmlns:xlink="https://www.w3.org/1999/xlink"

    If this is unused, it is safe to remove.

  • X,Y attributes

    These are coordinates for the top left position of the image, safe to remove from an individual SVG.

  • style="enable-background"

    This attribute is supposed to make the background available to child elements. It’s for things like filter effects that blend in with the background. The only major browser that supports it is IE10+, and in this case it can be removed.

  • Width / Height

    These attributes control the dimensions of the image much the same as how a standard image is scaled in HTML. Dimensional attributes are safe to remove if you’re sizing the image in CSS.

  • xml:space="preserve"

    This controls the handling of white-space characters, can be removed safely.

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" xml:space="preserve">
//After
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<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.

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 Real User Monitoring

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

Making a SVG HTML Burger Button

Designing for developers – pixel pushers and code crunchers unite!

Would you like to read more tutorials like this from Raygun? Join Raygun Monthly,]11 where we deliver articles, webinars and ebooks on improving software quality straight to your inbox.