文章标签

Dropbox Paper 团队的 Bobby Grace

在工程方面，我们使用内联 SVG。这有很多优势。一个优势是 SVG 是一种结构良好的格式，我们可以用代码操作它。Paper 也在使用 React，并且

关于 SVG 的 fill-rule 属性有一个有趣的 gotcha，Anthony Collurafici 在这里详细介绍了它。

Fill-Rule 是一个 SVG 属性，它基本上定义了如何确定哪些形状被填充或从形状中减去。默认的 SVG 值

又一天，另一个设计系统决定使用 SVG 图标系统。

在做出这样的选择时，每个人都有自己的考虑因素。Scott Mathis 记录了 Clarity 的主要考虑因素：选择退出、大小、多色、交互性、…

Etsy 从生产中移除了图标字体，改为使用 SVG。它将成为一个内联 <svg> 系统，但抽象为 <etsy-icon> 自定义元素以方便使用。

两分钱

• 我能理解这种需求

向 Dave Gandy 和 Font Awesome 团队致敬

Font Awesome 5 的 Kickstarter 筹集了 1,076,940 美元，获得了 35,549 位支持者，使其成为有史以来筹款最多和支持者最多的软件 Kickstarter 项目。

资助者获得了什么？1000 多个…

图标。它们很受欢迎。它们有助于补充内容（大多数时候）。然而，它们也可能很麻烦。

一旦您确定了格式（SVG 或图标字体？）并设计了集合，您仍然需要…

本指南来自 Florens Verschelde，其中包含 SVG 图标系统的基本内容，以及一些技巧：双色技巧、预加载精灵和使用自定义属性进行无限的颜色变化。此外，还有一些关于使用多种方法的有趣内容…

我在这里谈了不少关于 SVG 的 <use></use> 以及如何使用它来构建 图标系统。<use></use> 的好处在于，您可以只引用某个 SVG 的一部分，并且只绘制…

SVG 是一种矢量图形的图像格式。它实际上代表 **可缩放矢量图形**。基本上，就是你在 Adobe Illustrator 中使用的工具。你可以在网页上非常轻松地使用 SVG，但你应该了解很多东西……