如何在我的 HTML 中链接 .svg 文件？

Question

我有一个 .svg 文件，里面有一些代码。
如果我只是将该代码与<svg>标签一起放在我的 HTML 中，它就可以正常工作。
问题是我的 .svg 中有很多代码，我不想把所有这些代码都放在我的 HTML 中。所以我制作了一个 .svg 文件并尝试链接它，但它似乎没有链接。
有谁知道我应该如何将 .svg 文件链接到 HTML 文件？

Answer 1

最简单（也可能是最正确）的方法是简单地将 SVG 文件作为src放在<img>标签中，就像它是任何其他格式一样。

请记住，这在某些较旧的浏览器中可能不起作用（这是 SVG 的普遍问题，而不仅仅是在img标签中使用它）。

另一种选择是在<object>标签内使用它，如本文所示（也分解了两个选项和两者的缺点）：

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- fallback image in CSS -->
</object>

在这种情况下，您保留使用 CSS 影响 SVG 部分的能力——这可能是您想要的，也可能不是。

Answer 2

我通常会在 using 中使用它<img src="link to svg file" />

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGNpcmNsZSBpZD0iY2lyY2xlIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHI9IjE0IiBjeD0iMTUiIGN5PSIxNSIvPjxjaXJjbGUgaWQ9ImRvdCIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiByPSIxIiBjeD0iMTUiIGN5PSI3LjUiLz48cGF0aCBpZD0iaSIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJtMTIuNSwxMS41bDMuNSwwbDAsMTFxMCwwLjUgMC41LDAuNWwxLDBsMCwxbC01LDBsMCwtMWwxLDBxMC41LDAgMC41LC0wLjVsMCwtOS41cTAsLTAuNSAtMC41LC0wLjVsLTEsMGwwLC0xeiIvPjwvZz48L3N2Zz4=" />