如何调整coinparticle端代码移除HTML标签返回可被img加载的SVG

• 你调用的CoinGecko接口直接返回纯SVG内容，响应头Content-Type为image/svg+xml，符合<img>标签对图像资源的加载要求
• 你当前coinparticle接口返回的是带<html>、<script>标签的HTML文档：
  1. 响应头Content-Type为text/html，不属于<img>支持的图像类型
  2. <img>标签加载资源时不会执行HTML内的JavaScript代码，也不会解析HTML中的DOM元素，就算JS动态生成了SVG也无法被识别渲染
  3. 你现有JS拼接SVG的代码存在语法错误，属性之间多了冗余引号，会导致生成的SVG标签不合法

你可以直接调整服务端逻辑，直接输出纯SVG资源即可，无需返回HTML和前端JS代码，步骤如下：

1. 调整服务端响应头，将Content-Type设置为image/svg+xml，替换原来的text/html
2. 将你当前前端JS中计算SVG坐标、拼接SVG代码的逻辑迁移到服务端执行
3. 修复SVG拼接的语法错误，移除标签属性之间冗余的引号，服务端直接输出拼接完成的纯SVG字符串，不要包裹任何<html>、<script>等额外标签

修复后的SVG输出示例（基于你提供的points数据） #

你服务端最终输出的内容格式应该类似如下纯SVG代码：

<svg width="135" height="54" viewBox="0 0 135 54" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polyline points="0,50.92 44.29,30.48 88.74,15.53 135,14 " stroke-linejoin="round" style="fill: transparent; stroke:green; stroke-width:2" />
</svg>

如果暂时不打算迁移逻辑到服务端，你可以放弃用<img>标签加载该资源，改为用fetch请求接口后将返回的SVG内容直接插入到页面DOM中，不过该方法不适合直接作为图像资源被引用。

内容的提问来源于stack exchange，提问作者Reginald1234