Breaks when you are using with older version of RN: See: software-mansion/react-native-svg#188

original

in react native

Hello, thanks for a great library!

I've been having some trouble with svg file placement.
First I tried to store it in the same folder as images, then Android build complains that the files must be .png or .xml.
So I tried to store it in res/raw folder, but I can't access the files in the raw folder from React Native.

Where should I be storing the svg files?

Expo already includes/supports react-native-svg. Is there anyway this package could be updated to support Expo?

Such amazing work to make this! Do you know if it will support an animated SVG?

Hey guys,
It doesn't render https://gist.github.com/olkeene/9719da22ef6ee8dbebb8d221a4dec5bd
No errors or warnings.

Thanks for the help 😄

Is there a way to set common SVG properties?

This is my React Native Component, which correctly loads the SVG. However, no matter what I do, I cannot change the stroke color. Even if I set the SVG stroke color within the SVG file it will still be black when imported as a react component.

import React from 'react'
import { View } from 'react-native'

import SvgUri from 'react-native-svg-uri'
import Account from './svg/account.svg'

const Icon = () => (
  <View>
    <SvgUri
      width='32'
      height='32'
      stroke='#FF0000'
      svgXmlData={Account}
    />
  </View>
);

export default Icon

This is the contents of the SVG file

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" enable-background="new 0 0 48 48" x="0px" y="0px" width="48px" height="48px" xml:space="preserve">
    <path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M23.7 28.7c3.4 0 5.6-4.6 5.9-5.7 0-0.1 0.5-0.3 0.6-0.4 1.8-3.3-0.2-3.7-0.2-3.7s0.1-1.7-0.3-3.4c0 0-0.3-4-6-4 -5.7 0-6 4-6 4 -0.4 1.6-0.3 3.4-0.3 3.4s-2 0.4-0.2 3.7c0 0.1 0.5 0.3 0.6 0.4C18.1 24.1 20.3 28.7 23.7 28.7z" />
    <path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M10.2 38.2c0-5 3.2-7.3 6.7-8.4 2.4-0.8 3.7-2.1 3.7-2.1" />
    <path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M26.8 27.7c0 0 1.3 1.3 3.7 2.1 3.5 1.1 6.4 3.2 6.7 8.7" />
    <circle stroke="#000000" stroke-width="2" fill="none" stroke-linejoin="round" cx="24" cy="24" r="20" />
</svg>

I use the module with local SVG, I have a bad rendering of the SVG with shadow or rotation
Original SVG:

Rendering with Svg uri:

Have you got any idea?

Hello !

I would like to update the fill the fill of a svg. How can I manage to do that with some kind of direct manipulation ?

Thank you !

react-native-svg-uri currently supports a very limited number of attributes supported by react-native-svg because the attributes get explicitly filtered. For example, it is completely legal to specify the fill attribute on the <svg> or <g> elements but because of the filtering react-native-svg-uri won't pass those along to react-native-svg. Is there a reason why this filtering is necessary? Would you consider making a change that would simply copy all the attribute values from an svg file into the corresponding react-native-svg components?

This seems like an entirely different issue than #20 so I made a separate open issue.

