SVG 转 React Native 转换器

在线将 SVG 转换为 React Native SvgXml

预览 SVG 源码并复制可用于 react-native-svg 的 SvgXml 组件片段，快速准备移动端图标资源。

转换 SVG 为 React Native此页面默认打开 React Native 输出。

把 Web SVG 图标迁移到移动应用代码中。

加入 react-native-svg 前先确认 SVG 能正常渲染。

向移动端工程师交付紧凑的 SvgXml 片段。

SVG Code

XML

React Native

SVG Code

XML

预览会移除脚本和内联事件属性，并在沙盒中渲染 SVG。

粘贴来自 Figma、Illustrator 或现有代码库的 SVG 标记。

在预览中确认 SVG 渲染正确。

复制 React Native SvgXml 片段，并在应用中安装 react-native-svg。

面向 SvgXml 的输出

生成片段会保留 SVG 标记，并通过 react-native-svg 的 SvgXml 进行渲染。

设计师和前端工程师可以检查标记，并把移动端友好的代码交给 React Native 项目。

转换在浏览器本地运行，私有草稿图标不需要离开设备。

需要。生成的 React Native 片段使用 react-native-svg 的 SvgXml。

多数简单图标可以正常工作，但复杂滤镜、外部引用和浏览器专有特性可能需要手动调整。

可以。使用工具面板中的下载按钮即可保存当前 SVG 源码。