把svg图标制作成字体图标_如何创建出色的svg图标作为成功检查清单

把svg图标制作成字体图标

This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.

本帖子表达了作者的观点和见解，并不一定反映Yext及其分支机构，员工，管理人员，董事或代表的观点。

As a user (and designer), I always love interacting with applications that utilize iconography to enhance the overall pleasure of the user experience. Iconography isn’t always necessary and can certainly “overstay” its welcome, but when applied elegantly to a design, it has the ability to change the whole personality of the application. There are a lot of apps and sites out there that successfully use iconography and so I made it my mission to discover the ins and outs of what it really takes to make functional cohesive icon sets.

作为用户(和设计师)，我一直喜欢与利用图标技术的应用程序进行交互，以增强用户体验的整体乐趣。 图像并不总是必需的，当然可以“逾越”它的受欢迎程度，但是当将其优雅地应用于设计时，它可以更改应用程序的整体个性。 那里有许多成功使用图标的应用程序和网站，因此我的任务是发现制作功能性，有凝聚力的图标集所需的内容。

我的SVG哲学： (My SVG Philosophy:)

Before I get into the nitty gritty, there are three basic principles that I noticed all great icons and icon sets have in common. They are as follows:

在深入探讨之前，我注意到了三个基本原则，我注意到所有出色的图标和图标集都具有共同点。 它们如下：

• Symbolic

  象征性的

• Uniform

  制服

• Lean

  靠

At first glance these words sound vague, but don’t worry. I will explain each of them now and what they mean to me.

乍一看，这些词听起来含糊不清，但请放心。 我现在将解释它们中的每一个以及它们对我的意义。

For an icon to be symbolic, it has to designate something or an idea of something. It should denote meaning or some function to groups of people.

为了使图标具有象征性 ，它必须指定某些内容或某种概念。 它应该表示对人群的意义或某些功能。

For an icon to be uniform, it should have one overarching style or aesthetic that governs how it was designed and ultimately how it looks after it is complete. The obvious examples that come to mind are outline icon sets versus solid icon sets versus two-tone icon sets, and so on.

为了使图标具有统一性 ，它应该具有一种总体风格或美感来控制其设计方式，并最终控制完成后的外观。 我想到的明显示例是：大纲图标集，实心图标集，二音调图标集，依此类推。

Finally, an icon should be lean. Lean can mean a couple of different things. The first definition that comes to mind is that one’s icon should be stripped of unnecessary fluff or details. There is a fine line between an icon that explains just enough and one that is overly descriptive or illustrative. Another way an icon can be lean is how it is built. Every time you create an icon in your favorite SVG editor, the application is translating your anchor points and paths to coordinates on a plane, which ultimately gets exported as code in the form of an SVG file format. As a result, some applications generate cleaner and more semantic code than others.

最后，图标应为lean 。 精益意味着不同的事情。 我想到的第一个定义是，应删除图标中不必要的绒毛或细节。 在仅能解释足够的图标和过分描述或说明的图标之间有一条细线。 图标可以倾斜的另一种方法是其构建方式。 每次在您最喜欢的SVG编辑器中创建图标时，应用程序都会将锚点和路径转换为平面上的坐标，最终将它们以SVG文件格式的形式导出为代码。 结果，某些应用程序比其他应用程序生成更干净，更多的语义代码。

Now that I’ve briefly explained my philosophy on iconography and its role in modern applications, let’s dive into my checklist for creating great icons.

现在，我已经简要解释了图像学的概念及其在现代应用程序中的作用，让我们深入了解如何创建精美图标的清单。

Note: I want to acknowledge that this is my personal icon workflow and there are many different ways to achieve the same results.

注意：我想承认这是我的个人图标工作流程，并且有很多不同的方法可以达到相同的结果。

My two SVG editors of choice are Adobe Illustrator and Sketch, purely because of experience and familiarity of use with those applications. I am fully aware of Sketch’s shortcomings when it comes to generating complex or difficult SVGs, but, in my experience, if you get creative with your boolean operators you can create pretty much any icon. That said, Sketch has got nothing on Illustrator’s shape builder tool (or any of the cool Illustrator plugins available from companies like Astute Graphics).