Is it possible to change/override/add properties to the SVG using the style (or other) property? Something like <SvgUri style={{ fill="#123456"...?

For instance, I have an SVG with a path and I want to change fill colour to my own colour in the JSX.

Hey, I am using the svg-uri for the react native: 0.40.0 and react-native-svg: 5.1. When i try to render the svg, it throws an error "No Component found for view with name RNSVGViewBox".

TripAdvisor require their ratings logo to be fetched from a remote svg file. This library would be perfect for rendering it in react-native, but the circles get offset to the left:

Original svg: http://www.tripadvisor.com/img/cdsi/img2/ratings/traveler/4.5-11068-5.svg

I was reading the source code and see that the svg element is returned as an meaning that it can not run inside a element from react-native-svg, Would it be possible to make it compatible with elements and render the svg uri inside them? Add first I thought just removing the View element would solve the problem but you can not render nested Svg elements sadly

Hey tried to extend the module a bit for me and tried to add react-native-svg onPress compatibility, so that i can listen for touch on area. I add the listener/onPress property once, but I always run into memory errors:

componentAtts = this.obtainComponentAtts(node, PATH_ATTS);

if(xxxxxxxx){
  componentAtts.onPress = () => alert('Press on Circle');
  return <Path key={i} {...componentAtts}>{childs}</Path>;
}

FATAL EXCEPTION: main
 AndroidRuntime: Process: com.rhinoapp, PID: 16303
 AndroidRuntime: java.lang.OutOfMemoryError: Failed to allocate a 105678412 byte allocation with 16777216 free bytes and 65MB until OOM
AndroidRuntime: 	at dalvik.system.VMRuntime.newNonMovableArray(Native Method)

Any idea? thanks! :)

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform

I've installed this component and tried to use it with my own static file (https://gist.github.com/igongora/686f13f3a9db38f47d47249db1cf1c1a), but for some reason it doesn't work. I get 'TypeError: invalid svg' from the console

Great component right here, congrats!

Maybe you forgot do something with next props

componentWillReceiveProps (nextProps){
    if (nextProps.source) {
        const source = resolveAssetSource(nextProps.source) || {};
        const oldSource = resolveAssetSource(this.props.source) || {};
        if(source.uri !== oldSource.uri){
            this.fecthSVGData(source.uri);
        }
    }
}

I'm testing on one of the lower spec iOS device we want to support (iPhone 4S, iPad 2), and find the drawing performance very slow.

Its very noticeable, especially with a number of SVG images on the page. The thing is they are all the same (its for a star rating component). I wonder if the SVG can be cached as an image and reused?

Issue

I don't see any issues or documentation about base64 encoding support for SVG data. I tried it and it didn't work, but I'm wondering if you have any advice or quick solutions. For now I'll try to decode it manually before passing the string as svgXmlData.

Adding SVG files to my project directly requires them to be duplicated in Android and iOS resources folders, and prevents them from being easily updated using tools like CodePush.

Workaround

MyComponent.js:

import base64 from 'base-64';
import SvgUri from 'react-native-svg-uri';

import iconBase64 from './icon.svg.js';

const iconData = base64.decode(iconBase64);

...

  render() {
    return (
      <SvgUri
        width="80"
        height="80"
        svgXmlData={iconData}
      />
    );
  }

icon.svg.js:

export default 'Zm9vIMKpIGJhciDwnYyGIGJheg==';

(Of course you could just put the decoded XML in that file directly, but that doesn't meet my requirements)

tl;dr: I think the .babelrc needs to be excluded from the npm module.

I've read the current 'best practice' is to ship invalid node modules when they are for RN, but because of how babelrc lookup works, the presence of a .babelrc in this package creates a conflict with React Native's packager's babel config and causes weird runtime errors like facebook/react-native#4844 (this comment is enlightening in particular).

Edit: This commenter makes a good argument for why removing .babelrc isn't necessarily the 'right' fix for this problem, but the proposed solution

...a postinstall script in your top-level app that removes all .babelrc files from your node_modules.

...seems pretty user-hostile and definitely is not what a consumer of an npm package expects.

I have tried to show static svg file.
but nothing have been showed.
here is a my code.

<SvgUri width="30" height="30" source={ require('../../images/setting.svg')} />

please help me.

react-native-svg has a mess of complicated version restrictions:

• react-native-svg >= 3.2.0 only supports react-native >= 0.29.0
• react-native-svg >= 4.2.0 only supports react-native >= 0.32.0
• react-native-svg >= 4.3.0 only supports react-native >= 0.33.0
• react-native-svg >= 4.4.0 only supports react-native >= 0.38.0 and react >= 15.4.0
• react-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0

The primary changes seem to be related to compatibility with react-native, not the api used by this package. It would probably be best if this package used a loose peerDependency instead of depending on react-native-svg directly.

how can I pass the SVG as String directly?

This SVG seems to show up deformed in the app, despite being perfect on SVG testing websites like this and in Chrome. I'm using RN v0.40.0.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="32" height="32">
	<path fill="red" d="M50 9C27.392 9 9 27.392 9 50s18.392 41 41 41 41-18.392 41-41S72.608 9 50 9zm0 6c19.366 0 35 15.634 35 35S69.366 85 50 85 15 69.366 15 50s15.634-35 35-35zM29 43c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm21 0c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm21 0c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7z"/>
</svg>

Some SVG's are no getting correctly rendered in iOS. It is working as expected in iOS.

For the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M8 0C3.582 0 0 3.582 0 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm2.5 9h-3c-.276 0-.5-.224-.5-.5v-5c0-.276.224-.5.5-.5s.5.224.5.5V8h2.5c.276 0 .5.224.5.5s-.224.5-.5.5z"/></svg>

In Android:

In iOS:

Any thoughts how to fix this?

Hi @matc4 the library looks great!

Do you have any plans to support static file sources like:

<SvgUri width={150} height={150} source={require('@images/file.svg')} />

Thanks!

Hi , Thanks for this library i am using it for some time now , and as my application progresses there are some complicated svg that i need to render now and i notice that some of the elements are not correctly rendered.My designer gives them exported from Adobe illustrator , sometimes xmldom parser errors throws out about 'invalid svg' then i have to add some attributes manually like height/width , can you please suggests me a way how to correctly export from Illustrator. will be a big help.

Moreover some of the svgs are missing some elements.
This is the image screenshot taken from browser :

This is from simulator :

I can also paste the svg code here if you want to have a look at it ,
Looking forward to hear from you soon!

Are you going to support react-native-svg 5.2.0 version?

Add a key={i} to each item returned by the createSVGElement function

Loading images is slow and crash,What is the solution?

Hello! I'm super excited about this! I've been waiting for this type of library for a while. Thanks!

I was wondering if you could put a working .svg on the readme so we can check that if we have a problem is or not coming from our svg.

Thanks.

Hai, i am trying to import react-native-svg-uri, after install i wrote some code like this
<SvgUri source = {require('./images/innerBg.svg')} style={{position:'absolute',left:0,width: windowSize.width,height: windowSize.height}}/>
but it throws an error like this

in terminal it show like this

Please give me suggestions that how to solve this error

Hey, as requested in the README, since I found an svg that this library can't load i'm posting it here:
https://commons.wikimedia.org/wiki/File:Human_body_silhouette.svg

I tried both as uri (via https://upload.wikimedia.org/wikipedia/commons/f/f4/Human_body_silhouette.svg ) and as static file and it doesn't work either way.

But the Homer uri works, so I guess is this particular image that isn't... any idea on how to make it work?

PS: thanks for your work :)

I add fill to SVGUri component but is not filling the svg. What I did to make it is added on index.js (on package) on the obtainComponentAtts and do this:

....
if(this.props.fill){
   componentAtts.fill = this.props.fill;
}
return componentAtts;

Why isn't implemented like this? But rather expecting to change the svg element attribute. What if the element doesn't have the fill property? This will make sense in the case the fill should be selective but its not possible with this component.

I see it does have any support the last couple of months. Let me know if I can drop in as a collaborator.

When attempting to generate a signed apk and running with react-native-svg-uri the following exception occurs when starting up the app for the first time:

03-12 18:00:01.133  7044  7064 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
03-12 18:00:01.133  7044  7064 E AndroidRuntime: Process: com.appprototype, PID: 7044
03-12 18:00:01.133  7044  7064 E AndroidRuntime: java.lang.IllegalArgumentException: unexpected url: src_images_containers_images_spinner
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at okhttp3.Request$Builder.url(Request.java:141)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at com.facebook.react.modules.network.NetworkingModule.sendRequest(NetworkingModule.java:172)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:345)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:136)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:739)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:95)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:148)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
03-12 18:00:01.133  7044  7064 E AndroidRuntime: 	at java.lang.Thread.run(Thread.java:818)

