是否可以调用另一个定义了 SVG 的 HTML 文档，并将其用作另一个 HTML 文档中的 SVG？答案

【问题标题】：Is it possible to call another HTML doc, where an SVG is defined, and use it as an SVG in another HTML doc?是否可以调用另一个定义了 SVG 的 HTML 文档，并将其用作另一个 HTML 文档中的 SVG？
【发布时间】：2020-03-13 13:00:59
【问题描述】：

我正在考虑使用 SVG 图像的可能性以及是否可以将 SVG 定义存储在独立的 HTML 文件中，例如下面，blue-circle.html：

<html>
<body>

<title>Saved as blue-circle.html</title>

<h1>A bluecircle</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

</body>
</html>

并从另一个 HTML 文件中调用它，例如

<html>
<body>

<title>My Website</title>

<h1>Blah blah blah...</h1>

<svg width="100" height="100" url="blue-circle.html")/>
</svg>

<p>... ...</p>

</body>
</html>

这背后的原因是：

避免引用 SVG 或光栅文件。
避免以光栅格式保存 SVG 并通过 img 标签使用它们。
减少对每个 HTML 文档使用内联 SVG（从而消除单个 HTML 文件中的重复和文本负载）。
创建一个集中存储的 SVG 库，可以从任何 HTML 文件中引用。

是否可以调用另一个定义了 SVG 的 HTML 文档，并将其用作另一个 HTML 文档中的 SVG？

【问题讨论】：

您可以将 svg 放入 svg 文件中并包含为图像。
谢谢@Johnny 是的，这是一种方法，但我应该提到这不是首选方法...由于我们的设置...我会更新问题...跨度>

标签： html css svg

【解决方案1】：

您可以将 SVG 放在一个 svg 文件中，并通过 <use> 引用它们

vault.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <svg id="symbol1" viewBox="0 0 100 100">
     <circle cx="50" cy="50" r="50" fill="green"/>
  </svg>
  <svg id="symbol2" viewBox="0 0 100 100">
     <circle cx="50" cy="50" r="50" fill="blue"/>
  </svg>
  <svg id="symbol3" viewBox="0 0 100 100">
     <circle cx="50" cy="50" r="50" fill="red"/>
  </svg>
</svg>

一些.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <svg viewBox="0 0 100 100" width="200px">
      <use xlink:href="vault.svg#symbol1"/>
    </svg>
    <svg viewBox="0 0 100 100" width="200px">
      <use xlink:href="vault.svg#symbol2"/>
    </svg>
    <svg viewBox="0 0 100 100" width="200px">
      <use xlink:href="vault.svg#symbol3"/>
    </svg>
  </body>
</html>

但是，您不能以这种方式引用存在于外部 html 文件中的 svg :-( 仅当 svg 存在于外部 svg 中时它才有效......虽然有很多方法可以让它与使用脚本的 html 一起工作。 ..

【讨论】：