A <Svg /> element for react-native that renders Svg images using SVGKit

Usage no npm install needed!

<script type="module">
  import reactNativeSvgMaintained from '';



Render SVG images or write your own in-line and animate them, fun!

How to use it

  • npm i react-native-svg --save
  • cd node_modules/react-native-svg/Libraries/ && git clone
  • Then add RNSVg.Xcodeproj to your Libraries, and libRNSvg.a to your linked binaries.
  • Also add libxmyl2.2.dylib (libxml2.2.tbd for iOS9) to your linked binaries.
  • var Svg = require('react-native-svg'); var Path = Svg.Path


Wave.js and ReactLogo.js for examples!

Example code result Example code result

Example code result This chart renders from a source file, but I'm sure that a backend could be made for d3/xkcd to do this for us live

Uses SVGKit to do all of the hard work.


  • Hit detection and events on individual SVG composites (Path, Line, etc)
  • Component for every SVG element: ‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘polyline’, ‘rect’, etc..
  • Load source over HTTP
  • Look at performance..
  • Add animations to morph from one svg to another like this
  • Add support for "drawing" animations like this