Recently I came into contact with a project, and the user’s jump rate was very high. Finally, the analysis concluded that the reason was that the page loading time was too long, and the loading time of the whole page was about 10 seconds. They asked me for some optimization advice because they have a lot of SVG images throughout the site and a lot of SVG animations. I suggested some SVG optimizations to their team, such as how to reduce the size of SVG, and the optimizations worked well, with the entire page loading time around 2 seconds. And the user bounce rate has decreased a lot.

Of course, if I were designing SVG myself, I wouldn’t have this problem. But in a large team, the development engineer and the designer are often not the same person, which can easily lead to the problems described above. So in this article, I will put my own in the design of SVG when some optimization means sorted out, I hope to give you some help.

I mainly use Adobe Illustrator for SVG export optimization, as it does a better job of exporting and optimizing SVG than Sketch does. So the optimizations described below are all done using Adobe Illustrator.

Before we start tuning

Before starting a project, however, it is important to communicate with the designers about some of the things they should be aware of when designing and exporting SVG.

A common practice for designers is to draw a line drawing on paper before they start their design, and then use design tools such as Adobe Illustrator to design the graphics according to the line drawing. This has the disadvantage of creating a large number of redundant nodes. Therefore, in the actual design, it is recommended to use a simple shape and pen tool to design the graphics. If you use a lot of complex graphics to design, the size of the resulting graphics will be very large, so use as few control points as possible to design the graphics, the better performance.

Of course, that’s not to say you can’t design with some complicated shapes. Using different optimization methods, the same appearance map may contain hundreds of control points or thousands of control points of the path composition, so some necessary optimization is necessary during the design. Here are some things to be aware of when designing in Adobe Illustrator.

Reduce the control points of a path

If your graph has a lot of control points, you should consider optimizing it. It’s easy to optimize control points in Adobe Illustrator. You should use the Object > Path > Simplify option on the Illustrator menu bar to reduce control points in your graphics.

Of course, the actual value to be reduced depends on your graph. It should be noted that the value should be reduced around 91% as much as possible. If it is too little, the original shape of the graph may be damaged.

This is an optimized shortcut. Of course, it is recommended to pay attention to the number of control points in the control path during design.

This method of reducing control points can sometimes lead to significant optimization, but it depends on the shape being optimized. For example, with a complex shape like the one shown above, you can recombine different shapes into one shape to simulate existing shapes to implement it and optimize its control points.

This optimization method can sometimes seem like a lot of work, but you can quickly use the pen tool to quickly sketch out the shape. Then use the Pathfinder tool to merge them into a shape. Don’t worry if it doesn’t look exactly like the original shape. You can overlay it on top of the original shape and adjust the opacity of the original shape, which will help you to simulate the original shape faster and adjust the path to restore the original shape as much as possible.

Remove a duplicate gradient

When creating gradients, tools like Adobe Illustrator and other vector graphic design tools will define all gradients in the DEFS tag when exporting SVG. Jake Albaugh’s Gradient Optimizer can be used to automatically merge multiple gradients into only used gradients. It can also greatly reduce the size of the file by removing the gradients defined repeatedly.

Of course, you can avoid redefining gradients if you write them manually. Here’s a brief description of how to use gradients in SVG:

The gradient is defined in the linearGradient tag and needs to be specified with an ID so that it can be applied to the SVG graph.

2. It uses stop offsets to define color offsets and stop-color to define gradient colors.

<defs>
  <linearGradient id="linear-gradient" y1="75" x2="150" y2="75" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="#fff33b"/>
    <stop offset=".5" stop-color="#f17b3e"/>
    <stop offset="1" stop-color="#e93e3a"/>
  </linearGradient>
</defs>
Copy the code

CSS:

.path-class { fill: url(#linear-gradient); }
Copy the code

Reduce the size of the artboard

In the design of graphics, the size of the artboard to choose a suitable size. Too large will also increase the control points of the path; Too small, and you might add a lot of unnecessary decimal points to the path. You can practice to determine a suitable artboard size (I like to use 100 X 100).

To quickly resize an artboard in Adobe Illustrator, you can quickly resize a graphic artboard by going to Object > Artboard > Fit Boundaries in Illustrator. If you just want to tweak the size of your artboard, you can resize your graphic artboard by going to File > Document Settings > Edit Artboard in Illustrator. This method allows you to resize your artboard as much as you want.

Export SVG for further optimization

Another reason I like using Adobe Illustrator is that it provides more options to set up SVG when exporting SVG than Sketch does. If you use Adobe Illustrator and export SVG using file Store > SVG, you can make some optimizations for SVG, but this is not enough. You can also optimize SVG using some of the following tools:

SVGOMG, an online optimization tool, offers many optimization options.

SVGO or SvGO-GUI, which is a NodeJs-based SVG optimization tool. A visual version of it, svGO-GUI, is recommended.

Peter Collingridge’s SVG Editor, I’m a fan of it, although it’s not very cool.

When optimizing SVG, I have a checklist:

1, clear the ID, when using the tool to optimize SVG, it may remove your well-named ID.

2. Merge useless groups. Sometimes, some code is programmed into groups for better organization or for easier animation.

3. Merge paths

4. Format code. When you need to write animation effects or other operations in SVG, you format the code, not compress it.

Of course, be sure to use gzip to compress your code when it finally goes live, which can greatly reduce the size of SVG.

Use an SVG filter instead of the default filter

Designers in achieving some special effects, most is in common use effect panel filter, such as fuzzy, shadow, etc., so that the export for SVG code, base64 code will survive in the code section, actually in achieving some special effects, can use SVG filter instead of the default filters, There are many SVG filters to choose from under Effects > SVG Filter. Note that this is only available if the file format is. Ai, not SVG. So when saving the source file, be sure to save it in AI format. Using an SVG filter not only changes the look of the graphics, but also greatly reduces the size of the file, from 1.8MB to 1.2KB.

conclusion

Of course, these methods are not the only ones you can use to get better performance out of SVG, but one essential step in optimizing SVG is to minimize the number of control points in your path. Of course, performance tuning is most important for practical reasons, such as carefully checking the loading of SVG files and constantly optimizing it.

This article is mainly collated from the article High Performance SVGs, there are omissions, omissions or inadequacies in understanding, please give me more advice!