SVG symbol 用于图标的不错选择

正在寻找更好的 SVG 图标方法？内联 SVG 可能是您的最佳选择，您可以在 这篇较新的文章 中了解相关信息。

您可以设计一个图标集，其中所有图标都具有完全相同的纵横比。但这通常不会发生。一个小烧杯图标周围的容器可能是又高又窄。小鱼周围的容器可能是又短又长。您可能不必过多考虑这一点，但不幸的是，当您使用 我之前描述过的 SVG 图标系统 时，您确实需要考虑这一点，因为您需要使用 viewBox 属性来描述该容器/纵横比。

一种改进方法是在 SVG 中使用 元素，而不是直接引用形状（或 ），因为您可以直接在 上定义 viewBox，然后在稍后在 中 它时就不需要使用它了。

需要举个例子。

以下是两个纵横比截然不同的图标，从 Illustrator 中的画板可以看出。

我们可以调整它们，使它们都放置在一个一致的纵横比内，但我发现，知道图标的边缘正好是形状停止的地方，而不是在其周围有任意数量的空白区域，这样更灵活、更易于操作。

“旧”方法

如果我们采用 块路线，我们可以将它们组合成

然后像这样使用它们

这使得实现者需要承担相当大的责任，以确保标记中 viewBox 属性的正确性。这就是为什么您可能希望尝试使所有这些图标都具有一个一致的 viewBox="0 0 100 100"（或类似内容），但这会导致出现某种任意空白区域问题的原因之一。

“新”方法

让我们来了解一下 Fabrice Weinberg 和 TxHawks。Fabrice 从事 grunt-svgstore 的开发工作，这是一个用于从 SVG 文件文件夹创建 SVG 精灵的 Grunt 插件。这种方法使 SVG 图标工作流程变得快速而轻松。也就是说，除了您需要在使用每个图标之前知道该死的 viewBox 之外。

TxHawks 建议 grunt-svgstore 至少在包装每个图标的 元素上放置 data-* 属性，以便可以以编程方式访问它应该是什么。但不幸的是，SVG 不允许这样做（它可能已经可以工作了，但不妨使构建工具符合规范）。但这没关系，因为很快，他们建议 使用 ，结果证明这是一个非常好的主意。

不要使用 来包装所有图标形状，而是使用 ，如下所示

请注意，每个图标的 viewBox 都已定义，并且您是在定义它而不是在使用它时定义它。这意味着使用它变得更容易

更轻松，更不容易出错。

而且它变得更好：您可以添加
原始文件的描述




感谢 TxHawks 和 Fabrice，grunt-svgstore 现在可以做到这一点！

为什么 <symbol> 更适合图标

总结一下

1. 可以在 symbol 上定义 viewBox，因此您无需在标记中使用它（更轻松且更不容易出错）。
2. 可以在 内添加 title 和 desc 标记，并且当使用该 symbol 时，它们会“顺带一起”，从而更容易实现可访问性。
3. symbol 在定义时不会显示，因此不需要 块。
4. 这可能就是 的发明初衷。

演示

它有效

查看 Chris Coyier 在 CodePen 上撰写的笔 Hwcxp（@chriscoyier）。