可以使用SVG sprite而不需要每个实例的<svg>？

Question

我试图从字体图标（icomoon.io）转移到SVG精灵。 是否可以使用SVG精灵而无需＆lt; svg＆gt;每个图标实例的标记？

我真正喜欢的字体图标是，我没有用任何其他元素来混淆我的HTML以显示图标。我通常只针对一个简单的类来定位我想要显示图标的任何元素，然后使用伪选择器来显示图标，例如：

<h1 class="news">News</h1>

h1.user:before {
  font-family: 'icons';
  content: '\news';
}

这对我来说很有意义，我的所有图标都可以在CSS中轻松管理。只要我的标记包含适当的类，我就很少需要触摸我的HTML。

我已经将我的构建系统转换为Grunt，并且我认为我会尝试使用SVG sprite。该主题上几乎every¹ article² I³ can⁴ find⁵表示您需要在标记中添加其他SVG元素，无论您希望每个实例显示哪个元素，例如：

<h1>
  <svg class="icon">
    <use xlink:href="#icon-news">
  </svg>
  News
</h1>

这对我来说似乎是一个倒退，至少在标记管理上是这样。对我来说，图标通常是与文档结构分开的表示。我们这样做是因为浏览器支持SVG状态吗？

理想情况下，我希望能够做到这样的事情：

<h1 class="news">News</h1>

h1.news:before {
  display: inline-block;
  width: px;
  height: px;
  background: url(icons.svg#news) no-repeat;
}

This post似乎更接近我正在寻找的内容，但我不确定浏览器支持以及如何在像Grunt这样的构建系统中自动执行此操作。

Answer 1

SVG可以作为文件加载，与使用<img>标签或CSS background的其他图像完全相同，并且可以作为精灵使用完全相同的方式。唯一的区别是你必须指定你想要的大小（因为它是可扩展的，所以浏览器不会自动知道它与PNG有多大）。

根据您希望如何使用图像，以这种方式加载它们可能适合也可能不适合，因为某些SVG功能不可用，但可以这样做。