DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Software Design and Architecture
  3. Performance
  4. How to Improve Page Load Speed with SVG Optimization

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.

Kyle Henwood user avatar by
Kyle Henwood
·
Nov. 20, 16 · Tutorial
Like (1)
Save
Tweet
Share
21.97K Views

Join the DZone community and get the full member experience.

Join For Free

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!

    SVG optimization

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

    Opinions expressed by DZone contributors are their own.

    Popular on DZone

    • Spring Boot, Quarkus, or Micronaut?
    • Steel Threads Are a Technique That Will Make You a Better Engineer
    • Tracking Software Architecture Decisions
    • Monolithic First

    Comments

    Partner Resources

    X

    ABOUT US

    • About DZone
    • Send feedback
    • Careers
    • Sitemap

    ADVERTISE

    • Advertise with DZone

    CONTRIBUTE ON DZONE

    • Article Submission Guidelines
    • Become a Contributor
    • Visit the Writers' Zone

    LEGAL

    • Terms of Service
    • Privacy Policy

    CONTACT US

    • 600 Park Offices Drive
    • Suite 300
    • Durham, NC 27709
    • support@dzone.com
    • +1 (919) 678-0300

    Let's be friends: