# React Native SVG — Scalable Vector Graphics for Mobile

> An SVG rendering library for React Native that provides a full implementation of the SVG spec via native platform renderers, supporting paths, gradients, masks, filters, text, and animations in iOS and Android apps.

## Install

Save as a script file and run:

# React Native SVG — Scalable Vector Graphics for Mobile

## Quick Use
```bash
npm install react-native-svg
npx pod-install
```
```jsx
import Svg, { Circle, Rect, Path } from 'react-native-svg';
<Svg height="100" width="100" viewBox="0 0 100 100">
  <Circle cx="50" cy="50" r="40" stroke="blue" strokeWidth="2" fill="lightblue" />
  <Rect x="20" y="20" width="60" height="60" rx="5" fill="rgba(255,0,0,0.3)" />
</Svg>
```

## Introduction
react-native-svg is the standard SVG implementation for React Native. It renders SVG elements using native platform APIs (CoreGraphics on iOS, android.graphics on Android), producing crisp vector graphics that scale to any screen density without pixelation.

## What React Native SVG Does
- Renders all major SVG elements: path, circle, rect, line, polygon, polyline, ellipse, and text
- Supports linear and radial gradients, patterns, clip paths, and masks
- Handles SVG transforms (translate, rotate, scale, skew) and viewBox coordinate systems
- Provides animated SVG via integration with Reanimated or the built-in Animated API
- Enables touch events on individual SVG elements for interactive graphics

## Architecture Overview
Each SVG element in JSX maps to a native shadow node. On iOS, elements are drawn using CoreGraphics paths and fills within a CALayer hierarchy. On Android, the library uses Canvas and Paint objects to render SVG instructions. The native view manager reconciles prop changes and re-renders only affected subtrees for performance.

## Self-Hosting & Configuration
- Install via npm and run pod-install for iOS; Android auto-links
- Set the root Svg component's `width`, `height`, and `viewBox` for coordinate mapping
- Use `react-native-svg-transformer` to import .svg files directly as React components
- Configure Metro bundler to resolve .svg extensions through the transformer
- Apply `shouldRasterizeIOS` or `renderToHardwareTextureAndroid` for complex static SVGs

## Key Features
- Full SVG 1.1 spec coverage including defs, use, clipPath, mask, and filter primitives
- Platform-native rendering produces resolution-independent sharp graphics
- SVG transformer enables importing .svg files as React components at build time
- Touch event handling on individual SVG elements for interactive charts and diagrams
- Compatible with popular charting libraries like Victory Native and react-native-chart-kit

## Comparison with Similar Tools
- **@shopify/react-native-skia** — GPU-accelerated with shader support; SVG uses platform renderers
- **WebView with SVG** — renders in a browser context; react-native-svg is native with touch events
- **react-native-canvas** — HTML5 Canvas API wrapper; SVG provides a declarative element model
- **expo-svg** — Expo's re-export of react-native-svg; same library underneath

## FAQ
**Q: Can I import .svg files directly?**
A: Yes. Install react-native-svg-transformer and configure Metro to use it for .svg extensions.

**Q: Does it work with Animated API?**
A: Yes. Wrap SVG element props with Animated values using `Animated.createAnimatedComponent`.

**Q: How does performance compare to Skia?**
A: react-native-svg uses CPU rendering and is optimal for static or lightly animated SVGs. For heavy animation or shader effects, Skia is faster.

**Q: Is it included in Expo?**
A: Yes. react-native-svg ships with the Expo SDK in both managed and bare workflows.

## Sources
- https://github.com/software-mansion/react-native-svg
- https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

---
Source: https://tokrepo.com/en/workflows/asset-780a1158
Author: Script Depot