React native svg not rendered correct

Question

We are working on a Vue/ReactNative project and have the strange phenomenon that in the Reactnative component react-native-svg (version 12.1.0) the SVG is not rendered correctly. In the browser it is rendered correctly.

The SVG itself was created with Adobe and uses CSS styles. Are not all CSS elements supported ?

We use the SVGs dynamically from an external Uri and not as a static file.

<svg-css-uri
    :key="'image_' + selectedItem.id"
    :height="200"
    :uri="selectedItem.picture.url"
  ></svg-css-uri>
</view>
    
    
mystyle: {
  marginLeft: 25,
  flex: 0.5,
  justifyContent: "center",
}

should like this

looks like this (wrong)

Can you somehow post a download link of your svg file? I would test it in my environment — Arbnor, Mar 24 '21 at 21:28
@Arbnor sure here is the direct link https://msoss-app.sos-ch-dk-2.exo.io/Viola_O_cd75f584f9.svg — pbachman, Mar 24 '21 at 21:33

score 3 · Accepted Answer · answered Mar 25 '21 at 02:08

3

There are 2 ways to use SVG images using react-native-svg

1. Converting to react components

You can convert your svg image to react components by using this playground.

Note: there is also a possibility to convert the image via CLI but I prefer playground as it is easier.

2. Using SVG files directly

For this, you might want to flow the steps mentioned in the docs here

answered Mar 25 '21 at 02:08

Marmik Thakkar

108
1
6

We use the SVGs dynamically from an external Uri, did I understand it correctly that we can use "react-native-svg-transformer" for our case ? – pbachman Mar 25 '21 at 06:03
1

May be you should try this inside `.svgrrc` https://github.com/kristerkari/react-native-svg-transformer/issues/11#issuecomment-484056625 – Marmik Thakkar Mar 25 '21 at 09:35

score 2 · Answer 2 · answered Mar 24 '21 at 22:07

2

I was able to render the SVG on iOS under React Native as follows: https://www.codepile.net/pile/7AP5vlmn (use this code)

Using https://react-svgr.com/playground/, I converted the SVG into a React Native component. You can then easily import and render from a .js file. This is how it looks on the iOS Simulator:

answered Mar 24 '21 at 22:07

Arbnor

2,190
18
26

1

We use the SVGs dynamically from an external Uri, we don't use it as a static asset. is there way to do it on-the-fly ? – pbachman Mar 25 '21 at 06:05

React native svg not rendered correct

2 Answers2

1. Converting to react components

2. Using SVG files directly