从对象渲染SVG时出现格式错误，请求技术支援

我之前也碰到过类似的SVG转义乱码问题，核心原因是你的SVG字符串在存储或渲染环节被双重转义了，导致引号、换行符被错误编码，最终输出格式混乱。下面给你几个实用的解决思路：

1. 用框架提供的HTML直接渲染方法（推荐） #

如果你是在React、Vue这类前端框架中使用，不要直接把SVG字符串当作普通文本插入，要使用框架专门的安全插入HTML的API：

• React：使用dangerouslySetInnerHTML

  // 正确渲染方式
  <div dangerouslySetInnerHTML={{ __html: icon.facebook }} />
  

• Vue：使用v-html指令

  <!-- 正确渲染方式 -->
  <div v-html="icon.facebook"></div>
  

框架默认会转义所有插入的文本内容来防止XSS，用这些API可以告诉框架：这段内容是可信的HTML，不需要转义。

2. 从根源避免不必要的转义 #

如果你的SVG是从后端获取或者通过序列化存储的（比如用JSON），要确保存储的是原始SVG字符串：

• 后端返回时不要手动转义SVG中的引号、换行符，让JSON序列化工具（比如Node.js的JSON.stringify）自动处理
• 不要在存储时给SVG字符串手动添加反斜杠（比如不要写成"<svg class=\"w-6\"...>"），你示例里的模板字符串`<svg class="w-6"...>`是正确的存储方式

3. 兜底：手动解码已转义的字符串 #

如果已经拿到了被转义后的混乱字符串，可以通过正则替换来还原原始SVG：

const fixSvg = (escapedSvg) => {
  return escapedSvg
    .replace(/"/g, '"')  // 还原被转义的引号
    .replace(/\\n/g, '')      // 移除多余的换行转义
    .replace(/\\/g, '')       // 移除多余的反斜杠
};

// 使用还原后的字符串渲染
const correctedSvg = fixSvg(icon.facebook);

不过这个方法是兜底方案，优先推荐从根源解决转义问题。

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