前端如何将后端返回的SVG图形编码显示？（如何将.后端.图形.编码.返回.....）

wufei123 2025-03-12 阅读:23 评论:0

前端如何显示后端返回的svg图形编码？在网页开发中，我们经常需要处理SVG图形。有时，SVG图形会以独立文件的形式引入，例如；但有些情况下，SVG图形是以编码形式嵌入HTML代码中的。本文将介绍如何将后端返回的SVG图形编码在前端显示。...

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

在网页开发中，我们经常需要处理SVG图形。有时，SVG图形会以独立文件的形式引入，例如前端如何将后端返回的SVG图形编码显示？；但有些情况下，SVG图形是以编码形式嵌入HTML代码中的。本文将介绍如何将后端返回的SVG图形编码在前端显示。

下图展示了SVG编码嵌入的示例：

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

许多开发者会疑惑为何有些网站直接引用SVG文件，而另一些则使用编码嵌入。关键在于如何处理后端返回的SVG数据。直接引用文件路径简单便捷，但编码嵌入则更利于代码整合和维护。

要实现编码形式的SVG嵌入，需要将SVG文件内容读取为文本字符串，然后解析并插入DOM。我们可以利用fetch API来获取SVG数据：

PHP

<div id="svg-container"></div>

fetch('https://static.segmentfault.com/main_site_next/614d2165/_next/static/media/sf-icon-small.4d244289.svg')
  .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 SVG:', error));