Node.js与Express中通过JSON传递SVG的问题求助

问题本质 #

前端React项目中，import { ReactComponent as F01 } from "./F01.svg"是依赖**webpack（或Create React App内置构建工具）**通过@svgr/webpack插件将SVG编译为React组件。但后端Node.js/ts-node没有这类SVG编译能力，直接导入SVG文件时，Node会把它当作普通文本解析，遇到SVG开头的<符号就触发语法错误——这不是合法的JavaScript语法。

可行解决方案 #

方案1：后端读取SVG文本内容，前端通过dangerouslySetInnerHTML渲染

适合不需要对SVG做组件化操作（如修改props、绑定事件）的场景：

1. 后端代码修改：
   用Node.js的fs模块读取SVG文件的字符串内容，放入返回对象：

   import fs from 'fs';
   import path from 'path';
   
   // 读取SVG的UTF-8格式内容
   const f01SvgContent = fs.readFileSync(path.resolve(__dirname, './F01.svg'), 'utf8');
   
   export const testObject = {
     title: "Render this",
     text: "Test",
     svgContent: f01SvgContent
   };
   

2. 前端渲染代码：
   接收后端返回的SVG字符串，直接插入DOM：

   function SvgViewer({ svgContent }) {
     return <div dangerouslySetInnerHTML={{ __html: svgContent }} />;
   }
   
   // 使用示例（假设已从API获取到data）
   <SvgViewer svgContent={data.svgContent} />
   

方案2：后端托管SVG为静态资源，前端通过URL引用

若需要对SVG做样式控制（如修改填充色），可将SVG放在静态资源目录，后端返回URL，前端选择合适方式渲染：

1. 后端配置静态资源：
   在Express中托管静态文件夹（例如public/svg）：

   import express from 'express';
   const app = express();
   
   // 托管public目录下的静态文件，访问路径映射为根目录
   app.use(express.static('public'));
   

2. 后端返回SVG路径：

   export const testObject = {
     title: "Render this",
     text: "Test",
     svgUrl: '/svg/F01.svg' // 对应服务器上public/svg/F01.svg的位置
   };
   

3. 前端渲染方式：

   • 无需组件化时，直接用<img>：

     <img src={data.svgUrl} alt="SVG icon" className="svg-icon" />
     

   • 需要组件化（如修改SVG内部样式）时，动态导入React组件：

     import { lazy, Suspense } from 'react';
     
     function DynamicSvg({ svgUrl }) {
       // 动态导入并获取ReactComponent
       const SvgComponent = lazy(() => 
         import(`../public${svgUrl}`).then(module => ({ default: module.ReactComponent }))
       );
       return (
         <Suspense fallback={<div>Loading...</div>}>
           <SvgComponent fill="red" width={24} height={24} />
         </Suspense>
       );
     }
     

方案3：后端将SVG转成React组件代码（不推荐，有安全风险）

如果必须传递React组件形式，可将SVG手动转为JSX代码字符串，前端动态渲染，但仅适用于完全信任的SVG内容，否则存在XSS风险：

// 后端手动转SVG为JSX字符串（或用工具批量转换）
export const testObject = {
  title: "Render this",
  text: "Test",
  svgComponentCode: `function F01(props) { return <svg {...props}><path d="..."/></svg>; }`
};

前端接收后动态执行：

function DynamicComponent({ code }) {
  const Component = new Function(code)();
  return <Component />;
}

原方法在后端失效的原因 #

前端的import { ReactComponent as F01 } from "./F01.svg"是构建工具的特殊处理：webpack调用@svgr/webpack把SVG编译为返回<svg>元素的React函数组件。而后端Node.js没有这个编译流程，直接导入SVG文件时，Node会尝试把它当作JavaScript解析，自然会因<符号触发语法错误。

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