Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Improve Page Load Speed with SVG Optimization

DZone's Guide to

How to Improve Page Load Speed with SVG Optimization

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.

· Performance Zone
Free Resource

Download our Introduction to API Performance Testing and learn why testing your API is just as important as testing your website, and how to start today.

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:

  • 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" 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!

    Find scaling and performance issues before your customers do with our Introduction to High-Capacity Load Testing guide.

    Topics:
    web dev ,performance ,svg

    Published at DZone with permission of Kyle Henwood, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    THE DZONE NEWSLETTER

    Dev Resources & Solutions Straight to Your Inbox

    Thanks for subscribing!

    Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

    X

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}