React Native SVG — Scalable Vector Graphics for Mobile

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