8 tricks for SVG optimization

Get better code before exporting your files.

Many online tools help us optimize SVG files before getting the code into our projects. But what if I tell you that the way we draw every element has an impact on the exported code? Understanding the code generated from graphic software will help us gain more control over it. Here are some tricks that can save us time when manipulating SVG code on our projects.

Although the examples are on Illustrator, I will also cover ways to improve the code from SVGOMG, and I hope most of them apply to any software you are using to create graphics that will become part of a web or app later on. Some of these tips may sound too picky, but if you are in a project where every bit counts, they might serve you well.

1. Start small

A tiny thing we can do is to design small. As the name implies, SVG scales infinitely without losing quality, which is one of its main advantages. Sometimes we forget about the canvas size while creating, and sometimes we design on big screens with things that need to be at scale. Before exporting, I found it helpful to scale the design and minimize it to a reasonable size. This way, we will reduce many numbers on coordinates that use more than 1 or 2 digits. Of course, the bigger the file, the bigger the impact.

2. Avoid “magic” numbers

Following the previous point, after moving our design around, scaling and collapsing, we might end with many decimal numbers when exporting the results (especially on the stroke attribute). In case it applies, there is a checkbox option that can be used to prevent our stroke and effects to scale with the shape.

Scale Strokes & Effects box in Illustrator.

• In Illustrator, it is possible to choose how many decimals from 0 to 5 the vectors will have after choosing the ‘Export As’ option:

‘Export As’ options box.

• In SVGOMG, there is an option that I like: ‘Round/rewrite numbers’. Take a look at…