Three Ways of Decreasing SVG File Size with SVGO

Share
Three Ways of Decreasing SVG File Size with SVGO

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

In this article I suggest three ways in which SVGO lets you optimize SVG graphics to make them suitable for web use.

Why You Need to Optimize SVGs

SVG (a.k.a. Scalable Vector Graphics) is a resolution-independent graphics format. The big advantage of not being pixel-based is that SVGs look awesome on our shiny retina screen-enabled devices and work great on the responsive web.

If like me you’re not a graphic designer, you might have found yourself grabbing ready-made SVGs from various Creative Commons or Public Domain online sources. One downside of doing so is that often such artworks are not produced with the web in mind. This means that you might find they’re rife with over-complicated paths and Photoshop-like effects. Also, since SVGs are XML-based, digging into the source code often reveals lots of unnecessary markup. Apart from my ingrained love for clean code, complexity and bloat add to the file size and negatively impact on website performance.

Don’t think that if you draw SVGs yourself you’ll be totally in the clear. Although the latest versions of Adobe Illustrator make it possible to export reasonably clean SVG markup, older versions, as well as some different vector graphics editors, still sprinkle the markup with unneeded comments, doctype declarations and proprietary attributes.

Here’s an instance of graphics editor-generated code to illustrate the point:

<svg 
  xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="https://www.w3.org/2000/svg" 
  xmlns="https://www.w3.org/2000/svg"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
  viewBox="0 0 1000 1000" version="1.1">

  <g inkscape:label="Katze" inkscape:groupmode="layer" id="layer1" transform="translate(0,-52.362183)">
  
  ... More code here
  
  </g>

</svg>

Instead, all you really need is:

<svg 
  xmlns="https://www.w3.org/2000/svg"
  viewBox="0 0 1000 1000">

  <g id="layer1" transform="translate(0,-52.362183)">
  
  ... More code here
  
  </g>

</svg>

Furthermore, if you don’t use layer1 in your CSS or JavaScript, you could get rid of the id attribute on the <g> tag as well.

Personally, I’m in favor of a bit of manual cleaning up of SVG code. But, fear not, the bulk of the most tedious and repetitive part of the optimization work easily lends itself to automation.

What Is SVGO?

Without a doubt, the most popular tool available for the job at this time is SVGO.

SVGO runs on Node.js, an asynchronous, event-driven runtime to build scalable network applications. You don’t need to know how to build applications with Node.js in order to work with SVGO. However, you need to use your computer’s command line user interface (CLI).

SVGO allows you to enable or disable specific optimizations by enabling or disabling its plugins.

For instance, if you want to remove empty attributes from your SVG graphic, you’ll have to enable the removeEmptyAttrs.js plugin.

You can see a full list of all the available plugins for SVGO in the project’s README file on GitHub.

There are quite a few ways in which you can integrate SVGO in your development work. In what follows, I’m going to discuss just three of the options open to you.

#1. Just Node.js and SVGO

To start using SVGO, just install Node.js by downloading the latest stable version corresponding to your operating system and follow the instructions in the installer.

Next, you can install SVGO using npm, Node’s package manager. Type this command in your terminal:

npm install -g svgo

Now, you have installed SVGO globally in your machine so you can use it anywhere.

To optimize an SVG file, type in your terminal:

svgo yoursvgfile.svg

Replace yoursvgfile.svg with the name of the SVG file you wish to optimize. However, using the tool this way destroys the original file, which is something I wouldn’t recommend. In fact, you might want to make changes to the original file, and destroying all the editor-specific code might prevent you from being able to use your graphics program’s editing features. Therefore, it’s best practice to generate a new, optimized file without overriding the original one. To do so, type this command:

svgo yoursvgfile.svg yoursvgfile.min.svg

Now, you have two SVG files: yoursvgfile.svg, which is the original file, and yoursvgfile.min.svg, which is the optimized SVG file.

I’ve just performed this step and SVGO lets me know that in just 167 milliseconds it created an optimized copy of the original file. The latter weighed 17.9 Kb while the optimized copy weighs 11.48 Kb, yielding a 36.2% saving:

Message after SVGO performs its SVG file optimization.

If you open yoursvgfile.min.svg in a text editor, you’ll see much less code, which means a much smaller file size. Great!

You can also point SVGO to an entire folder using the -f flag, like this:

svgo -f ../path/to/folder/with/svg/files

To customize the output SVGO generates, enable the many plugins available. For instance:

svgo yoursvgfile.svg --enable='removeComments,mergePaths'

The command above creates an optimized version of yoursvgfile.svg by removing comments and merging multiple paths in the source code.

#2. Integrate SVGO in Your Gulp Workflow

A widely adopted front-end workflow these days includes a task runner that performs automated operations like compiling Sass into CSS, minifying scripts, etc.

One of the most popular task runners is Gulp, which is both powerful and quick to implement.

It’s easy to integrate SVGO with your Gulp-based workflow thanks to gulp-svgmin.

You install gulp-svgmin with npm:

npm install gulp-svgmin

A basic gulp task for svgmin looks like this:

var gulp = require('gulp');
var svgmin = require('gulp-svgmin');

gulp.task('default', function () {
  return gulp.src('logo.svg')
    .pipe(svgmin())
    .pipe(gulp.dest('./out'));
});

The code above, which you add to your Gulp configuration file, Gulp.js, takes logo.svg, calls svgmin to optimize it, and outputs it in a dedicated folder.

You can find more articulated examples on the gulp-svgmin GitHub page. If you’re not all too familiar with Gulp but you’d like to get up to speed with it, don’t miss An Introduction to Gulp.js by Giulio Mainardi, which offers an easy-to-follow walk-through.

