Some SVGs rendering improperly #10
Comments
|
Thanks for reporting @augustosamame! With a quick glance I think that the problem is that your SVG file has an image inside it that is a base64 encoded png image, and the I'm not sure if there is anything that can be done to get that SVG to render properly. |
|
There is this issue that suggest that the data uris can be supported, so I will have a look to see if it can be supported: |
|
This is something that needs to be fixed either in SVGR library or react-native-svg library. I opened an issue to SVR's repo first: |
|
So is there any change I can make in my original svg files that would help
at this time? Exchanging the keys for href for example?
…On Sat, Mar 16, 2019, 15:03 Krister Kari ***@***.***> wrote:
This is something that needs to be fixed either in SVGR
<https://github.com/smooth-code/svgr> library or react-native-svg
<https://github.com/react-native-community/react-native-svg> library.
I opened an issue to SVR's repo first:
gregberge/svgr#286 <gregberge/svgr#286>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#10 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APS4r_NImhWg_u2JmcB9nNQ5QWTsOIeIks5vXU4IgaJpZM4b34l_>
.
|
I don't think that you can do anything for now, I'm currently waiting for some feedback from the library maintainers to see where the fix should be done. Here's the issue that I created to |
|
Can you try with the develop branch of react-native-svg or this commit/patch: software-mansion/react-native-svg@3cff87f From 3cff87fd4f357ca33a9671ce86af679739ee16fc Mon Sep 17 00:00:00 2001
From: Mikael Sand <msand@abo.fi>
Date: Sun, 17 Mar 2019 03:27:53 +0200
Subject: [PATCH] Fix compatibility with svgr and images
#971
---
elements/Image.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/elements/Image.js b/elements/Image.js
index 7b6e13b..f4c36b9 100644
--- a/elements/Image.js
+++ b/elements/Image.js
@@ -39,7 +39,9 @@ export default class SvgImage extends Shape {
height={height}
meetOrSlice={meetOrSliceTypes[modes[1]] || 0}
align={alignEnum[modes[0]] || 'xMidYMid'}
- src={Image.resolveAssetSource(href)}
+ src={Image.resolveAssetSource(
+ typeof href === 'string' ? { uri: href } : href,
+ )}
/>
);
}
--
2.19.2
|
|
Thanks for the quick fix @msand! At least the diff looks like a it will fix the issue. I'll do some testing. |
|
@msand I did a quick test using the patch with a remote image and a base64 image, and it does fix the compatibility with SVGR. Thanks! |
|
One thing to notice: I did not manage to get the SVG image from @augustosamame to render after the fix, but I managed to get other png images to render. Maybe there is something else that is not working? |
|
I tested with |
Most of my SVGs work fine. However some are not rendering properly. They work fine in React though.
My config:
package.json
app.json and metro.config.js are identical to Readme.
correct SVG image:
my React Native (expo) app shows:
SVG file:
The text was updated successfully, but these errors were encountered: