16: SVG 图标系统 – 外部资源

将 SVG defs 代码块放在文档顶部绝对有效。它也有一些优势，比如不需要发出 HTTP 请求，所有绘制图形的信息都在页面上。但它也有一些缺点。所有这些信息都需要浏览器在每个页面上从文档中解析。它不是一个可能已经被客户端缓存的单独文档，就像其他资源一样。说到缓存，如果你的网站缓存 HTML（通常是一个好主意），你可以将此视为“页面缓存膨胀”，因为每个缓存页面都包含此大型重复代码块——这不是服务器缓存的非常有效的利用方式。

好消息是，我们**可以**将该 SVG defs 代码块移到一个外部文件中，并像使用图像或任何其他资源一样使用它。

然后，当我们使用它时，文件路径将位于属性中，如下所示

<svg class="icon-book">
  <use xlink:href="/path/to/imgs/svg-defs.svg#icon-book"></use>
</svg>

需要注意的是：**跨域限制在这方面很严格。**即使是 CORS 头在我的经验中也帮不了你。因此，没有 CDN（甚至无法在 CodePen 上播放，当然也无法在 file:// URL 上播放）。

另一件需要注意的是：**你绝对需要 xmlns 属性才能使它工作。**也就是说，你的 SVG defs 代码块应该以以下开头

<svg xmlns="http://www.w3.org/2000/svg">

我原以为在 HTML5 文档中不需要它（就像你不需要 <script> 的类型一样），但也许是因为此文件不再位于 HTML5 文档的范围内（它被外部引用），所以你需要它。

因此，此处的演示。

同样重要的是：任何版本的 IE 都不支持此功能（截至发布时为 11）。但是有一种方法可以使其工作，通过基本上 Ajax 获取你需要的那部分 SVG 并将其插入 <use> 所在的位置，使其成为一种受支持的“正常”内联 SVG。我们花了一点时间来使用 BrowserStack 在 Internet Explorer 中使它工作并进行测试，但最终我们做到了。