react-native-svg: SVG support for React Native
Native SVG rendering for React Native applications.
Learn more about React Native SVG
react-native-svg is a library that provides SVG element rendering for React Native and related frameworks. It implements native SVG support through platform-specific code on iOS, Android, macOS, and Windows, while offering a JavaScript-based compatibility layer for web environments. The library supports most standard SVG elements including shapes, paths, gradients, and grouping constructs. It enables developers to render vector graphics natively on mobile platforms and through web standards on browser-based implementations.
Native SVG Rendering
Platform-specific implementations render SVG elements natively on iOS, Android, macOS, and Windows rather than using web views or canvas fallbacks. Delivers consistent vector graphics performance across mobile and desktop platforms.
SVG-to-JSX Conversion
Compatible with automated tools that transform SVG files directly into react-native-svg components. Minimizes manual code adjustments when migrating existing SVG assets into React Native projects.
Fabric Architecture Support
Fully compatible with React Native's new Fabric renderer for improved performance and synchronous layout. Enables smooth SVG animations and transitions with the modernized rendering pipeline.
import Svg, { Circle } from 'react-native-svg';
export default function Logo() {
return (
<Svg height="100" width="100">
<Circle
cx="50"
cy="50"
r="40"
fill="#3b82f6"
stroke="#1e40af"
strokeWidth="3"
/>
</Svg>
);
}Patch version that fixes performance regression accidentally introduced in 15.15.0.
- –Revert "Fix: propagate elements metrics to their shadow nodes"
- –fix: make ForeignObject ordinary YogaLayoutableShadowNode
- –test: Add complex examples to measure performance
- –fix: set absolute fill position in shadow nodes to fix onPress hit test in js
Improves touch handling, emoji support in Text, and ForeignObject rendering.
- –fix: parse doctype correctly
- –fix: null object reference inside group getPath
- –fix: CMake project name
- –feat: Add 16kb page size support to CMake
- –fix: setting letterSpacing prop
Performance improvements on iOS and Windows with property handling fixes.
- –fix: update supported RN versions in docs
- –chore: Upgrade tests app
- –fix: propagate properties to nested Svg elements
- –fix: add proper handling of percentage lengths
- –chore: bump fabric-example react-native version to 0.81.4
See how people are using React Native SVG
Top in Mobile & Desktop
Related Repositories
Discover similar tools and frameworks used by developers
React Native Maps
Cross-platform React Native bridge to native map SDKs.
Telegram Desktop
Official Telegram desktop client for Windows, macOS, and Linux using the MTProto secure protocol.
Flutter
Google's SDK compiling Dart to native multi-platform applications.
HakuNeko
Cross-platform manga downloader with multi-source support and offline reading capabilities.
Shizuku
Android framework enabling apps to access system APIs with elevated privileges via ADB or root.