Versions:

"react": "~15.4.1",
"react-native": "0.42.0",
"react-native-svg-uri": "~1.2.0",

I assume that this is not an issue with teh react-native-svg-uri library itself, but the asset generation side of things. However I thought this might be a good issue to be aware of / document a workaround for it required.

According to the team at react-native-svg, line 3 of Rect.js needs to be changed to the following:
import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass'

I am doing simple weather app and I am using ListView to list forecast of the day. I am using local svg from my images folder to show right icon for specific weather. When I change contents of a list it will flash weirdly because svgs are not loaded yet. Here is example with gif http://giphy.com/gifs/3o7TKvo0bqXxy60Tdu As you can see from the gif it does not always make weird flash but like 50% of the time it does :/

Are svgs cached correctly or do you have something else in mind that could help with performance?

Do you think this is linked to this issue? software-mansion/react-native-svg#52

Hi,
When i realize that i couldn't just use the SVG local and do the build i tried to use the svgXmlData to make it work and it shows the image but all black and i try to change the color but i couldn't.

<SvgUri fill="#474A4D" width="24" height="24" svgXmlData={'<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg style="enable-background:new 0 0 47.001 47.001" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="512px" viewBox="0 0 47.001 47.001" width="512px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1_64_"><g fill="#474A4D"><path d="m22.4 22.4c0 0.591 0.479 1.07 1.07 1.07s1.07-0.479 1.07-1.07c0.001-1.25 0.445-2.46 1.25-3.42 1.79-2.13 3.14-4.43 3.99-6.85 0.115-0.327 0.065-0.689-0.135-0.972-0.201-0.283-0.525-0.451-0.872-0.451h-10.6c-0.347 0-0.672 0.168-0.873 0.451-0.2 0.283-0.25 0.645-0.135 0.972 0.853 2.42 2.2 4.72 3.99 6.85 0.8 1 1.2 2.2 1.2 3.4z"/><path d="m24.6 26.7c0-0.59-0.479-1.07-1.07-1.07s-1.07 0.479-1.07 1.07c-0.001 1.54-0.922 3.07-2.59 4.3-3.57 2.64-6.25 5.51-7.95 8.52-0.187 0.332-0.184 0.736 0.009 1.06 0.19 0.329 0.542 0.53 0.922 0.53h21.4c0.379 0 0.73-0.201 0.922-0.53 0.191-0.326 0.194-0.73 0.008-1.06-1.7-3.01-4.38-5.88-7.95-8.52-1.5-1.2-2.4-2.7-2.4-4.3z"/><path d="m42.2 42.7h-0.639c-0.734-8.31-5.6-14.7-9.39-19.2 3.78-4.53 8.65-10.9 9.39-19.2h0.639c1.18 0 2.14-0.957 2.14-2.14 0-1.2-0.9-2.16-2.1-2.16h-37.4c-1.18 0-2.14 0.957-2.14 2.14s0.956 2.14 2.14 2.14h0.639c0.735 8.31 5.6 14.7 9.39 19.2-3.78 4.53-8.65 10.9-9.39 19.2h-0.6c-1.18 0-2.14 0.955-2.14 2.14s0.956 2.14 2.14 2.14h37.4c1.18 0 2.14-0.957 2.14-2.14 0-1.1-0.9-2.1-2.1-2.1zm-32.5 0c0.803-7.51 5.69-13.3 9.34-17.6l0.195-0.231c0.672-0.795 0.672-1.96 0-2.76l-0.194-0.23c-3.65-4.32-8.53-10.1-9.34-17.6h27.5c-0.803 7.51-5.69 13.3-9.34 17.6l-0.193 0.23c-0.672 0.795-0.672 1.96 0 2.76l0.195 0.231c3.65 4.32 8.53 10.1 9.33 17.6h-27.6z"/></g></g></svg>'}/>

