英文有一句成语叫Apictureisworthathousandwords，你听说过吗？它指的是静态图片可以表达复杂的概念，或者与主题相关的图片有时比详细解释更有效地描述主题。-“一张图片胜过一千个单词”维基百科 如果要用一句话来解释图标的功能，没有比这个成语更好的词了。在这篇文章中，让我们谈谈关于图标的一些事情。一个图标的生命周期（workflow） 关于图标的生命周期，在我亲身经历的开发项目中，有以下两种： 第一种方式：图标库（选择阶段）->图标使用（开发阶段） 第二种方式：图标设计（设计阶段）->图标导出（交流阶段）->图标使用（开发阶段） 一般来说，小公司或者独立开发者会使用第一种工作流程。大型组织或公司一般采用第二种方式，因为他们拥有更完整的团队和资源，可以获得更多的自主权和建立企业VI（VisualIdentity，企业视觉识别）的能力。 但无论哪种方式，都涉及两个角色：设计师和网络开发人员。只有在第一种工作方式中，设计师是不可见的。图标的设计与使用 设计阶段通常由不懂网页开发的设计师完成。他们会根据产品的需求，画出符合产品需求的图标，然后交给网页开发人员使用。 （ThoughtWorks官网“联系我们”图标） 为什么先介绍图标的使用，而跳过导出过程呢？原因很简单，因为我们需要先知道服务对象是谁，然后才能知道如何正确地服务它。三种常见的图标使用方法 1。使用图片 直接将设计师绘制的图标导出为PNG格式，是最直观的图标打包方式。 （FlatIcon图标） 其优点是：可以使用彩色图标，可以支持大多数浏览器 缺点：图标大小是固定的（不能根据场景自由缩放）Retina屏幕需要两倍的图像 开发者在拿到这样的图标时，通常需要将其合成为图片，以方便制作精灵图。这个过程可以由开发人员自己完成，也可以由设计人员完成。文件中心导出一个包含所有图标的PNG文件）。 制作精灵图的工具有很多。我比较常用的在线精灵图工具有：SpriteCow，或者NodeJS平台下的构建工具插件，比如：webpack-spritesmith。2.直接使用svg 使用SVG（ScalableVectorGraphics），W3C标准是最有前途的web端图形解决方案。它可以提供剪切路径、alpha通道、滤镜效果等复杂的渲染能力，具有传统图像所没有的矢量功能，也可以被记事本、搜索引擎等阅读器访问。 设计师可以借助设计绘图软件（AI、PS）轻松导出SVG格式的图标/图片。 但是目前国内的svg因为兼容性不够，并不能很好的兼容旧的IE版本和部分安卓原生浏览器，所以并没有得到广泛的应用。 （我可以用svg吗？） 上图是百度对2017年前三个月浏览器使用情况的统计，目前中国超过20%的用户还在使用IE8、9甚至IE73.IconFont IconFont是目前最流行的图标解决方案。顾名思义，它是一个字体文件。您可以使用任何字体编辑工具打开它。如果你打开某一个查看，你会发现是一些路径。这些路径可以用AI、PS、Sketch等软件绘制。 IconFont的优点是可以用CSS控制样式，无限缩放不失真，支持IE7+，兼顾屏幕阅读器，缺点是不能支持彩色图标（有多种颜色的图标）。IconFont的获取方式也很简单。设计师通过AI/PS将图标转成SVG文件，然后开发者通过工具（在线或本地）转成IconFont，如：国外icomoon.io，国内iconfont.cn，开源构建工具插件包括gulp-iconfont等等。制作适合网页开发的图标 《制作适合网页开发的图标》是我们这篇文章的重点。1.图片的使用方法 如果开发者直接使用图片，比较简单。设计师只需要为普通屏幕和Retina屏幕准备两组图像（单图像和双图像）。 以国内某知名中文小说阅读网站为例。它会针对不同的设备使用不同倍数的logo图片，以保证Retina屏幕下的清晰度。.logo-wrap.logoa{显示：块；宽度：219px；高度：52px；背景：url(/qd/images/logo.dbed5.png)no-repeat;}@medianotall,notall,(-webkit-min-device-pixel-ratio:1.3),notall,(min-resolution:1.3dppx){.logo-wrap.logoa{background:url(/qd/images/logo3x.fd980.png)不重复；背景重复：不重复；背景大小：217px；}})2.使用SVG 关于转换成SVG，这里有SaraSoueidan在GenerateLondon2015Conference的演讲《Sara Soueidan: SVG for Web Designers (and Developers)》（YouTube视频需要FQ），如果不方便SaraSoueidan有博客《Tips for Creating and Exporting Better SVGs for the Web》更详细的解释了SVG导出的内容，当然还有一篇国内翻译的文章《创建和导出 SVG 的技巧》，最后推荐一位Adobe工程师michael《Export SVG for the web with Illustrator CC》chaize的AI导出SVG。 以上信息，我觉得还是看视频比较直观。顺便欣赏一下这位优秀的阿拉伯女性前端开发工程师（也是自由撰稿人和演讲者）的风采。 博客和视频讲了多点导出SVG需要注意的点。限于篇幅，这里给出三个小技巧：(1)选择适合绘画的画板 你有没有在网页上嵌入过SVG？，给它一个高度和宽度，发现它居然比你指定的要小？开发人员经常会遇到这样的问题。 通常，这是因为SVG视口中存在一定量的空白。视口以样式表指定的大小显示，但其中有额外的空间-图形周围-这使您的图像看起来“缩小”了，因为空间占用了视口内的空间。为避免这种情况，您需要确保您的画板足够大以容纳内部图像，而不是太大。 画板大小是导出的SVG视口的大小，画板上的所有空白最终将成为视口中的空白。 对于没有AI工具的开发，可以在下面的SVGO优化选项中选择“PreferviewBoxtowidth/height”。(2)选择合适的导出选项 推荐使用上图所示的选项生成适合网页使用的SVG。如果您不想使用网络字体，可以选择将文本转换为轮廓。 如果SVG包含大量文本，此选项输出较少的tspan元素可以大大减小svg的大小。(3)优化SVG 通常建议在图形编辑器导出SVG后使用单独的优化工具进行优化。例如：删除无用的Comments和Metadata，简化代码，简化单一路径等。推荐第三方工具：NodeJS工具svgomg、AI插件SVG-NOW、Sketch插件Svgo-compressor等，请参考到SaraSoueidan的文章《Useful SVGO[ptimization] Tools》。3、IconFont 前面提到IconFont一般是SVG通过工具转换而来，如果开发最后需要使用IconFont来显示图标，那么对于导出的SVG有一些特殊的要求。在本文的前一节中，我介绍了几个IconFont转换工具。每个工具都有详细的文档来说明SVG绘图的规则。虽然不尽相同，但一些基本原则是一致的：转换为路径不能使用图像（字体只是路径）修剪到艺术边界（前面介绍过）将笔画转换为封闭图形简化无用节点... 更多关于IconFont的绘制规则，请参考：Iconfont.cn文档、Icomoon文档、gulp-iconfont文档、fontello文档。及时频繁的沟通 SaraSoueidan曾说过：“设计师和开发者应该是好朋友”。 我们今天的话题涉及到这两个角色。你可能认为他们似乎“不和”，其实不然。请看下面的图片。在敏捷开发过程中，不同的角色分工负责，设计师和开发人员也不例外。 （敏捷开发中不同角色分工负责） 在ThoughtWorks工作，你会发现很多设计师都懂HTML、CSS，甚至懂得如何使用Chrome来查看元素。兴趣。并且我们的设计师和开发人员会坐在同一张桌子上，共同完成工作，保证及时和频繁的需求沟通与合作。 至于“设计师和开发者应该是好朋友”，作为一个Dev，我和很多设计师是朋友（至少我是这么认为的）。 为了更好的顺畅沟通和分担责任，出现了一个新的（比较新的）角色UIDev，如下图。不过对于这个角色的定义众说纷纭，这里就不赘述了。（UIDeveloper（引用自StackOverflow的回答））完结 在这篇文章中，我们谈到了三种图标的使用方式：图片、SVG、IconFont，它们只是图标话题的冰山一角。空间虽小，但保证团队中的设计人员和开发人员能够方便地协作，共同寻找满足团队需求的解决方案尤为重要，这是保证图标质量的关键。
