##### On iOS we should add import `ART` library into your project
To add ART.xcodeproj find the file located in react-native/Libraries/ART/ART.xcodeproj and just drag it over to the Libraries section in XCode. That should look like so
Next we’ll link the binary.
With the root project selected on the left, select `Build Phases` from the center view. There will be a section called “Link Binary With Libraries”, expand it, press the + and select `libART.a`
Like so
([Getting react art running on react native](http://browniefed.com/blog/2015/05/03/getting-react-art-running-on-react-native/))
##### On android
react-native\`s `ART` for android is shipped within react-native@0.18.0
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
```
<Svg
height="100"
width="110"
>
<Ellipse
cx="55"
cy="55"
rx="50"
ry="30"
stroke="purple"
strokeWidth="2"
fill="yellow"
/>
</Svg>
```
Code explanation:
* The cx attribute defines the x coordinate of the center of the ellipse
* The cy attribute defines the y coordinate of the center of the ellipse
The following commands are available for path data:
* M = moveto
* L = lineto
* H = horizontal lineto
* V = vertical lineto
* C = curveto
* S = smooth curveto
* Q = quadratic Bézier curve
* T = smooth quadratic Bézier curveto
* A = elliptical Arc
* Z = closepath
`Note:` All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
The <G> 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 attributes are inherited by its child elements. It can also group multiple elements to be referenced later with the [<Use />](#use) element.
Before the <G> element can be referenced, it must have an ID set on it via its id attribute. The <Use> element references the <G> element via its `href` prop. Notice the # in front of the ID in the prop value.
The <Use> element specifies where to show the reused shapes via its x and y props. Notice that the shapes inside the <G> element are located at 0,0. That is done because their position is added to the position specified in the <Use> element.
##### Symbol
The SVG <Symbol> element is used to define reusable symbols. The shapes nested inside a <Symbol> are not displayed unless referenced by a <Use> element.
The <Defs> 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.
##### LinearGradient
The <LinearGradient> element is used to define a linear gradient.
The <LinearGradient> element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#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:
* Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
* Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
* Angular gradients are created when x1 and x2 differ and y1 and y2 differ
* The id attribute of the <linearGradient> tag defines a unique name for the gradient
* The x1, x2, y1,y2 attributes of the <linearGradient> tag define the start and end position of the gradient
* The color range for a gradient can be composed of two or more colors. Each color is specified with a <Stop> tag. The offset attribute is used to define where the gradient color begin and end
* The fill attribute links the ellipse element to the gradient
But I recommend you to use exact number instead, it has more performance advantages while using number instead of percentage.
##### RadialGradient
The <RadialGradient> element is used to define a radial gradient.
The <RadialGradient> element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients).
* The id attribute of the <radialGradient> tag defines a unique name for the gradient
* The cx, cy and r attributes define the outermost circle and the fx and fy define the innermost circle
* The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end
* The fill attribute links the ellipse element to the gradient