Is it possible for the element to fill its parent container without specifying a width and height? I'm thinking of StyleSheet flex.

SvgView:126

TouchEvent.obtain(
                mTargetTag,
                type,
                ev,
                System.nanoTime(),
                ev.getX(),
                ev.getY(),
                mTouchEventCoalescingKeyHelper));

Hi,

I am trying to reproduce the sample code in the readme but i am getting the following error.

Here is the code of my index.ios

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import SvgUri from 'react-native-svg-uri';

export default class moneyPocket extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SvgUri
            width="200"
            height="200"
            source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('moneyPocket', () => moneyPocket);

I am using the following version of each package:

• react: 16.0.0-alpha.6,
• react-native: 0.43.2,
• react-native-svg-uri: 1.2.0
• react-native-svg: 4.6.1,

thanks

I'm getting this error while trying to use this in RN 0.40.
Error while updating property 'd' in shadow node of type: RNSVGPath

Relevant code:

import SvgIcon from 'react-native-svg-uri';

<SvgIcon width={24} height={24} svgXmlData={'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4z"/>\n</svg>'} style={{opacity: 0.54}} />

I placed the svg on the same directory than the component .js, and then:

<SvgUri source={require('./logo_white.svg')} />

This seems to work ok in debug mode, but when I build the release apk for android it crashes with:

java.lang.IllegalArgumentException: unexpected url: components_logo_logo_white
 	at okhttp3.Request$Builder.url(Request.java:141)
 	at com.facebook.react.modules.network.NetworkingModule.sendRequest(NetworkingModule.java:168)
 	at java.lang.reflect.Method.invoke(Native Method)
 	at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
 	at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
 	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
 	at android.os.Handler.handleCallback(Handler.java:751)
 	at android.os.Handler.dispatchMessage(Handler.java:95)
 	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
 	at android.os.Looper.loop(Looper.java:154)
 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
 	at java.lang.Thread.run(Thread.java:761)
Force finishing activity com.app.staging/com.app.MainActivity

Any ideas? Am I doing anything wrong?

Thanks!

I have this up-arrow svg which I got from the material design site:

<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0V0z" fill="none"/>
    <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" fill="#000000"/>
</svg>

which looks like this:

You'll notice that it has two path elements, one with a fill of solid black and one with a fill of "none". When I try to use this svg in the app, I do it like so:

<SvgUri
    width={24}
    height={24}
    fill="#ff00ff"
    source={require('./ic_arrow_upward.svg')}
/>

I'd expect this to produce an icon like this:

but instead it ends up looking like this:

This is because when applying the fill attribute, the code sets it without first checking if it's set to "none".

I use your library to display svg image on ios normaly but on android its required "Draw over other apps" permission. can you explain this ?

please update dependencies to "react-native-svg": "^5.1.5", https://github.com/necinc/msvgc

Hi, thanks for putting together this module!

From looking at the source code, it seems like Text elements are not rendered at all. Is there a specific reason for that / any chance you include them?