如何在不使用 img 标签的情况下将 SVG 图像代码放入 HTML 文件中？

Question

我有一个 SVG 图像。我知道我可以在图像标签中使用它，但这样我就无法设置 svg 的路径标签的样式。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="398px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:0.993" fill="#000000" d="M 235.5,-0.5 C 248.833,-0.5 262.167,-0.5 275.5,-0.5C 353.784,10.624 408.951,52.2907 441,124.5C 468.343,202.773 455.01,273.107 401,335.5C 366.395,370.719 324.561,391.386 275.5,397.5C 262.167,397.5 248.833,397.5 235.5,397.5C 147.918,384.421 90.4184,335.755 63,251.5C 44.1335,169.779 65.6335,100.946 127.5,45C 159.111,19.4077 195.111,4.24107 235.5,-0.5 Z M 252.5,88.5 C 262.79,88.2893 268.623,93.2893 270,103.5C 270.667,148.5 270.667,193.5 270,238.5C 269.085,247.249 264.252,252.249 255.5,253.5C 246.748,252.249 241.915,247.249 241,238.5C 240.333,193.5 240.333,148.5 241,103.5C 241.713,95.9701 245.546,90.9701 252.5,88.5 Z M 253.5,278.5 C 268.106,280.706 272.606,288.706 267,302.5C 259.333,310.5 251.667,310.5 244,302.5C 238.615,290.955 241.781,282.955 253.5,278.5 Z"/></g>
<g><path style="opacity:0.959" fill="#000000" d="M -0.5,221.5 C -0.5,206.167 -0.5,190.833 -0.5,175.5C 5.14748,123.215 24.3141,76.5481 57,35.5C 64.1348,28.503 71.9681,27.6696 80.5,33C 85.9216,39.2833 86.7549,46.1166 83,53.5C 29.9793,120.615 16.9793,194.948 44,276.5C 53.1732,301.196 66.1732,323.53 83,343.5C 87.6577,358.723 82.1577,366.557 66.5,367C 64.0506,366.275 61.7173,365.275 59.5,364C 25.3602,322.542 5.36016,275.042 -0.5,221.5 Z"/></g>
<g><path style="opacity:0.959" fill="#000000" d="M 511.5,175.5 C 511.5,190.833 511.5,206.167 511.5,221.5C 505.64,275.042 485.64,322.542 451.5,364C 441.159,369.772 432.992,367.606 427,357.5C 426.19,352.743 426.524,348.076 428,343.5C 481.02,276.389 494.02,202.055 467,120.5C 457.827,95.8038 444.827,73.4705 428,53.5C 422.821,36.6833 428.987,28.85 446.5,30C 449.562,31.0608 452.062,32.8941 454,35.5C 486.686,76.5481 505.853,123.215 511.5,175.5 Z"/></g>
</svg>

这是我的 svg 图像中的代码。我想要它在 HTML 文件中。

当然，我尝试将其不包含 xml 和 doctype 标签。但没有成功。

<svg class="icon handbrake" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="398px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <path style="opacity:0.993" fill="#000000" d="M 235.5,-0.5 C 248.833,-0.5 262.167,-0.5 275.5,-0.5C 353.784,10.624 408.951,52.2907 441,124.5C 468.343,202.773 455.01,273.107 401,335.5C 366.395,370.719 324.561,391.386 275.5,397.5C 262.167,397.5 248.833,397.5 235.5,397.5C 147.918,384.421 90.4184,335.755 63,251.5C 44.1335,169.779 65.6335,100.946 127.5,45C 159.111,19.4077 195.111,4.24107 235.5,-0.5 Z M 252.5,88.5 C 262.79,88.2893 268.623,93.2893 270,103.5C 270.667,148.5 270.667,193.5 270,238.5C 269.085,247.249 264.252,252.249 255.5,253.5C 246.748,252.249 241.915,247.249 241,238.5C 240.333,193.5 240.333,148.5 241,103.5C 241.713,95.9701 245.546,90.9701 252.5,88.5 Z M 253.5,278.5 C 268.106,280.706 272.606,288.706 267,302.5C 259.333,310.5 251.667,310.5 244,302.5C 238.615,290.955 241.781,282.955 253.5,278.5 Z"/>
                        <path style="opacity:0.959" fill="#000000" d="M -0.5,221.5 C -0.5,206.167 -0.5,190.833 -0.5,175.5C 5.14748,123.215 24.3141,76.5481 57,35.5C 64.1348,28.503 71.9681,27.6696 80.5,33C 85.9216,39.2833 86.7549,46.1166 83,53.5C 29.9793,120.615 16.9793,194.948 44,276.5C 53.1732,301.196 66.1732,323.53 83,343.5C 87.6577,358.723 82.1577,366.557 66.5,367C 64.0506,366.275 61.7173,365.275 59.5,364C 25.3602,322.542 5.36016,275.042 -0.5,221.5 Z"/>
                        <path style="opacity:0.959" fill="#000000" d="M 511.5,175.5 C 511.5,190.833 511.5,206.167 511.5,221.5C 505.64,275.042 485.64,322.542 451.5,364C 441.159,369.772 432.992,367.606 427,357.5C 426.19,352.743 426.524,348.076 428,343.5C 481.02,276.389 494.02,202.055 467,120.5C 457.827,95.8038 444.827,73.4705 428,53.5C 422.821,36.6833 428.987,28.85 446.5,30C 449.562,31.0608 452.062,32.8941 454,35.5C 486.686,76.5481 505.853,123.215 511.5,175.5 Z"/>
                    </svg>

澄清一下，我不想要这个：

<img src="assets/icons/handbrake.svg">

Answer 1

您可以使用我编写的 <load-file> Web 组件

注入

SVG：

完整开发博客文章：
https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

所需的所有代码：

// Define <load-file> Web Component
customElements.define("load-file", class extends HTMLElement {
  async connectedCallback() {
    this.shadowRoot || this.attachShadow({mode: "open"});
    this.shadowRoot.innerHTML = await (await fetch(this.getAttribute("src"))).text();
    this.shadowRoot.append(...this.children);
    this.hasAttribute("replaceWith") && this.replaceWith(...this.shadowRoot.children)
  }
})

svg,load-file {
  width: 150px;
  display: inline-block;
}

<!-- USE Web Component : replace <load-file> with SVG -->
<load-file replaceWith src="//load-file.github.io/heart.svg"></load-file>

<load-file src="//load-file.github.io/heart.svg">
<!-- create <load-file> with shadowDOM, inject <style> -->
  <style shadowRoot>
    path:nth-child(2n+2) {
      fill: GREEN; /* shadowDOM style does NOT style global DOM */
    }
  </style>
</load-file>