将网页中通过img标签引入的svg文件转换为可直接嵌入html的代码
许多开发者在网页开发中会遇到这样的问题：如何将外部引入的SVG文件转换成可以直接嵌入HTML代码的形式？ 直接使用<img src="https://img.php.cn/" alt="如何将网页中通过img标签引入的svg文件转换为可直接嵌入html的代码？
">标签引入的SVG文件，查看页面源代码时，只会显示<img src="https://img.php.cn/upload/article/001/246/273/174252159433365.jpg" alt="如何将网页中通过img标签引入的svg文件转换为可直接嵌入html的代码？
">
问题在于，用户使用<img src="https://img.php.cn/" alt="如何将网页中通过img标签引入的svg文件转换为可直接嵌入html的代码？
">引入SVG，希望将其转换为直接嵌入HTML的代码。 解决方法的关键在于使用JavaScript动态加载并解析SVG文件。
我们可以利用fetch API获取SVG文件的文本内容，然后用DOMParser将其解析为SVG文档对象模型。最后，将解析后的SVG文档对象添加到页面中。 以下是一个具体的代码示例：
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
<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中创建一个容器元素（例如<div id="test"></div>），用于容纳解析后的SVG内容。
