React Native中SVG图片显示变形问题求助

问题概述 #

在React Native应用中渲染SVG时出现变形，实际显示效果与预期不符：

• 预期效果：
• 实际效果：

当前使用的渲染方式、依赖配置及metro配置如下：

渲染代码 #

import AltoDark from '@/assets/image/profil/alto_dark.svg';
...
<View>
// 方式一：直接使用转换后的组件
<AltoDark/>
// 方式二：尝试用SvgXml渲染
<SvgXml xml={AltoDark} />
</View>

依赖配置（package.json） #

"react-native-svg": "10.1.0",
"react-native-svg-transformer": "^1.0.0",

Metro配置 #

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

问题原因 #

1. SVG缺少viewBox属性：未设置viewBox的SVG无法维持原生宽高比，会被父容器强制拉伸，导致变形。
2. react-native-svg版本过旧：10.1.0版本对SVG标准属性的解析存在兼容性问题，部分复杂路径渲染逻辑有bug。
3. SvgXml使用错误：通过react-native-svg-transformer导入的SVG是已转换的React组件，而非原始XML字符串，直接传入<SvgXml>会引发解析异常。

修复方案 #

1. 补全SVG的viewBox属性 #

打开目标SVG文件，在根<svg>标签中添加viewBox属性，值需匹配SVG的实际画布尺寸。例如：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- 原有路径内容 -->
</svg>

若不确定画布尺寸，可通过Figma、Inkscape等工具查看SVG的原始尺寸。

2. 升级依赖版本 #

旧版本react-native-svg存在较多渲染bug，升级至稳定兼容版：

1. 卸载旧依赖：

npm uninstall react-native-svg react-native-svg-transformer

2. 安装新版本（示例为当前稳定兼容组合）：

npm install react-native-svg@13.14.0 react-native-svg-transformer@1.1.0

3. 重置metro缓存并重启服务：

npx react-native start --reset-cache

3. 修正SVG渲染代码 #

• 推荐方式：直接使用转换后的组件
  显式指定宽高以控制渲染尺寸：

import AltoDark from '@/assets/image/profil/alto_dark.svg';

// 渲染
<AltoDark width={24} height={24} />

• 备选方式：使用SvgXml渲染
  需导入原始SVG字符串，确保添加?raw后缀（需metro支持该加载方式）：

import AltoDarkXml from '@/assets/image/profil/alto_dark.svg?raw';

// 渲染
<SvgXml xml={AltoDarkXml} width={24} height={24} />

4. 验证Metro配置 #

当前Metro配置已正确将SVG排除在资源文件外并加入源码扩展名列表，若升级依赖后出现加载问题，可重新确认该配置的正确性。

内容的提问来源于stack exchange，提问作者Rémy Ntshaykolo