前端如何显示后端返回的SVG编码图像？

前端svg图像的编码显示方法

许多网站将SVG图像以编码形式嵌入网页，而不是直接引用SVG文件。本文将探讨如何将后端返回的SVG图形链接，以编码的形式在前端显示，避免直接使用这样的引用方式。

问题描述中提到，一个网站直接引用SVG文件，而另一个网站则使用一大串编码来嵌入SVG。这种编码形式的优势在于，它将SVG文件内容直接嵌入HTML中，避免了额外的HTTP请求，从而提高页面加载速度。此外，这种方式也使得SVG图像更容易被修改和定制。

实现这种编码形式的SVG引入，可以使用JavaScript的fetch API来获取SVG文件内容。以下代码片段展示了如何实现：

<div id="test"></div><script>    fetch('https://static.segmentfault.com/main_site_next/614d2165/_next/static/media/sf-icon-small.4d244289.svg')        .then(body => body.text())        .then(svg => (new DOMParser).parseFromString(svg, 'image/svg+xml'))        .then(actualSVG => {            // append to the body or do your thing            document.querySelector('#test').appendChild(actualSVG.documentElement)        });</script>

登录后复制