SVG is not displayed on Android

[Hesamp]

HI , I add this plugin at my project , but SVG is not displayed on Android this plugin Works well on ios. Not even a demo version

[Hesamp]

@sebastian-man @bradmartin Hi, Please answer this issues

[Hesamp]

@TeamMaestro

[datanotion]

Hello @Hesamp! The Android library they are wrapping is very old, not maintained and is missing many features. I am able to see SVG files in our Android app, but the SVG files had to be VERY simple -- for example, no gradients. I had to do a text-compare of my SVG files with those simple examples included with the demo app, and see what was different in the headers. Once I changed them, SVGs started to work.

So try using some SVGs that are known to work in your app, and if they work, then it's a complexity issue with the SVGs you are using.

That's the best answer I can give you based on the information shared - hope it works for you! :)

[ghost]

Had the same issue. On iOS works beautifully. On Android... even the nativescript.svg logo file doesn't render.

[abhayastudios]

I have the opposite on Android everything works beautifully, on iOS it seems the SVG renderer does not cope well with masks, but it seems this is a wider iOS issue.

[edernlehyaric]

Have you managed to find a solution ? I can't render any svg, not even a single line.

[abhayastudios]

@edernlehyaric I managed to get it all working with this fork:

"@teammaestro/nativescript-svg": "^1.0.1"

Need to make sure that the SVGs don't contain any masks because they don't display on iOS.

[edernlehyaric]

@abhayastudios Thanks for the tip, unfortunatly it didn't work for me, on android anyway.

[abhayastudios]

I found out now that on Android the plugins works fine for me on Android 7+ but not on Android 5 or Android 6 (I didn't test below that). On the older Androids my app gets "stuck" on the screen that contains an SVG (doesn't crash, but doesn't respond at all).

Considering the Android plugin is not maintained we will either need to wait until #21 is done or just migrate to bitmaps (which I had hoped to avoid).

[sebj54]

Hi there, I just wanted to let anyone know that the fork below is working on Android (I haven't tested all Android versions nor iOS): https://github.com/exeleon/nativescript-svg

[shirakaba]

I've also just tested Brad Martin's version, and that's working for Android (where peoplewareDo's does not), too:

https://github.com/bradmartin/nativescript-svg

The exeleon fork mentioned above is a fork of Brad's repo, incidentally, but it looks like Brad's committed to his fork more recently. The git history is confusing, so hard to recommend which of the two to prefer.

[eaglejs]

Note: While these plugins work, they do not support inline animation. So if you have animation built into your svg file. It will not animate. So it's great for font icons, but not much of anything else unfortunately, and so far it doesn't look like this will ever be supported.

For example, I have two circles one bigger than the other that rotate at different speeds (it's a loading spinner). All of the animations are built into the svg file so one doesn't have to do anything outside of it but decide its size, and they do not do anything in nativescript at all... It just sit's there... motionless. I wonder if anyone has solved this yet?

[shirakaba]

While these plugins work, they do not support inline animation.

@triniwiz Are you aware of an SVG plugin for NativeScript that supports animated SVGs (both on iOS and Android)?

[triniwiz]

I don’t think so but I have that in my todo for all the canvas related stuff 🙂

[eaglejs]

What I ended up doing was breaking my SVG into pieces, and using CSS to absolutely position everything the way I needed, and then animate it with Keyframes. I am using Nativescript with Vue. So I used AbsoluteLayout for positioning, and then CSS to animate the SVGs. It works, but that does take extra work for sure. :)