“一图胜千言”这句英语成语，大家是否有所耳闻？该成语意在说明，一张静态的图像往往能够传达一个复杂的概念，有时甚至比详尽的文字描述更能有效地阐述某个主题。——“一图胜千言”出自维基百科。

若需用简短之语阐释图标的职能，此成语恰如其分。本文将深入探讨与图标相关的一系列话题。

一个图标的生命周期（工作流程）

在我参与的开发项目实践中，图标的生命周期主要表现为以下两种情形：

第一种方式：图标库(选择阶段) -> 图标使用（开发阶段）

图标设计（处于设计阶段）, 随后进入图标导出（这一沟通环节），最终过渡到图标使用（开发过程中的应用阶段）。

通常情况下，小型企业或个人开发者更倾向于采用第一种工作流程。相比之下，规模较大的组织或公司，凭借其更为健全的团队和丰富的资源，通常会选择第二种方法，这样做不仅能享有更大的自主权，还有助于构建和强化企业的视觉识别系统。

不论采取何种方法，都涉及两个关键角色：设计师与网络开发者。不过，在第一种工作模式里，设计师的角色是隐而不现的。

图标的设计和使用

在项目设计阶段，往往由对Web开发不够熟悉的设计师负责，他们依照产品需求绘制出相应的图标，随后将这些图标交付给Web开发团队进行应用。

（官网“ with us”图标）

为何要首先阐述图标的运用方法，却对导出步骤略过不提？这其中的道理十分明了，因为我们必须先明确服务的具体对象，方能准确无误地提供相应的服务。

常见的三种图标的使用方式

1.使用图片

将设计师精心绘制的图标，逐个按照PNG格式进行独立导出，这种方式无疑是图标打包中最直接和简便的方法。

（图标）

它的优点是：

缺点是：

开发者获取此类图标后，一般需将其合并成单一图片，以便于制作雪碧图。这一步骤既可由开发者独立完成，亦可以由设计师负责（设计师可从源文件中导出一张包含所有图标的PNG格式文件进行制作）。

制作雪碧图的工具种类繁多，其中我较为频繁使用的在线雪碧图制作工具包括Cow，以及该平台提供的构建工具插件，例如：-。

2.直接使用svg

SVG（可缩放矢量图形）作为W3C制定的标准，在Web端图形解决方案中备受青睐。它不仅能够实现裁剪路径、Alpha通道、滤镜效果等高级渲染功能，还拥有传统图片所不具备的矢量特性。此外，SVG文件还能被记事本等文本阅读器和搜索引擎轻松访问。

设计师借助设计绘图软件（如AI、PS）的辅助，能够轻松地导出SVG格式的图标或图片。

然而，截至目前，国内SVG的应用尚未达到普遍水平，这主要是因为其兼容性存在缺陷，无法与旧版IE浏览器及部分原生浏览器实现良好匹配。

（Can I use svg?）

这幅图表展示了百度对2017年第一季度浏览器使用情况的调查结果，数据显示，我国有超过百分之二十的网民还在继续使用IE8、IE9，甚至更早的IE7版本。

3.

这是当前最受青睐的图标设计方法，从其名称即可推断，它实际上是一种字体资源。您可以使用各种字体编辑软件对其进行编辑，一旦您打开并观察，便会发现它由一系列路径组成，这些路径可通过AI、PS等软件进行绘制。

其优势在于可通过CSS调整外观，实现无限制放大且保持清晰，兼容IE7及以上版本，同时考虑到了屏幕阅读器的需求，但不足之处在于无法显示多色图标（即带有多种色彩的图标）。获取途径相当简便，设计师只需将图标利用AI或PS软件转换成SVG格式，随后开发人员便可通过在线或本地工具将其转换成不同域名后缀，例如：国际上的.io，国内的.cn，或者使用开源构建工具的插件，如gulp等。

产生适合Web开发的图标

“产生适合Web开发的图标”是我们本篇文章要关注的重点。

1.使用图片的方式

若开发者直接运用图像素材，过程较为简便；此时，设计师仅需为常规屏幕及高分辨率屏幕准备两组图像（包括标准分辨率图像和双倍分辨率图像）。

以我国一家知名的中文小说阅读平台为例，该平台会根据不同设备的特性，调整logo图片的放大比例，从而确保在屏幕下方也能保持清晰的显示效果。

.logo-wrap .logo a {
  display: block;
  width: 219px;
  height: 52px;
背景：采用图片资源，位于/qd/images目录下，名为logo.dbed5.png，并执行不重复平铺的显示效果。
}
针对不支持所有设备，且不满足特定条件，如不支持特定CSS前缀的设备像素比至少为1.3，以及不支持所有设备但分辨率至少为1.3dppx的情况，以下样式规则不适用。
  .logo-wrap .logo a {
背景设置为：通过URL(/qd/images/logo3x.fd980.png)进行图片的重复不覆盖显示。
背景不重复显示；背景尺寸设定为217像素。
  }
}
)

