Optimizing SVG for the Web

From the author: Optimizing SVG (Scalable Vector Graphics) for web projects has two benefits: smaller file size and easier work with. But many times I opened a web project and found that SVG assets could be made significantly smaller with simple optimizations. In this article, I will walk you through my process for optimizing SVG assets. This can help you if you are a designer or developer new to working with SVG on the Web.

Many icon libraries provide SVG resources that are already well optimized. But if you are creating your own graphics or provided by another designer, you can do so in a few steps. I mainly use Adobe Illustrator to create and edit SVGs. Here’s a pretty simple icon created in Illustrator:

We can save it by going to File> Save As and choosing the SVG option. However, if we look at the code of the saved SVG, we can see that it is rather bloated. The code contains a lot of unnecessary data – groups that can be collapsed, paths that can be combined, metadata generated by the program itself, and much more:

Each graphics program has its own way of saving SVGs, but no matter which one you use, the code can still contain a lot of additional data if not optimized. Let’s take a look at some of the ways to fix this problem.

Package launch

SVGO is an NPM package that starts the optimization process for SVG resources at build time, and it’s a good idea to use something like this in your workflow. But the visual tool is often better at removing unnecessary paths and groups and allows us to tweak (and view) optimization parameters depending on what kind of result we want to get.

Quick solution with SVGOMG

One way to quickly remove much of this unnecessary data is with Jake Archibald’s SVGOMG tool. You can either load the SVG file or paste the code directly, and depending on the options you choose, the SVG will be greatly reduced. You may have to experiment with different options to get the desired result, especially if your SVG is quite complex, but I usually find that for simple icons I can turn on most of the options without negatively impacting the result.

By running the code through SVGOMG, we get the following:

This is much better than leaving the graphic unoptimized, but it contains an extraneous element. And if the original SVG contains groups, layers and effects, then there is a limit to how much a tool like SVGOMG can optimize it. It’s much better if we go back to the graphics program and make some changes before running it through the optimization tool.

Editing SVG

Knowing how to write SVG code will help you get the cleanest and most minimized result. Check out the MDN documentation for a guide to drawing SVG paths and this video by Haydon Pickering if you would like more information.

But for the vast majority of us, SVG editing is only possible with a visual tool. I’m using Adobe Illustrator for this example, but other tools like Sketch have similar editing functionality.

How much code you can remove by editing SVG depends on its complexity and use case. The following tips usually apply to icons and simple graphics. Complex illustrations often cannot be edited to this extent without affecting the final result – and in some cases it may be better to use PNG or JPG.

Expand Groups

The first thing I do when optimizing my SVG is to remove all hidden layers and expand the groups where possible. This removes all path groups in the tags of the SVG code. You might want to keep some of the groups if you plan to style or animate them. You can expand the group in Illustrator with the keyboard shortcut Shift + CMD + G.

Convert to outlines

Then I convert all strokes to paths where possible (Fig 04). In Illustrator, we can do this using Object> Extend. There may be some exceptions: if you style or animate stroke-dasharray or stroke-dashoffset, you need to leave them intact, and also if you want to keep the stroke width when scaling the SVG.

You can also use the Flip option in Illustrator to transform areas of an image, such as simple drawings, into individually selectable paths. For complex or detailed patterns, it may be best not to.

Convert text to outlines

It is sometimes useful to convert text to outlines if the text is purely decorative or the content will be conveyed in another way, such as with a title, button text, or aria-label. While it’s helpful to use the SVG element, it doesn’t always make sense, especially if you need to load a different web font to display the SVG text. We can convert text to paths in Illustrator by selecting it and clicking Type> Convert To Paths.

Combining paths

Now that everything in our SVG is paths, we can merge them to reduce their number. Take the search icon as an example: two intersecting paths can be combined into one to create a single path.

To combine paths in Illustrator, we select them and use the combine option from the PathFinder menu.

An exception is the scenario where we want to style or animate the paths separately – in which case they should not be merged.

Remove additional paths or groups

When the paths are merged, I do a final layer check and remove any empty layers or duplicate paths that may have been created in the process.

Fitting the artboard

When I use SVG icons in HTML, I don’t want to leave extra space around them that I can’t get rid of. This can happen when the SVG viewBox is larger than the content. In Illustrator, I choose Object> Artboards> Fit To Artboard to make the viewBox fit the artwork.

Export

We are now ready to save the SVG. In Illustrator, we can choose File> Save As and choose SVG as the format. In the window that appears, we will be offered several SVG options. I usually select “Presentation Attributes” to tweak the styling options.

SVG is now ready to run through the optimization tool. For icons, I can usually tweak most of the parameters in SVGOMG. You will notice that the code is much cleaner! But even that doesn’t always remove everything that can be removed. In the code below, I still have an empty element, so it’s worth doing one more final manual cleanup and removing it in the code editor. The SVG is now ready to use!

Using SVG

SVG can be used on the web in a variety of ways, including:

Sprites

In particular, inline SVG icons provide the most performance and flexibility, and the best way to use them is by creating a sprite. If you don’t want to do it manually, there are NPM packages available that automatically generate SVG sprites. Icomoon is an app that offers a similar service.

Then, when it comes to using them, instead of pasting the entire SVG, we can reference them using the element:

Since we are using outlines, we can use the following CSS to instruct all files to inherit the current color, rather than use the fill property: the SVG icon used in the button will simply inherit the button text color.

We need to remove the fill attribute of the SVG itself during the optimization process in order to style it that way with CSS.

Conclusion

It looks like a lot of steps, but in fact the whole process takes surprisingly little time if you are familiar with the graphics program. After a few repetitions, this is fixed in the muscle memory. I like to optimize most SVG icons in batches at the start of the project. It’s worth taking a little time ahead of time to make it easier to work with graphics in the future.

Author: Michelle barker

A source: //css-irl.info

Editorial staff: Webformyself team.