react-native-svg is built to provide a SVG interface to react native on both iOS and Android.
With Expo, this is pre-installed. Jump ahead to Usage
Install library from
npm install react-native-svg --save
Link native code
react-native link react-native-svg
A bug in react-native currently links the tvOS library into the iOS project as well.
Follow the instructions here: https://github.com/react-native-community/react-native-svg/issues/544
npm install react-native-svg --save
Append the following lines to
include ':react-native-svg' project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
Insert the following lines inside the dependencies block in
Open up `android/app/src/main/java/[...]/MainApplication.java
import com.horcrux.svg.SvgPackage;to the imports at the top of the file
new SvgPackage()to the list returned by the
getPackages()method. Add a comma to the previous item if there's already something there.
To install react-native-svg on iOS visit the link referenced above or do the following:
Alternatively, you can use CocoaPods to manage your native (Objective-C and Swift) dependencies:
pod 'RNSVG', :path => '../node_modules/react-native-svg'
Here's a simple example. To render output like this:
Use the following code:
|fill||'#000'||The fill prop refers to the color inside the shape.|
|fillOpacity||1||This prop specifies the opacity of the color or the content the current object is filled with.|
|fillRule||nonzero||The fillRule prop determines what side of a path is inside a shape, which determines how fill will paint the shape, can be
|stroke||'none'||The stroke prop controls how the outline of a shape appears.|
|strokeWidth||1||The strokeWidth prop specifies the width of the outline on the current object.|
|strokeOpacity||1||The strokeOpacity prop specifies the opacity of the outline on the current object.|
|strokeLinecap||'square'||The strokeLinecap prop specifies the shape to be used at the end of open subpaths when they are stroked. Can be either
|strokeLinejoin||'miter'||The strokeLinejoin prop specifies the shape to be used at the corners of paths or basic shapes when they are stroked. Can be either
|strokeDasharray||||The strokeDasharray prop controls the pattern of dashes and gaps used to stroke paths.|
|strokeDashoffset||null||The strokeDashoffset prop specifies the distance into the dash pattern to start the dash.|
|x||0||Translate distance on x-axis.|
|y||0||Translate distance on y-axis.|
|rotation||0||Rotation degree value on the current object.|
|scale||1||Scale value on the current object.|
|origin||0, 0||Transform origin coordinates for the current object.|
|originX||0||Transform originX coordinates for the current object.|
|originY||0||Transform originY coordinates for the current object.|
The element is used to create a rectangle and variations of a rectangle shape:
The element is used to create a circle:
The element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
The element is an SVG basic shape, used to create a line connecting two points.
The element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
The element is used to create any shape that consists of only straight lines:
The following commands are available for path data:
Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
The element is used to define text.
The element is used to draw multiple lines of text in SVG. Rather than having to position each line of text absolutely, the element makes it possible to position a line of text relatively to the previous line of text.
tspan line 1tspan line 2tspan line 3123456789adelta on text
In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a
We go up and down,then up again
The element is a container used to group other SVG elements. Transformations applied to the g element are performed on all of its child elements, and any of its props are inherited by its child elements. It can also group multiple elements to be referenced later with the <Use /> element.
Text grouped with shapes
The element can reuse an SVG shape from elsewhere in the SVG document, including elements and elements. The reused shape can be defined inside the <Defs> element (which makes the shape invisible until used) or outside.
This example shows a element defined inside a <Defs> element. This makes the invisible unless referenced by a element.
Before the element can be referenced, it must have an ID set on it via its id prop. The element references the element via its
href prop. Notice the # in front of the ID in the prop value.
The element specifies where to show the reused shapes via its x and y props. Notice that the shapes inside the element are located at 0,0. That is done because their position is added to the position specified in the element.
The SVG element is used to define reusable symbols. The shapes nested inside a are not displayed unless referenced by a element.
The element is used to embed definitions that can be reused inside an SVG image. For instance, you can group SVG shapes together and reuse them as a single shape.
The element allows a raster image to be included in an Svg componenet.
The SVG element defines a clipping path. A clipping path is used/referenced using the clipPath property
The element is used to define a linear gradient. The element must be nested within a <Defs> tag. The <Defs> tag is short for definitions and contains definition of special elements (such as gradients).
Linear gradients can be defined as horizontal, vertical or angular gradients:
NOTICE: LinearGradient also supports percentage as prop:
This result is same as the example before. But it's recommend to use exact number instead; it has performance advantages over using percentages.
The element is used to define a radial gradient. The element must be nested within a <Defs> tag. The <Defs> tag is short for definitions and contains definition of special elements (such as gradients).
Touch events are supported in react-native-svg. These include:
You can use these events to provide interactivity to your react-native-svg components.
alert('Press on Circle')}/>
For more examples of touch in action, checkout the TouchEvents.js examples.
git clone https://github.com/magicismight/react-native-svg-example.gitcd react-native-svg-examplenpm i# run Android: react-native run-android# run iOS: react-native run-ios