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 Video Library
Refcards
Trend Reports

Events

View Events Video Library

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

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • Modernizing Financial Systems: The Critical Role of Cloud-Based Microservices Optimization
  • Master SQL Performance Optimization: Step-by-Step Techniques With Case Studies
  • Resolving Parameter Sensitivity With Parameter Sensitive Plan Optimization in SQL Server 2022
  • Memory-Optimized Tables: Implementation Strategies for SQL Server

Trending

  • What Is Plagiarism? How to Avoid It and Cite Sources
  • How Security Engineers Can Help Build a Strong Security Culture
  • Engineering Resilience Through Data: A Comprehensive Approach to Change Failure Rate Monitoring
  • Monoliths, REST, and Spring Boot Sidecars: A Real Modernization Playbook
  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.

By 
Kyle Henwood user avatar
Kyle Henwood
·
Nov. 20, 16 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
22.9K 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.

    Related

    • Modernizing Financial Systems: The Critical Role of Cloud-Based Microservices Optimization
    • Master SQL Performance Optimization: Step-by-Step Techniques With Case Studies
    • Resolving Parameter Sensitivity With Parameter Sensitive Plan Optimization in SQL Server 2022
    • Memory-Optimized Tables: Implementation Strategies for SQL Server

    Partner Resources

    ×

    Comments

    The likes didn't load as expected. Please refresh the page and try again.

    ABOUT US

    • About DZone
    • Support and feedback
    • Community research
    • Sitemap

    ADVERTISE

    • Advertise with DZone

    CONTRIBUTE ON DZONE

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

    LEGAL

    • Terms of Service
    • Privacy Policy

    CONTACT US

    • 3343 Perimeter Hill Drive
    • Suite 100
    • Nashville, TN 37211
    • [email protected]

    Let's be friends: