3r3305. 3r3-31. In this article we will analyze the nuances of exporting vector icons from graphic packages. Despite the fact that vector icons have been successfully used for more than one year, there are still annoying situations in which the display of icons will be incorrect: the thickness of the lines will dance, blur will appear, fillets disappear, or vice versa - fillets appear where sharp corners are expected .
 3r3305.
 3r3305. There are three main reasons: features (or even bugs) of exporting and optimizing icons from graphic packages, features and rendering errors (we will focus on rendering by Chrome browser or 3r336 shell. Electron 3r39090.), Inexperienced designers mistakes. Although everything looked good in the graphics package itself (in this case, we are looking at Sketch, but there are similar problems everywhere).
 3r3305.
 3r3305.  3r3305. Image-webpack-loader , Which is already using SVGO at the lower level). Garbage can remain, but significant elements can be ditched. If you suddenly encounter a problem with broken icons - for starters, you can try to remove the optimizer, and see if the issue is resolved.
 3r3305.
 3r3305. Moreover, the online version of Zeplin and its desktop application give different results when uploading. When optimizing, depending on the source code of the icon, significant pieces of the icon may be lost. And in different versions in different ways. It infuriates.
 3r3305.
 3r3305. Compare the code - below the icon, unloaded from Sketch, even lower - from the online version of Zeplin. It can be seen that in the second case, pieces of code were missing:
 3r3305.
 3r3305. 3r375.
 3r3305.  3r3305.
 3r3305. Here is what it looks like:
 3r3305.  3r3305. The first icon is downloaded directly from Sketch, the second one is from the online version of Zeplin, the third one is what it should be
 3r3305.
 3r3305.

Rendering errors

 3r3305. Unfortunately, it’s not just the designer, the graphics package or the optimizer that can be to blame for the crooked icons. Depending on which software is responsible for rendering, the result can be very different. There are also annoying errors, for example, in Chrome browser rendering, antialiasing single-pixel lines is a problem 3r3398. known at least since 201? but there is still no solution
(October 2018). Very sorry!
 3r3305.
 3r3305.

Restrictions and lifehacks in the fight for the purity of icons

 3r3305. Then we collected a number of tips, restrictions and life hacks, which help either to completely solve the problems with rendering, or at least to achieve a decent result.
 3r3305.
 3r3305. 3r3182. 1. Do not transform the elements of the icon
 3r3305. The more transformations with an icon (scaling, rotation along the axis or reflection horizontally /vertically), the more attributes of the path (and simply a sequence of points) in its code will appear. More paths are more likely that after optimizations when rendering by the browser, icons will look crooked.
 3r3305.
 3r3305.  3r3305. Instead of the “Groups” icon, something resembling a third point is
 3r3305.
 3r3305. 3r3182. 2. Convert elements and text from a vector into contours (Convert to Outlines)
 3r3305. and merge all layers with elements into one (Combine Shapes)
 3r3305. If you leave the text as text and layers separately, the main sequence of points (path) will probably be divided into several, which, when exported, will be on their own mind.
 3r3305.
 3r3305. 3r3182. 3. The rule of contraception: call each icon - uniquely 3r3183.
 3r3305. The obvious rule for programmers. Unfortunately, it can be broken by inexperienced or
sloppy 3r3144. too creative designers. If the name of one icon matches another one, Sketch can combine them into one object. For convenience, consider in advance a reasonable system of names. For example, the name may have the format popup-icon-close, where the popup is the block, where the icon will be used, icon is the icon itself, and close is what this icon means. Also at the end of the file name you can add its size - for example, 16x16.
 3r3305.
 3r3305. When there are many icons and they repeat on several layouts, it is convenient to turn each into a symbol (Create a Symbol). If you change the size or color inside the symbol, these parameters will change for all such icons on all layouts. Export settings for such icons are better to set inside the symbol too. Professionally use symbols not only for icons, but also for all typical controls: buttons, text fields, and checkboxes, etc.
 3r3305.
 3r3305. 3r3182. 4. Install 3r3154. SVGO Compressor
right in Sketch
 3r3305. This is a plugin that allows you to download optimized icons directly from Sketch. This helps to control the optimization process (and not let it go to the optimizer from the webpack). In case the optimization jambs are immediately visible, you can immediately check the source code of the icon after unloading, especially if it is complex and consists of several parts. But in most cases, when exporting with this plugin, everything runs smoothly.
 3r3305.
 3r3305. 3r3182. 5. Select icons when exporting manually and set the Make exportable property to them
 3r3305. Otherwise, a piece of the icon may again be lost during export.
 3r3305.
 3r3305. 3r3182. 6. Uncheck the “Include in Export” parameter on the background of 3r3183.
 3r3305. 3r33175.
 3r3305. Otherwise, the icon is exported along with the white background around.
 3r3305.
 3r3305. 3r3182. 7. If nothing helps: for each size - its own icon
 3r3305. This is a wild game. Vector icons just came up with in order to use one for different sizes. Unfortunately, there are situations when, after scaling, you get an extraordinary result. As a rule - soap edges where you need clear lines. This is mainly due to the fact that when scaling some lines fall on fractional pixel values. For example, if the base icon was 16 × 16 and the derivative was 24 × 24 (with powers of two, almost always everything is fine, but there are also exceptions with central vertical lines). In such situations, you can either put up with it, or, unfortunately, you have to adjust the icons with your hands for each of the sizes used.
 3r3305.
 3r3305. If you make an icon using these 7 rules, then even through the Zeplin plugin, the export will go well. But even if you received a beautiful svg-source of the icon, and the icon does not fall apart and is not deformed when displayed in the browser - this does not guarantee that everything will be fine with it on screens with different densities.
 3r3305.
 3r3305. Suppose you all checked under the Retina-display on your MacBook. Try connecting a more or less average external monitor. Most likely, lines of 1 pixel will be blurred. Simple math: if you draw a line with a thickness of 1 pixel in the middle of a 4 × 4 pixel square, when displayed, the line will fall between pixels and blur. If the line thickness is not a whole number, the same.
 3r3305.
 3r3305. More information about these problems is here . As a solution to the problem - the icon templates for applications from 3r33200. Bjango
: their beauty is that they immediately take into account the specifications for Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone, etc. You can use them at least as a reference. More information about the list of specifications for different devices is in 3r3202. Google Device Metrics
- You can find out the size of the screen, the density of pixels and even the approximate distance at which the screen is located from the user's eyes. And one more thing that will help overcome the problem - 3r3204. designer guide for DPI and ppi
. It will help to learn even more subtleties and practical techniques for designers on Android and iOS.
 3r3305.
 3r3305. As it should:
 3r3305.  3r3305.
 3r3305.  3r3305.
 3r3305. How not to:
 3r3305.  3r3305.
 3r3305.  3r3305.
 3r3305. By the way, we checked single-pixel icons on many sites and in applications on average for the quality of the display - and we saw mostly “soap”. That is, the “Humble” solution is quite popular, as solving this problem and adjusting the icons is the way of the stubborn (very time consuming). The second most popular solution is to use a line width of at least 2 pixels (as in many places Google does). However, for hard-pressed perfectionists with a large budget of time on projects, a solution with a fit for each size will give the most accurate results.
 3r3305.
 3r3305.  3r3305.
 3r3305. Separately, we note that it is worth checking not only the rendering of contours, but also fill areas. Especially if the icons are used in a pair of “filled icon + contour” (for example, on hover).
 3r3305.
 3r3305.

Export icons (Affinity, Illustrator, etc.)

 3r3305. Since the ban on the transformation of objects in Sketch takes a lot of time on the dreary drawing of all elements, some designers find it more convenient to draw icons, such as Affinity, and then unload them into Sketch.
 3r3305.
 3r3305. It's pretty simple:
 3r3305.
 3r3305.
Draw icons in Affinity on a pixel grid! All for the same: to avoid blurring of boundaries due to misses in the grid.
 3r3305.
Select the icon in Affinity and copy to Sketch.
 3r3305.
There is a possibility that in Sketch the size will differ within a couple of pixels - then you should use the Scale tool for the desired size, checking that the size and thickness of the lines remain integer.
 3r3305.
Translate elements and fonts into contours. Check size and position again.
 3r3305.
Merge the layers.
 3r3305.
Set the property Make exportable and select the icon on the artboard.
 3r3305.
Export - voila, you have a perfect svg-file with a single path that behaves very predictably.
 3r3305.
 3r3305.
 3r3305.

Conclusions

 3r3305. In most cases, small distortions on the icons, caused either by a feature of their drawing by the designer, or by uploading or optimizing, or rendering nuances, do not cause any censures. In the end, most of the icons are taken from icon packs and used “as is”. But there are situations when fine tuning and fitting are justified. For example, if you are building an application on an Electron platform, and you want to achieve maximum clarity on all platforms. In any case, it makes sense for designers to come to a single style of work on icons (for example, you can use 3r3-3899 as the basis. Our simple checklist is 3r-3290.).
 3r3305.
 3r3305. Successes! 3r33333. 3r3305. 3r3305.
! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e. ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r33232. 3r3305. 3r33333. 3r3305. 3r3305. 3r3305. 3r3305.