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.

Vipul · Accepted Answer · 2019-11-28 05:31:17Z

10

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, 2019 at 5:31

Vipul

9317 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kunvar Singh Over a year ago

Thanks, I'll try this Happy coding!

Wu Wei Over a year ago

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.

Vishal Rabadiya · Accepted Answer · 2019-11-28 05:25:42Z

-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, 2019 at 5:25

Vishal Rabadiya

5155 silver badges24 bronze badges

1 Comment

Vishal Rabadiya Over a year ago

If we are using image from url, then we directly assign uri. For image which is inside our folder we have to require in <Image tag also.

Lenoarod · Accepted Answer · 2019-11-28 07:16:25Z

-2

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

answered Nov 28, 2019 at 7:16

Lenoarod

3,63116 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to render svg image in React-Native?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related