How to render svg image in React-Native?

Question

Please try to help me! I need to render svg image from my folder "project/assest/images/test.svg" on android and ios view.

I have tried :

Solution 1 : <Image source={imagePath}></Image>

Solution 2 :

import SvgUri from 'react-native-svg-uri';
 <View>
    <SvgUri
      width="200"
      height="200"
      source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
    />
  </View>

Solution 3 : First i should, convert svg file to png,jpeg then render simple image, but that very weired way on view

Please help, what did i wrong in this.

score 8 · Answer 1 · answered Nov 28 '19 at 05:31

8

You can also try react-native-svg package for SVG

For Example --

import * as React from 'react';
import { SvgUri } from 'react-native-svg';

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
  />
);

answered Nov 28 '19 at 05:31

Vipul

896
7
14

1

Thanks, I'll try this Happy coding! – Kunvar Singh Nov 28 '19 at 06:06
Make sure to check out the docs of the above mentioned package react-native-svg. It offers basically any possible way to use an svg. You can also pass svg as string to one of the components it brings, which I wasn't aware and didn't find through search engines, just in the docs itself. – Wu Wei Jan 28 '23 at 12:03

score -1 · Answer 2 · answered Nov 28 '19 at 05:25

-1

You can try with this

<SvgUri width="200" height="200" source={require('./project/assest/images/test.svg')} />

May this will help you

answered Nov 28 '19 at 05:25

Vishal Rabadiya

495
5
24

Thanks, I'll try this too – Kunvar Singh Nov 28 '19 at 06:07
If we are using image from url, then we directly assign uri. For image which is inside our folder we have to require in – Vishal Rabadiya Nov 28 '19 at 06:22

score -2 · Answer 3 · answered Nov 28 '19 at 07:16

here are two ways to use SVG in react-native.
one way is to translate the SVG to JSX use this site.
the other way is to use a font instead of SVG directly:

firstly, use SVG files to generate font. I use this site. it is fontello.
then I use react-native-vector-icons to generate icon. for more details, you can see its API

How to render svg image in React-Native?

3 Answers3