如何将网页引入的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

直接通过编辑器打开你想要的引入的svg，将里面的源代码复制到html中指定位置即可，诚然，封装成svg让你页面看起来更简洁