2.使用SVG

在讨论SVG转换时，不得不提及Sara在2015年发表的演讲《Sara : SVG for Web》（观看视频需翻墙），若您觉得不便，Sara还撰写了一篇博客《Tips for and SVGs for the Web》，其中对SVG导出进行了更为详尽的阐述。此外，国内还有一篇翻译文章《创建和导出SVG的技巧》可供参考，最后，Adobe工程师也撰写了一篇关于AI导出SVG的文章《SVG for the web with CC》。

在查阅这些资料时，我发现观看视频能让人更直观地了解情况，同时还能欣赏到这位杰出的阿拉伯女性前端开发工程师的风采，她还是一位自由作家和演讲人。

在博客和视频内容中，我们探讨了导出SVG时需留意的一些关键细节sketch iconfont，鉴于篇幅所限sketch iconfont，以下将简要介绍三个小贴士：

在网页中嵌入SVG图形时，若为其设定了具体的高度与宽度，却意外发现实际显示的尺寸小于预期，这种现象在开发过程中颇为常见。

通常情况下，这种情况发生是因为SVG视窗内部存在一定范围的空白区域。这个视窗会依照样式表所定义的尺寸进行展示，然而，其中包含额外的空隙——位于图形周边——这导致你的图像似乎被缩小了，因为这部分空隙在视窗中占据了一定的空间。为了防止这种现象，你必须保证画板的大小正好能够完全覆盖图像，不宜过大。

画板的大小与导出的SVG文件视窗尺寸相一致，而画板上的所有空白区域在导出后均会转换为视窗内的纯白色空白。

对于未采用AI辅助工具的开发者来说，他们可以在SVGO的优化选项中挑选“调整至宽度/”这一设置。

上图中呈现的选项系推荐用于网页的SVG生成方式。若您倾向于不采用网络字体，则可选择将文本内容转换为轮廓形式。

若SVG文件中文字众多，选择“fewer tspan”这一设置能够显著减小SVG文件的整体体积。

在将SVG文件从图形编辑软件中导出之后，通常的做法是使用专门的优化软件进行进一步的优化处理。这包括移除不必要的元素、精简代码以及简化各个路径等操作。在此推荐一些第三方工具，例如AI插件SVG-NOW、Svgo插件等，具体内容可以参考Sara所撰写的文章《SVGO工具》。

3.

先前所述，通常情况下，图标是由SVG文件经过特定工具转换生成的。若开发过程中需将图标用于实际展示，对于输出的SVG文件便存在特定的要求。在本文的前述章节中，我已对几款转换工具进行了介绍，每款工具均配备了详尽的文档，用以阐释SVG图形的绘制规范。尽管各工具的具体规则存在差异，但它们遵循的基本原则却有着共通之处。

将文字转换为路径

不可以使用图片（字体只是路径）

修剪画板（ to art ）（前面已经介绍过）

将描边转化为闭合图形

简化无用的节点

......

关于绘画的更多规则细节，您可以查阅位于.cn的文档资料，此外，还有gulp相关的文档以及其它相关文档。

及时和频繁的沟通

Sara 说过一句话：“设计师和开发者应该成为好朋友”。

今日我们讨论的主题恰好关乎这两个角色，或许您会认为它们之间似乎毫无关联，实则并非如此。请仔细观察下面这张图表，在敏捷的开发流程中，各种角色共同承担着各自的职责，这其中自然也包括了设计师与开发者。

（敏捷开发中不同角色共享职责）

在职场中，你常会遇见许多设计师精通HTML、CSS，甚至掌握了如何运用查看元素等技能；同时，也有不少开发者对设计领域表现出浓厚的兴趣和深入研究。在我们的团队里，设计师与开发者并肩而坐，共同协作，确保需求沟通的及时性与合作的高效性。

关于“设计师与开发者应当结为良朋”，作为开发者的一员，我与众多设计师保持着友好的关系——至少，我是这样看待的。

为了确保交流无障碍和责任分配的明确，便诞生了一个相对较新的职位——UI开发者，如图所示。然而，对于这一职位的界定，各方意见不一，此处便不再详述。

（UI - 参考自Stack 答案）

结尾

本文探讨了图标的三大应用形式：图像、SVG格式，这些仅是图标领域的冰山一角。尽管文章篇幅有限，但至关重要的是，确保设计团队与开发团队之间的协作顺畅，共同寻求符合团队需求的解决方案，这方是确保图标品质的核心所在。

如有侵权请联系删除！