html - 如何在避免 FOMI 的同时在外部 CDN 上缓存 SVG 图标？

Question

我知道如何在我的网站上加载 SVG 图标，但我不知道如何满足以下所有限制:

1. 能够在 CSS 中使用 SVG 图标
2. 没有闪烁的丢失图标 (FOMI)
3. 最小初始页面大小
4. 缓存的 SVG
5. 能够使用 CDN
6. 必须能够使用fill: currentColor 使图标匹配当前文本颜色，就像图标字体一样
7. 奖金:Pixel-align the SVGs所以他们总是看起来很敏锐

1、2、3 和 4 可以通过使用外部 Sprite 贴图来满足，如下所示:

<svg viewBox="0 0 100 100">
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="/assets/sprite-4faa5ef477.svg#icon-asterisk-50af6"></use>
</svg>

但是在浏览器修复 CORS issue 之前我们不能使用 CDN .

我们可以patch in支持外部域，但我很确定这不适用于 CSS，因为它只监视 DOM(抱歉，还没有测试过)，而且它还会导致您的浏览器向它无法获取的文件(页面上的每个图标一个)。

如果我们内联整个 SVG(增加页面大小，无缓存)或者我们将其 AJAX(导致 FOMI)，我们可以使用 CDN。

那么，是否有满足所有5 7 个约束条件的解决方案？

基本上我希望 SVG 与图标字体一样方便，否则就没有必要进行切换。 SVG 支持多种颜色并且更易于访问，但我无法让它们看起来一样好，或者加载效率不高。

Answer 1

我能得到的最接近的是在图像元素中加载 SVG，然后像“老式”一样使用它 image sprite .据我所知，这满足了您的所有限制。我能想到的唯一缺点是您无法使用 CSS 修改 SVG 的特定部分。然而，这不是您的限制之一(如果我错了请纠正我)并且仍然可以修改所有图标，正如您在我的演示中看到的那样。我创建了一个 fiddle为了完整起见，还包括一个代码片段。

为了模拟 CDN，我创建了一个 SVG 文件并将其上传到某个图像托管服务。如果此服务现在已关闭，我向 future 的读者致歉。 SVG 文件中的所有图标都彼此相邻(我现在创建了一个黑色正方形、圆形和三 Angular 形)。因此，与 SVG Sprite 贴图的不同之处在于图标在 SVG 本身中，而不是在 defs 中。 .将多个 SVG 组合成一个应该很容易，我还没有寻找可以自动执行此过程的工具。

.icon {
  display: inline-block;
  vertical-align: top;
  width: 30px; /* can be anything */
  height: 30px;
  background-image: url('http://imgh.us/icons_36.svg');
  
  border: 1px solid #000; /* just to see where the icon is */
}

/* sizes */
.icon.large {
  width: 50px;
  height: 50px;
  background-size: 150px auto;
}

/* icons */
.icon.circle { background-position: -30px 0; }
.icon.large.circle { background-position: -50px 0; }
.icon.triangle { background-position: -60px 0; }
.icon.large.triangle { background-position: -100px 0; }

/* styles */
.icon.info {
  /* based on http://stackoverflow.com/a/25524145/962603,
   * but you can of course also use an SVG filter (heh) */
  filter: invert(100%) sepia(100%) saturate(50000%) hue-rotate(90deg) brightness(70%);
}
.icon.highlight {
  /* based on http://stackoverflow.com/a/25524145/962603,
   * but you can of course also use an SVG filter (heh) */
  filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(30deg) brightness(50%);
}

<span class="icon square"></span>
<span class="icon circle"></span>
<span class="icon triangle"></span>
<span class="icon circle highlight"></span>
<span class="icon triangle large info"></span>