Source: https://docs.expo.dev/versions/v54.0.0/sdk/svg

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 54

Archive Expo Snack Discord and Forums Newsletter

react-native-svg

GitHub npm

A library that allows using SVGs in your app.

GitHub npm

Android

iOS

macOS

tvOS

Web

Bundled version:

15.12.1

Copy page

react-native-svg allows you to use SVGs in your app, with support for interactivity and animation.

Installation

Terminal

Copy

- npx expo install react-native-svg

If you are installing this in an existing React Native app , make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

API

import * as Svg from 'react-native-svg';

`Svg`

A set of drawing primitives such as Circle, Rect, Path, ClipPath, and Polygon. It supports most SVG elements and properties. The implementation is provided by react-native-svg , and documentation is provided in that repository.

SVG

Copy

Open in Snack

import Svg, { Circle, Rect } from 'react-native-svg'; export default function SvgComponent(props) { return ( <Svg height="50%" width="50%" viewBox="0 0 100 100" {...props}> <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" /> <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" /> </Svg> ); }

Tips

Here are some helpful links that will get you moving fast!

Looking for SVGs? Try the noun project .
Create or modify your own SVGs for free using Figma .
Optimize your SVG with SVGOMG . This will make the code smaller and easier to work with. Be sure not to remove the viewbox for best results on Android.
Convert your SVG to an Expo component in the browser using SVGR .

Learn more

Visit official documentation

Get full information on API and its usage.