后端返回的svg图形链接，前端如何以编码的形式展示svg?

Question

刚刚在网页中引入了一个svg文件，查看源代码就是一个./test.svg 的引入，而别的网站引入的svg都是一大串编码。

如下：

如何实现这种方式的文件引入

Answer 1

https://jsrun.net/PJcKp/edit

<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>

Answer 2

HTML中嵌入SVG图片的N种方式