# react-native-svg: SVG rendering for React Native, Expo and the web > react-native-svg renders SVG elements as native views on iOS, Android, macOS and Windows, with a compatibility layer for the web. It is the standard answer when you need vector icons, charts or illustrations inside a React Native app. **software-mansion/react-native-svg** — SVG library for React Native, React Native Web, and plain React web projects. - Repository: https://github.com/software-mansion/react-native-svg - Stars: 8,002 · Forks: 1,201 - Language: TypeScript - License: MIT - Published: 2026-09-22 · Updated: 2026-09-22 · Language: en - Canonical page: https://hysenlabs.com/projects/software-mansion-react-native-svg ## What react-native-svg solves, and for whom React Native has no built-in SVG renderer. A bitmap asset at three densities is three files and still blurs when scaled. react-native-svg fills that gap by exposing SVG elements (Rect, Circle, Line, Polyline, Polygon, G and others, per the feature list) as React components that map onto native drawing code on iOS, Android, macOS and Windows, plus a compatibility layer for the web. The audience is anyone building a mobile or cross-platform React app who needs icons, charts, logos or illustrations that stay sharp at any size and can be driven by props or state. The README points at svgr for converting existing SVG code, and the repository ships an example app under apps/common/example for reference. If your design system already produces SVG, this library is the shortest path from that output to a rendered screen. ## How the native rendering actually works The package is not a single JavaScript file. The repository layout shows android/, apple/, windows/ and common/ directories alongside src/, and package.json declares a react-native entry pointing at src/index.ts. That means Metro resolves the TypeScript source directly in a React Native build, while lib/commonjs and lib/module hold the compiled output for other bundlers. The native side is wired through RNSVG.podspec on Apple platforms and react-native.config.js for autolinking, so the JavaScript components you write are extracted and handed to platform code that performs the drawing. Two build details are visible in package.json. The peg script runs pegjs and peggy over grammar files such as src/lib/extract/transform.peg to generate parsers for SVG path and filter strings, so path data is parsed into a form the native layer can consume rather than being interpreted at runtime by a browser engine. The other detail is that the published package includes android, apple, common, lib, src, css, filter-image, windows and RNSVG.podspec, which is why installation is not purely a JavaScript concern: the native source ships with the npm package and must be compiled into your app. ## Installing react-native-svg and rendering a first shape In an Expo project the README states that the Expo client app already bundles the native code, so only the JavaScript needs installing. The documented command is npx expo install react-native-svg, which resolves a version compatible with your Expo SDK. ```bash npx expo install react-native-svg ``` For a bare react-native-cli project the README gives npm or yarn, followed by a CocoaPods step for iOS. The pod install must run inside the ios directory, and the README shows it chained with a cd back out. ```bash npm install react-native-svg cd ios && pod install ``` After installation, the README defers component-level usage to USAGE.md in the repository rather than inlining examples. The feature list names Rect, Circle, Line, Polyline, Polygon and G as supported elements, so a minimal first screen is a container with a fixed size holding one of those elements. Two things to watch on the first run: on iOS, skipping pod install leaves the native module unresolved, and on Windows the README's separate instructions require npx react-native-windows-init --overwrite followed by react-native run-windows. ```bash npx react-native-windows-init --overwrite react-native run-windows ``` If the first render looks wrong, the README's troubleshooting path is explicit: create a clean project with the latest react-native and react-native-svg, reproduce in App.js, and run react-native run-ios or react-native run-android before filing anything. ## Version compatibility is the real adoption gate The README carries two compatibility tables, and they are the most consequential content in the document. The general table maps react-native-svg 15.0.0 and above to react-native 0.70.0 and above, 15.8.0 to 0.73.0, and 15.13.0 to 0.78.0. The Fabric table, covering the new rendering system, starts at react-native-svg 13.0.0 against react-native 0.69.0 and states plainly that earlier versions cannot be supported because of breaking changes in configuration. Read together, these tables mean an app pinned to an older React Native cannot simply take the newest release. The current published version is 15.15.5, so a project on React Native 0.72 would need to stay on a 15.x line below 15.13.0 to remain inside the documented range. That is a normal constraint for a library with native code, but it is worth checking before upgrading, because the failure mode is a build error rather than a runtime warning. The README does not document rollback steps, so downgrading is a matter of pinning the version yourself and reinstalling pods. ## Known limitations and cases where it is the wrong tool The README's Known issues section contains exactly one entry: the focus point of RadialGradient cannot be applied on Android. That is a narrow, platform-specific gap, but it is the only limitation the project documents, which means other divergences from the SVG spec are not enumerated there. The README instead directs anyone who suspects a spec conformance bug to test the same component in a react-native-web project using a linked CodeSandbox and compare browser rendering, and to open an issue if an evergreen browser renders the content better. That instruction reveals the intended failure model: this library aims to match browser behaviour, but the README does not claim full spec coverage, and the feature list says most elements and properties, not all. If your workload depends on SVG filters, text layout, or gradient behaviour that varies by platform, you are outside what the documentation guarantees. The library is also the wrong choice when you do not need vector output at all. For a single fixed-size bitmap logo, the platform Image component is simpler and adds no native dependency. And because the package ships native source for four platforms, it is a heavier install than a pure JavaScript drawing helper, which matters if you are targeting web only with no React Native runtime. ## react-native-svg compared with react-native-skia The comparison people search for most is react-native-svg versus react-native-skia, and the two take different approaches. react-native-svg works at the level of SVG elements: you write Rect, Circle, Path and similar components, and the library translates them into native drawing calls. Your source of truth is an SVG document, which is why the README recommends svgr for converting existing SVG code into components. Skia exposes a lower-level canvas and drawing API rather than an SVG element tree. That gives more direct control over custom drawing and effects, but it means you compose shapes imperatively instead of declaring them as SVG tags. The practical difference for a team: if your assets come from a design tool as SVG and you want them rendered as-is, react-native-svg matches that workflow. If you are writing bespoke drawing code and want to manage the canvas yourself, the SVG element model is an abstraction you would be working around. The README does not compare the two, and this library's own positioning is narrower: it provides SVG support to React Native on five platforms. ## Maintenance, licence and upgrade cost The repository is not archived and the last push was on 2026-09-11, so the project is being worked on. Releases in 2026 include v15.15.3 on 2026-02-09, v15.15.4 on 2026-03-18 and v15.15.5 on 2026-05-12, alongside the later pushes to main. The README states that the library is maintained by Software Mansion, a software agency that describes itself as a core React Native contributor. The licence is MIT, declared both in package.json and in the repository's LICENSE file. MIT is permissive: it allows commercial use and modification, and it requires that the copyright notice and permission notice be preserved in copies or substantial portions. That is a summary of the licence text, not legal advice; if your organization has specific obligations around attribution or redistribution, have counsel read the LICENSE file. Upgrade cost is dominated by the native build. Every version bump that touches android/, apple/ or windows/ means recompiling, and on iOS that means running pod install again. The peg script in package.json also indicates that generated parsers are checked into src/, so contributors editing grammar files must regenerate them. For consumers, the practical cost is the compatibility table: a React Native upgrade and a react-native-svg upgrade usually have to move together, and the README's version rows tell you which pairs are supported. ## Conclusion Adopt react-native-svg if you are on React Native 0.78 or newer and need vector graphics that scale across iOS, Android and the web from one component tree; it is maintained by Software Mansion and has shipped 15.x releases through 2026. Do not adopt it if your target is an older React Native version, since the compatibility table gates 15.13.0 and above on 0.78.0, or if you only need to display a remote SVG file, which the README does not cover. Before writing components, check the version row that matches your react-native version and confirm that your platform's native build runs pod install cleanly. ## FAQ ### How do I install react-native-svg in an Expo project? The README says the Expo client app already includes the native code, so you only install the JavaScript with npx expo install react-native-svg. It links to the Expo docs for more detail. ### What is react-native-svg? It is an SVG library for React Native, React Native Web and plain React web projects, according to the repository description. The README states it provides SVG support to React Native on iOS, Android, macOS and Windows, plus a compatibility layer for the web. ### How can I convert an SVG file to react-native-svg components? The README lists easy conversion of SVG code to react-native-svg as a feature and links to svgr for doing it. The README itself does not walk through the conversion step by step. ### How do I use react-native-svg in a component? The README defers usage to USAGE.md in the repository rather than inlining examples, and the feature list names Rect, Circle, Line, Polyline, Polygon and G among the supported elements. The repository also ships an example app under apps/common/example. ### Is react-native-svg an alternative to react-native-skia? The README does not compare the two. It positions the project as SVG support for React Native on iOS, Android, macOS and Windows with a web compatibility layer, and names svgr as the way to convert existing SVG code into components. ## Sources - [Issues](https://github.com/software-mansion/react-native-svg/issues) - [License: MIT](https://github.com/software-mansion/react-native-svg/blob/main/LICENSE) - [README](https://github.com/software-mansion/react-native-svg/blob/main/README.md) - [Releases](https://github.com/software-mansion/react-native-svg/releases) - [software-mansion/react-native-svg on GitHub](https://github.com/software-mansion/react-native-svg) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/software-mansion-react-native-svg