我选择的两个SVG编辑器是Adobe Illustrator和Sketch，这完全是出于对这些应用程序的使用经验和熟悉程度。 我完全了解Sketch在生成复杂或困难的SVG方面的缺点，但是以我的经验，如果您对布尔运算符具有创造力，则可以创建几乎任何图标。 就是说，Sketch在Illustrator的形状生成器工具(或从Astute Graphics等公司获得的任何酷炫的Illustrator插件)上什么都没有。

我的SVG清单： (My SVG Checklist:)

给画板和图层有意义的名称 (Give Artboards & Layers Meaningful Names)

While I don’t go poking around too often in the exported SVG code, I know some of my sloppy naming can make its way in there and I don’t want the developers I work with to get confused. Along the same lines, I want my icon to look as good on the inside as it does on the outside.

尽管我不会经常在导出的SVG代码中四处打听，但我知道我的一些草率命名可以在其中发挥作用，并且我不希望与我合作的开发人员感到困惑。 同样，我希望图标的内部外观与外部外观一样好。

使用标准和一致的画板尺寸 (Use Standard & Consistent Artboard Sizes)

I use standard artboard sizes for all icons, especially if the icon needs more or less detail at different sizes. The sizes that I have seen the most cited are: 16x16, 18x18, 24x24, 32x32, etc.

我对所有图标都使用标准画板尺寸，尤其是在图标需要更多或更少细节且尺寸不同的情况下。 我最常看到的尺寸是：16x16、18x18、24x24、32x32等。

Any size will do as long as you are consistent in its usage. The sizes above are divisible by most common screen sizes. It is important to design for the sizes that icons will actually appear at. If you know all of your icons are going to appear at 16x16 or 24x24, then you will want to take that into account when you are designing them.

只要您的用法一致，任何大小都可以。 上面的尺寸可被大多数常见的屏幕尺寸整除。 设计图标实际显示的尺寸非常重要。 如果您知道所有图标都将以16x16或24x24的比例显示，那么在设计它们时将需要考虑到这一点。

取消分组图层 (Ungroup Layers)

Ungroup all layers prior to export.

在导出之前，请取消对所有图层的分组。

展平层 (Flatten Layers)

Flatten (or expand) shape layers with flips or rotation transformations applied to them. This is particularly important for Sketch as it will export with those transformations into the SVG export, ultimately making the code a bit messier.

通过应用翻转或旋转变换来展平(或扩展)形状图层。 这对于Sketch尤为重要，因为它将随着这些转换导出到SVG导出中，最终使代码更加混乱。

避免剪口罩 (Avoid Clipping Masks)

Reconstruct any masks using boolean operations, like Intersect, etc. I try to avoid any clipping masks in my exported icons as it leads to longer and messier code. It also runs the risks of not rendering correctly on the web.

使用布尔运算(如Intersect等)重建任何蒙版。我尝试避免在导出的图标中出现任何剪贴蒙版，因为这会导致代码更长且混乱。 它还冒着无法在网络上正确呈现的风险。

警惕图标笔触 (Be Wary of Icon Strokes)

When using strokes in your icon, favor center aligned strokes as opposed to inside or outside aligned strokes. In the web environment, the CSS stroke property will render as a center stroke.

在图标中使用笔触时，请优先选择中心对齐的笔触，而不要使用内部或外部对齐的笔触。 在网络环境中，CSS stroke属性将呈现为center stroke 。

Only convert strokes to outlines (or expanded shapes) when making a “shape” SVG. Doing this can be a destructive process as you will no longer be able to adjust the stroke’s thickness. I recommend keeping a stroked version of your outline style icons somewhere in your file in case you want to go back to adjust stroke weight.

制作“形状” SVG时，仅将笔划转换为轮廓(或扩展形状)。 这样做可能会造成破坏，因为您将无法再调整笔触的粗细。 建议您将轮廓样式图标的描边版本保留在文件中的某个位置，以防您想返回来调整描边粗细。

合并和简化图标填充 (Merge & Simplify Icon Fills)

