How do I export a more clean SVG graphic icon in AI?

When we do some icons to be prepared to export to SVG files, we have to outline the outline, but the hasty outline of the outline often produces extra anchorage, and 25 schools move some ways from other places, perhaps to help you export more “clean” SVG graphics.

What is “not too clean” SVG graphics?

Ai-SVG-11 Ai-SVG-12

“Not very clean” SVG graphics.

 

The two icons were designed at the beginning of the design with 2 pixel strokes, and many redundant anchors were created after the outline of the outline and the combination of the shape.

If you simplify the object path simplification tool with AI, it will change the original shape of the icon.

Ai-SVG-1

Using AI’s simplified tool will change the original shape. (the top yellow is the effect after using the simplified tool).

 

Here are two tips to help designers export “clean” SVG icons.

Skill 1: straighten out the graphics

If our icon adjusts the angle of the shape in the process of creation, please correct the shape before the outline is drawn, and then restore it after the outline is drawn. As follows:

Ai-SVG-5

Please note that most of the cases have to be manually set the original point to rotate, and can not use the AI default center point, because the center will change with the rotation of the shape, leading to no return to the original position.

 

Technique two: reduce the path of overlap

Icons are usually produced by Boolean operations between the various basic shapes. Before contour tracing, please pay attention to reducing the overlapping path, as follows:

Ai-SVG-10

Check if there are too many overlapping paths for your icons

What we need to do is choose to delete these overlapping parts and outline the strokes.

Because of the overlapping curve paths, especially the curve paths, there are many unnecessary anchor points without deleting the directly contoured strokes.

If you design the end point of the path is the round head or the square end point, you should also handle the intersection between the anchor point and the path.

Ai-SVG-8

Round head endpoint

Ai-SVG-9

 

If we use the adsorption effect of AI, it is easy to have several unnecessary anchors with the anchorage of the anchor point and the path directly in one block, so we have to deal with it again.

The first method is to lower the keyboard increments (about 0.5 PX) and manually move each anchor point away from a keyboard increment.

Ai-SVG-4

Using keyboard increment to solve the path that is suitable for horizontal, vertical or 45 degree rotation.

The second method is to draw the anchor point of the end point to a point (the end point can use the “delete anchorage tool”, and the end point of the square head can only drag the anchor point directly).

Ai-SVG-2

Delete some of the more prominent anchor points that are suitable for the ends of round ends.

It can be seen that the purpose of doing so is to reduce overlapping paths so that one contour can not be affected by other small paths.

Ai-SVG-3

Clear contrast before and after cleaning

Last

It is not difficult to export a cleaner SVG icon, but it is more tedious and boring. In fact, if the usual use of the APP design, web, BANNER and the like, even if the anchor point has a little deviation, because the pattern is too small, can not see the fine deviation. But if you want to make the work more regular and standardized, you must deal with every detail.

Leave a Reply