将外部SVG精灵文件加载到HTML中

Question

我有一些SVG数据，希望将其存储在外部文件中并加载。最好的方法是什么？这样我就可以使用它来加载SVG，例如：

<svg class="icon icon-heart"><use xlink:href="#icon-heart"></use></svg></span>

- user1937021

---

你能否重新表述一下问题，因为很难理解你的目标是什么。你的数据真的由一个 svg 组成，其中只有一个 <use> 指向外部源，并且只有一个 html closing 标签吗？你打算用它做什么？ - Kaiido

它只是一个精灵。 - user1937021

那我就假设它是用于 html 网页的。这段代码并不会创建一个精灵，而是调用它。因此，你可以将其“存储”在你的 .html 文件中，或者存储在一个字符串中以便与 JavaScript 一起使用（所以是 .js 文件，甚至是 .json 文件，如果有很多的话；但在我看来，最好使用 js 来检索引用，并通过 DOM 创建这些调用）。 - Kaiido

Answer 1

事情从那时起有了一些变化。

现在，您可以像这样从外部文件调用它：

<svg><use xlink:href="external.svg#icon-heart"></use></svg>

我们可以像下面这样将外部svg加载到HTML中：

<object type="image/svg+xml" data="external.svg" width="0" height="0"></object>

注意：这种方法在IE中不起作用。

- koubin