React Native display SVG from a file

Question

How do I display an SVG image that I require() in React Native.

https://github.com/brentvatne/react-native-svgkit Is not under active development.
https://github.com/magicismight/react-native-svg Can't figure out how to load a file.
WebView (or Bridged WebView) Can't figure out how to load a required file.

What's the best way to just display the image (don't need to manipulate it).

Or should I just be converting it to a png instead?

Possible duplicate of [SVG use in React Native project](https://stackoverflow.com/questions/34716281/svg-use-in-react-native-project) — Ivan Chernykh, Sep 17 '18 at 12:52

score 3 · Answer 1 · answered Jun 01 '16 at 21:29

3

Converting to a png is the easiest solution. SVG Images are listed in ProductPains as a pain point and you may upvote it, if you see the need, but for now there is no great out of the box solution for svg images.

answered Jun 01 '16 at 21:29

Daniel Schmidt

11,605
5
38
70

score 3 · Answer 2 · answered Jun 02 '16 at 17:19

You can hack around this using a webview. I also had to put my SVGs as strings in .js files (which is not good at all). But it works pretty reliably. There is a split second where they show up as white before the SVG loads, but it's good enough for me.

Roughly something like:

import React, { View, WebView } from 'react-native'
import s from 'string'

const firstHtml = '<html><head><style>html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; left:0; height:100%; width:100% }</style></head><body>'
const lastHtml = '</body></html>'
export default (props) =>
  <View style={props.containerStyle}>
    <WebView
      style={[{ width: 200, height: 100, backgroundColor: props.backgroundColor }, normalizeStyle(props.style)]}
      scrollEnabled={false}
      source={{ html: `${firstHtml}${props.svgContent}${lastHtml}` }}
    />
  </View>

Thanks! I've published an npm package for this at `react-native-remote-svg` — Shiva Nandan, Dec 09 '17 at 06:39

score 2 · Answer 3 · answered Sep 17 '18 at 12:32

You can display small SVG file as data using this library,

Note: Large SVG images are not rendering properly.

npm i react-native-remote-svg

import Image from 'react-native-remote-svg'

<Image
 source={{
uri: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" 
width="100px" height="100px"  viewBox="0 0 100 100">
     <ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" 
fill="green"  stroke="#00FF00" stroke-width ="2" />
   </svg>`
}}
style={{ width: 100, height: 100}}
/>

If you want to display any size of images remotely with above library and then do this,

<Image
  source={{ uri: 'https://example.com/my-pic.svg' }}
  style={{ width: 200, height: 532}}
/>

But if you used this one for display the local svg file, then you will get some issues in android when you bundle and put the release.

import Image from 'react-native-remote-svg'
<Image source={require('./image.svg')} />

or you can use Icomoon (For small SVG images/Icons),

Recommended: Use Icomoon for Icons and Small SVG Images

See this video to setup the icomoon in react native

Don't use this plugin `react-native-remote-svg` since it has serious bug in Android in Production mode. iOS is fine though. — somnathbm, Oct 09 '18 at 06:25
@somnathbm yeah. But this bug is only for local svg images. If you use for remote SVGs then it works fine. — Asbar Ali, Oct 09 '18 at 07:18

React Native display SVG from a file

3 Answers3

Linked