If you have multiple fills or effects to a shape, then you will want to merge those down. In Illustrator, that will mean checking your appearance panel and seeing if there are different appearance “layers” on any given shape. If there is more than one, then you will want to flatten or expand those so that the shape only has one appearance. In Sketch, just be sure to check the inspector panel and see if a selected shape has more than one fill, stroke, etc. and flatten it if it does.

如果一个形状有多个填充或效果，则需要将其合并。 在Illustrator中，这意味着检查外观面板并查看在任何给定形状上是否存在不同的外观“层”。 如果有多个，则需要将其展平或扩展，以使形状只有一种外观。 在“草图”中，只需确保检查检查器面板，看看所选形状是否具有多个填充，笔触等，然后将其展平。

优化代码 (Optimize the Code)

Optimize SVGs with an online tool like SVGOMG. Optimizers like this can clean up your code and file size without changing how the icon looks.

使用SVGOMG之类的在线工具优化SVG 。 这样的优化程序可以清理代码和文件大小，而无需更改图标的外观。

从小做大 (Start Big Before Going Small)

When using boolean operators (especially in Sketch where things can get finicky), be sure to execute them in a methodical way. Selecting 8 shapes that are all stacked on top of each other attempting to form a single icon and clicking “Union” might get you the desired result sometimes, but knowing Sketch there will be a time where selecting one of the boolean operators will yield a result you weren’t expecting. That is why I recommend starting from big to small. Start with the big shapes, then stack the smaller shapes on top of that before you union, subtract, etc. This is especially crucial for smaller shapes that are subtracted from a larger shape. Illustrator doesn’t really have this issue in my experience, but it is still a good methodology to follow.

使用布尔运算符时(尤其是在Sketch中，事情可能变得很挑剔)，请确保以系统的方式执行它们。 选择全部堆叠在一起的8个形状以尝试形成单个图标并单击“ Union”有时可能会获得所需的结果，但是知道Sketch会有一段时间选择其中一个布尔运算符会产生结果你没想到 这就是为什么我建议从大到小开始的原因。 从大形状开始，然后在合并，减去等之前将小形状堆叠在顶部。这对于从大形状中减去的小形状尤其重要。 以我的经验，Illustrator确实没有这个问题，但是它仍然是遵循的好方法。

必要时反转路径方向 (Reverse Path Directions if Necessary)

Vector shapes — even closed ones — have beginning and end points and a direction. In Sketch, there will come a time where you may get bizarre overlap issues as a result of a boolean operation. In this scenario, reversing the path direction can resolve a lot of overlap issues. In both Illustrator and Sketch there is an option to reverse the path direction.

矢量形状(甚至是封闭的形状)具有起点和终点以及方向。 在Sketch中，有时会由于布尔运算而出现奇怪的重叠问题。 在这种情况下，反转路径方向可以解决很多重叠问题。 在Illustrator和Sketch中，都有一个用于反转路径方向的选项。

必要时设置句柄坐标 (Set Handle Coordinates if Necessary)

The final tip is more of a fun one that can help with those who are obsessed with precision. We all know that vector points have their own coordinates; however, each of a point’s Bézier handles also has a set of coordinates that can be set. Being able to set each handle to specific coordinates can be a powerful asset when trying to maintain uniformity across multiple icons, especially those that have rounded paths and eyeballing the length of the handles just won’t cut it.

最后的技巧更多是一个有趣的技巧，可以帮助那些对精度有痴迷的人。 我们都知道矢量点有自己的坐标； 但是，每个点的Bézier手柄也可以设置一组坐标。 尝试在多个图标之间保持统一性时，能够将每个手柄设置为特定坐标可能是一项强大的资产，尤其是那些具有圆形路径且眼球长的眼睛的图标不会削减它的时候。

Overall, this has been my icon workflow for some time now. I’m always eager to learn new tips and tricks. If you have a better understanding of any of the points above, please let me know in the comments!

总的来说，这已经是我一段时间的图标工作流程了。 我一直渴望学习新的技巧和窍门。 如果您对以上几点有更好的了解，请在评论中告诉我！

翻译自: https://medium.com/yext-design/how-to-create-great-svg-icons-a-checklist-for-success-f255bd7f1344

把svg图标制作成字体图标