在同一文件夹中的 html 文档中引用嵌入在 html 中的 svg答案

【问题标题】：Reference an svg embedded in html in html document in same folder在同一文件夹中的 html 文档中引用嵌入在 html 中的 svg
【发布时间】：2015-03-25 13:05:46
【问题描述】：

我想在同一文件夹中的另一个 html 文档中引用嵌入在一个 html 文档中的 svg。我不需要后备，但我更喜欢一个。我见过：HTML - pick images of Root Folder from Sub-Folder、How to link html pages in same or different folders?、Do I use <img>, <object>, or <embed> for SVG files?。

我有一个带有 svg 的 html 文档，我想在这里参考：（此文档名为“pd_unit_red_fighter_v.0.0”，位于同一文件夹中）

<!doctype html>
<html>

<head>
    <title>Title</title>
</head>

<body>

    <svg id="red_fighter" width="480" height="480" viewBox="0 0 24 24">
        <g stroke-width=".25" stroke="#000" fill="#ccc" >
            <circle cx="12" cy="12" r="11.5" fill="#800" />
        </g>
    </svg>

</body>

</html>

我有另一个 html 文档，我希望这个文档引用另一个文档中的 svg：

<!doctype html>
<html>

<head>
    <title>test</title>

</head>

<body>

<object data="red_fighter.svg" type="image/svg+xml">
  <img src="./pd_unit_red_fighter_v.0.0.html" />

<a href="#./pd_unit_red_fighter_v.0.0.html" >
	<img class="logo" src="red_fighter.svg" width="240" height="240"/>
</a>

</object>

</body>

</html>

我已经尝试了两个对象标签，但我无法让它工作。我应该使用另一个标签还是我使用了错误的信息？我是新手，所以我为我缺乏知识而道歉。

【问题讨论】：

标签： html svg reference

【解决方案1】：

当您使用对象或图像标签引用 SVG 文件时，它实际上必须是 SVG 文件，而不是嵌入在 html 文件中的 svg 数据，因此您希望 red_fighter.svg 成为

<svg xmlns="http://www.w3.org/2000/svg" id="red_fighter" width="480" height="480" viewBox="0 0 24 24">
    <g stroke-width=".25" stroke="#000" fill="#ccc" >
        <circle cx="12" cy="12" r="11.5" fill="#800" />
    </g>
</svg>

注意独立 SVG 文件所必需的命名空间属性。

然后你可以使用object或者img标签来引用它。

注意使用正确的 mime 类型提供 svg 文件（尝试直接查看它以首先检查它是否有效）。

【讨论】：