Responsive Web Design, Part 1 (2015)
Mastering SVG For Responsive Web Design
Optimizing SVGs Using Standalone Optimization Tools
No matter what vector editing tool you use, none of them outputs perfectly clean and optimized code. Exported SVGs usually contain a lot of redundant and useless information such as editor metadata, comments, empty groups, default or non-optimal values and other junk that can be safely removed or changed without affecting the rendered SVG. Using a standalone optimization tool to optimize the code further is generally a good idea.
There are several optimization tools available. The most popular tool is SVG Optimizer11 (SVGO) by Kir Belevich. SVGO is a Node.js-based SVG optimization tool.
You can install and use SVGO via the terminal by first installing it using the Node Package Manager (npm):
npm install -g svgo
Then, you can optimize files by simply calling svgo on a single file:
svgo mySVG.svg
or an entire folder:
svgo -f ../path/to/folder/with/svg/files
Other options and arguments are available and documented in SVGO’s GitHub repository.
However, optimizing files and folders manually like this can quickly become tedious. Fortunately, SVGO has many tools available that allow you to integrate it in any phase of your workflow.
SVGO TOOLS TO INTEGRATE INTO PRACTICALLY ANY WORKFLOW
THE SVGO GRUNT PLUGIN
SVGO is available as a Grunt plugin12, as well as a Gulp plugin13 Both plugins allow you to automate the optimization process, saving you a lot of time and effort. Links to all formats of the optimizer can be found in its GitHub repository.
To install the Grunt SVGO plugin, you start with:
npm install --save-dev grunt-svgmin
Then, in your gruntfile, the settings may look similar to this:
require(';load-grunt-tasks';)(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
svgmin: {
options: {
plugins: [
{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}
]
},
dist: {
files: {
';dist/unicorn.svg';: ';app/unicorn.svg';
}
}
}
});
grunt.registerTask(';default';, [';svgmin';]);
The above example can be found in the Grunt plugin’s GitHub repository.
If you haven’t used Grunt before and don’t know how or where to start, I recommend reading Chris Coyier’s popular 24 ways article, “Grunt for People Who Think Things Like Grunt are Weird and Hard14”.
At this point — and before we move forward — it is worth mentioning that you will not want to use all of SVGO’s default optimizations. The optimizations are available as plugins that you can either enable or disable, thereby controlling which optimizations apply. Certain optimizations can do much more harm than good, and may end up completely breaking your SVG.
For instance, one optimization that you must not apply at all is the one that removes the viewBox attribute. You’ll want to make sure the viewBox attribute is always set, otherwise controlling the SVG and making it responsive will not be possible. We’ll talk more about making SVGs responsive with CSS later in this chapter.
Whether you use SVGO or any other optimization tool, bear in mind that, sometimes, combining paths or decreasing the number of decimal points can completely break the SVG. If your SVG contains gradients, then removing IDs will break those, and if it contains blur or drop shadows that are embedded as bitmaps, then removing the xlink attribute will break these effects.
THE SVGO ILLUSTRATOR PLUGIN: SVG NOW
SVG NOW15 is an SVG exporter for Adobe Illustrator released by Adobe’s David Deraedt. It is aimed at optimizing SVG files by post-processing the generated SVG code using SVGO. It is built on top of Illustrator’s SVG exporter, controls some of its parameters and default values, and runs a customized version of SVGO with an HTML GUI built on top of it to control its plugins. In essence, it is SVGO integrated into Illustrator.
Once more, the optimizations you apply using SVG NOW may end up breaking your SVG, and unfortunately there is no live feedback to tell if the checked optimizations will break the SVG or not. This means that you may sometimes end up exporting a broken SVG, and thus may need to go back to the editor, choose other optimizations, and then export again — hopefully not breaking your SVG each time.
THE SVGO GUI
SVGO comes with a nice and simple drag-and-drop GUI16 that is available for download on Windows, Mac OS X and Linux. You simply drag your images into the GUI and the SVGs are automatically optimized for you on the fly (see below). Notice how the file size of the SVGs decreases significantly after applying the optimizations.
Image showing the SVGO GUI along with the results of optimizing several SVG files using the GUI. Photo credit: SVGO GUI Github Repo.
Running your SVGs through SVGO several times can yield further optimizations with each pass. But remember, your SVG may end up completely broken and there is no way to tell whether it will be broken or not before you drop them into the GUI. I recommend you keep a backup copy for each SVG you optimize, since the GUI replaces the SVG with the optimized one by default.
SVGO OS X FOLDER ACTION
SVGO also comes with a Mac OS X folder action17 that allows you to set up the tool for any folder and automatically optimize any files you drop into that folder.
THE SVGO WEB GUI: SVGOMG
Google’s Jake Archibald created an SVGO-based web GUI called SVGOMG18 that provides us with the feature missing from the SVGO tools mentioned so far: a live preview. Using the web GUI, you can check the set of SVGO optimizations that you want and get live feedback showing you the result of applying that optimization to your SVG (see below).
Screenshot showing the SVGO web GUI.
The web GUI allows you to upload an SVG file, or input SVG code directly into the app, apply the optimizations as needed, preview the amount of savings and compare the SVG with the original one, among other options. Once you’re finished, you can download the optimized SVG.
If you’re not in need of automation, this tool may come in handy for some simple projects that need a quick, one-time optimization.
It is also worth mentioning that the SVGOMG GUI works offline in browsers that support ServiceWorker.
SVGO is a great SVG optimization tool that comes with a set of extensions and apps that make it suitable for almost any kind of workflow. But you need to remember that whether you are using SVGO or any other optimization tool, your SVG’s document structure and styles are likely to be changed in most cases.
You don’t have to worry about optimizing your SVG with SVGO if your only intention is to use the SVG as a static image. If you want to use the SVG as a document for scripting or other animation purposes, then keep in mind that your entire document structure is going to change and this will eventually affect your animations and scripts — they might even end up not working anymore.
Choose any optimization tool, but make sure you optimize your SVG as much as possible to make sure it is ready to be embedded and used in your projects. The smaller the SVG’s file size and cleaner the code, the better it is for production and performance.