如何将网页中通过img标签引入的SVG文件转换为可直接嵌入HTML的代码？

将网页中通过img标签引入的svg文件转换为可直接嵌入html的代码

许多开发者在网页开发中会遇到这样的问题：如何将外部引入的SVG文件转换成可以直接嵌入HTML代码的形式？ 直接使用标签引入的SVG文件，查看页面源代码时，只会显示

问题在于，用户使用引入SVG，希望将其转换为直接嵌入HTML的代码。 解决方法的关键在于使用JavaScript动态加载并解析SVG文件。

我们可以利用fetch API获取SVG文件的文本内容，然后用DOMParser将其解析为SVG文档对象模型。最后，将解析后的SVG文档对象添加到页面中。 以下是一个具体的代码示例：

<div id="test"></div>  <script>     fetch('https://static.segmentfault.com/main_site_next/614d2165/_next/static/media/sf-icon-small.4d244289.svg')         .then(response => response.text())         .then(svg => (new DOMParser()).parseFromString(svg, 'image/svg+xml'))         .then(actualSVG => {             document.getElementById('test').appendChild(actualSVG.documentElement);         }); </script>

这段代码首先使用fetch函数获取指定的SVG文件。response.text()方法将响应内容转换为文本字符串。DOMParser将文本字符串解析为SVG文档对象。最后，appendChild方法将解析后的SVG元素添加到id为”test”的div元素中。 这样，SVG代码就成功嵌入到HTML中了。 请注意，你需要预先在HTML中创建一个容器元素（例如

），用于容纳解析后的SVG内容。