我们已经花了大量时间讨论使用内联 <svg> 和 <use> 元素。你可以用它构建一个图标系统，它充满了优势。
你也可以通过其他方式创建 SVG 图标系统。你可以用 SVG 布局一个传统的网格化精灵图，并像我们以前对栅格图像所做的那样使用 background-position 精灵。将来你将能够使用片段标识符，这样甚至会更容易一点。有关这些内容的更多信息。
另一种方法是将 SVG 图像的 数据 URI 直接嵌入到 CSS 文件中。这就是 Grunticon 所采用的方法。
Grunticon 是一个 Grunt 插件，用于自动化 SVG 图标系统。它接收一个包含 SVG 的文件夹，并将它们处理成一个 CSS 文件。其中包含一堆选择器，它们基于 SVG 图像的文件名，并具有 SVG 数据 URI 的 background-image（不是 Base64 ）。
通过这种方式，你获得了 SVG 的可伸缩性和文件大小优势，但仅此而已。不过，通常这已经足够了。
也许 Grunticon 最好的部分是，它为你提供了回退所需的一切。这包括一个用于数据 URI PNG 的备用样式表，甚至包括单独的 PNG 本身（它会为你创建）。此外，还有一个脚本，你可以在页面上使用它来确定支持情况，并仅加载相应的样式表。
我认为可以公平地说，这使得回退比 defs/<use> 技术更容易处理，至少目前是这样。这并不是说它不可能。
Grumpicon 是 Grunticon 的一个浏览器版本，我们在这次屏幕录制中使用了它。
在我写这篇文章的时候，Grunticon 正在开发一种方法 来逐步增强到嵌入式内联 SVG，这将非常酷！