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>
);
}Fixes touch handling, emoji rendering in Text, and ForeignObject layout/re-render issues; deprecates unused fontData prop.
- –Remove fontData prop from Text components as it is now deprecated and unused.
- –Verify ForeignObject rendering and transforms work correctly after layout and re-render fixes on both platforms.
Performance improvements on iOS and Windows; fixes iOS memory leaks, percentage length handling, and nested SVG property propagation.
- –Upgrade to resolve iOS memory leaks in CGPathRef and opacity handling that could degrade performance over time.
- –Verify percentage-based lengths and nested Svg element properties now propagate correctly after fixes.
Drops support for React Native <0.78; restores macOS support and fixes Android 10 null-pointer crash.
- –Upgrade to React Native 0.78 or later before installing this version.
- –Fixes null-pointer exception in GroupView on Android 10 and older when drawing bitmaps.
See how people are using react-native-svg
Top in Mobile & Desktop
Related Repositories
Discover similar tools and frameworks used by developers
src.next
Archived Chromium fork for Android with extension support.
zxing
Multi-format 1D/2D barcode decoder in Java.
react-native-vector-icons
Vector icon fonts rendered as native React Native components.
react-native-maps
Cross-platform React Native bridge to native map SDKs.
expo
React Native framework with managed tooling and runtime.