如何在我的 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=" />

Answer 3

如何將可縮放矢量圖形添加到您的網頁

例如你可以使用：

<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>