#3. SVGOMG: The Online GUI Version of SVGO

Command line tools are practical and get the job done quickly. However, nothing beats having a preview of your SVG graphic while you’re optimizing it.

The advantage of the preview is that you immediately realize when a specific otpimization is degrading the graphics by being too aggressive. Therefore you have the opportunity of quickly adjusting the corresponding setting to generate an optimal output before the minified copy is made.

Enters SVGOMG by Jake Archibald

This is a free online GUI (Graphical User Interface) version of SVGO (SVGOMG stands for SVGO Missing GUI):

SVGOMG Interface.
SVGOMG Interface.

To get started, pick any of the following three ways:

  • Drag and drop your SVG graphic in the large checkered, grayed out area you can see in the image above
  • Open your SVG using your computer’s File Upload feature
  • Paste your SVG markup inside the designated menu area.

Or you can click on Demo to try out the application using the demo SVG file already available for you.

Once you’ve done so, you can adjust the tool’s settings, which correspond to SVGO’s plugins, and immediately preview their effects both on the quality of the graphic and the file size/kilobytes savings.

SVGOMG in action.
SVGOMG in action.

The huge advantage is that if you go too far with your optimizations and the image starts to break, you can take action right away and nip the problem in the bud.

If you click on Code in the menu on the top left of the application, you can also get instant feedback on the code changes SVGOMG makes in your file as you fiddle with the options.

You can also toggle between the original graphic and the optimized version, which helps you make useful comparisons.

One final neat feature of SVGOMG is that it works offline too by taking advantage of Service Workers technology.

Conclusion

If you care about clean code and website performance, and you should, optimizing your SVG graphics for use on the web is a must.

In this article I pointed you to three ways in which you can optimize SVG graphics for your website using SVGO. There are tons more, for example:

How do you use SVGO? What’s your SVG optimization workflow? Hit the comment box below to share.

Frequently Asked Questions (FAQs) about Decreasing SVG File Size with SVGO

What is SVGO and why is it important in SVG file optimization?

SVGO, which stands for SVG Optimizer, is a node.js-based tool that is used to optimize SVG (Scalable Vector Graphics) files. SVG files are often used in web design because they can scale without losing quality. However, these files can sometimes be large in size, which can slow down a website’s load time. SVGO helps to reduce the size of these files by removing unnecessary data without affecting their appearance and functionality. This results in faster load times and improved website performance.

How does SVGO work to decrease SVG file size?

SVGO works by going through the SVG file’s XML structure and removing unnecessary data such as metadata, comments, hidden elements, and default or non-optimal values. It also minifies styles and scripts, combines similar paths, and rounds floating point numbers. All these actions help to reduce the file size without affecting the way the SVG is displayed.

How can I install and use SVGO?

SVGO is a node.js tool, so you’ll need to have node.js and npm (node package manager) installed on your computer. Once you have these, you can install SVGO by running the command npm install -g svgo in your terminal. To use SVGO, navigate to the directory containing your SVG files and run the command svgo filename.svg. This will optimize the file in place. If you want to create a new optimized file without changing the original, you can use the command svgo filename.svg -o filename.optimized.svg.

Can I customize how SVGO optimizes my SVG files?

Yes, SVGO is highly customizable. It comes with a variety of plugins that each perform a specific optimization task. You can choose which plugins to use and configure their settings to suit your needs. This is done by creating a configuration file named .svgo.yml in your project’s root directory. In this file, you can list the plugins you want to use and their settings.

What are some common issues I might encounter when using SVGO and how can I solve them?

Some users have reported issues with SVGO removing necessary elements or attributes, resulting in SVGs that don’t display correctly. This is usually caused by certain plugins being too aggressive in their optimization. If you encounter this issue, you can solve it by disabling the problematic plugin in your .svgo.yml configuration file. Another common issue is SVGO not working on certain operating systems or environments. This can often be solved by updating your node.js and npm to the latest versions.

How can I automate the process of optimizing SVGs with SVGO?

If you’re working on a large project with many SVG files, it can be tedious to optimize each one manually. Fortunately, SVGO can be integrated with build tools such as Grunt and Gulp, allowing you to automate the optimization process. You can also use SVGO in combination with version control systems like Git to automatically optimize your SVGs whenever you commit changes.

Can SVGO be used with other image optimization tools?

Yes, SVGO can be used in conjunction with other image optimization tools. For example, you can use SVGO to optimize your SVG files and then use a tool like ImageOptim or TinyPNG to further compress your raster images. This can result in significant file size reductions and performance improvements for your website.

Is SVGO suitable for all types of SVG files?

While SVGO is a powerful tool for SVG optimization, it may not be suitable for all types of SVG files. For example, SVGs with complex animations or interactive elements may not be optimized correctly by SVGO. In these cases, it may be necessary to manually optimize the SVG or use a different tool.

How can I keep up to date with the latest developments in SVGO?

The best way to stay up to date with SVGO is to follow the project on GitHub. Here, you can see the latest commits, participate in discussions, and even contribute to the project yourself. You can also find useful information and tutorials on various web development blogs and forums.

Are there any alternatives to SVGO for SVG optimization?

While SVGO is one of the most popular tools for SVG optimization, there are several alternatives available. These include SVGOMG, a web-based tool that provides a user-friendly interface for SVGO; Scour, a Python script for SVG optimization; and Inkscape, a free and open-source vector graphics editor that includes some SVG optimization features. Each of these tools has its own strengths and weaknesses, so you may want to try several to see which one best suits your needs.