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 (#2802)" by @jakex7 in
- –fix: make ForeignObject ordinary YogaLayoutableShadowNode by @jakex7 in
- –test: Add complex examples to measure performance by @jakex7 in
- –fix: set absolute fill position in shadow nodes to fix onPress hit test in js by @jakex7 in
In this version, we've improved handling touches, emojis in `Text`, and rendering elements in `ForeignObject`, along with numerous other fixes and enh
- –fix: parse doctype correctly by @otech47 in
- –fix: null object reference inside group getPath by @kacperzolkiewski in
- –fix: CMake project name by @jakex7 in
- –feat: Add 16kb page size support to CMake by @jakex7 in
- –fix: setting letterSpacing prop by @kacperzolkiewski in
This version improves performance on iOS and Windows, and includes some minor fixes and improvements.
- –fix: update supported RN versions in docs by @kacperzolkiewski in
- –chore: Upgrade tests app by @kacperzolkiewski in
- –fix: propagate properties to nested Svg elements by @kacperzolkiewski in
- –fix: add proper handling of percentage lengths by @kacperzolkiewski in
- –chore: bump fabric-example react-native version to 0.81.4 by @kacperzolkiewski in
See how people are using react-native-svg
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.