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

前端如何显示后端返回的svg编码？

许多网站为了优化性能和方便管理，选择将SVG图像以编码形式嵌入HTML，而非直接引用外部文件。这种方法避免了额外的HTTP请求，提高了页面加载速度，也便于修改和控制SVG内容。 那么，如何将后端提供的SVG数据，以编码形式在前端展示呢？

关键在于将后端返回的SVG数据（文本格式）解析并渲染。 我们可以利用Fetch API高效地完成此任务。

以下代码示例演示了如何使用Fetch API获取、解析和渲染后端返回的SVG编码：

<div id="svg-container"></div>fetch('/your-backend-svg-endpoint') // 将'/your-backend-svg-endpoint' 替换为你的后端API地址  .then(response => response.text())  .then(svgData => {    const parser = new DOMParser();    const svgDoc = parser.parseFromString(svgData, 'image/svg+xml');    document.getElementById('svg-container').appendChild(svgDoc.documentElement);  })  .catch(error => {    console.error('Error fetching or parsing SVG:', error);    // 处理错误，例如显示错误提示信息  });

登录后复制