通过将内容存储在单独的文件中，并将其作为img元素的源添加到网页中：

<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" />

EDIT：Converting an SVG to a data URL可能是最好的方法。Here是数据URI的一些优点/缺点，而here是数据URI的官方caniuse页面。我不知道你说的“这似乎不能在所有浏览器上工作”是什么意思。也许你的编码图像（加上编码方案文本）大于32 kB（数据URI的最大长度）？

您可以将繁重的工作留给原生JavaScript Web组件来完成，所有现代浏览器都支持该组件：

• 将外部SVG加载为文本
• 对SVG进行后处理以针对DataURI进行编码
• 创建<img>
• 将数据URI设置为src
• ！！将Web组件本身替换为<img>

<style>
  img { height:140px }
</style>

<svg-to-img src="//svg-cdn.github.io/heart.svg"></svg-to-img>
<svg-to-img src="//svg-cdn.github.io/joker-card.svg"></svg-to-img>
<svg-to-img src="//svg-cdn.github.io/svg_circle_spinner.svg"></svg-to-img>

<script>
  customElements.define("svg-to-img", class extends HTMLElement {
    async connectedCallback() {
      let src = this.getAttribute("src");
      let options = { /* fix potential CORS issues, client AND server side */ };
      let svg = await (await fetch(src,options)).text();
      let img = Object.assign(document.createElement("img"), {
        src: "data:image/svg+xml," + svg.replace(/"/g, "'").replace(/#/g, '%23'),
        onload: (e) => console.log("Loaded SVG as IMG", src),
        onerror: (e) => console.error(e)
      });
      this.replaceWith(img);
    }
  })
</script>

注意：浏览器接受没有命名空间的SVG;对于DataURI，xmlns="http://www.w3.org/2000/svg"在SVG中至关重要！