如何在React-pdf生成的DOM文档中渲染SVG格式的logo

问题原因 #

React-pdf的Image组件本身仅支持栅格格式图片（jpeg、png等），无法直接解析SVG格式源，且Image与Svg为平级渲染元素，嵌套使用没有效果。

实现方案 #

方案1：手动转换为React-pdf原生Svg元素（推荐，性能最高） #

React-pdf提供的Svg组件支持与原生HTML SVG一一对应的子元素，仅需做少量修改即可直接使用：

• 从@react-pdf/renderer中导入需要的SVG子组件：常用的有Path、Rect、Circle、Line、Svg专属的Text等
• 将原SVG文件的标签名替换为对应的导入组件，属性名转换为驼峰命名（例如fill-rule改为fillRule、stroke-width改为strokeWidth）
• 把转换后的内容直接放在Svg标签内即可

示例代码：

// 导入依赖
import { Svg, Path } from "@react-pdf/renderer";

// 组件内使用
<Page size="A4" style={styles.page}>
  <View style={styles.section}>
    {/* 替换原Image组件 */}
    <Svg width="100" height="100" viewBox="0 0 100 100">
      <Path d="M0 0h100v100H0z" fill="#ff0000" fillRule="evenodd"/>
    </Svg>
    <Text>My PDF</Text>
  </View>
</Page>

方案2：第三方工具批量转换 #

如果SVG文件复杂度高、数量多，可以用@svgr/core工具批量转换为React-pdf兼容的组件：

1. 安装开发依赖：npm install @svgr/core @svgr/plugin-jsx @svgr/plugin-svgo --save-dev
2. 配置转换规则，将默认输出的HTML SVG标签映射替换为@react-pdf/renderer导出的Svg相关组件，批量处理本地SVG文件即可。

方案3：SVG转Base64 PNG（临时快速解决） #

如果不需要保留矢量图清晰度，可以提前将SVG转换为PNG格式的Base64编码，直接传给原Image组件的src属性即可，无需修改现有代码结构。

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