fromUrl Renders odd pictures

[mm-psymbl]

Trying to use fromUrl from avataaars.io and this is how this: https://avataaars.io/?accessoriesType=Prescription02&avatarStyle=Circle&clotheColor=Blue03&clotheType=ShirtCrewNeck&eyeType=Dizzy&eyebrowType=UpDown&facialHairColor=Blonde&facialHairType=MoustacheMagnum&hairColor=BrownDark&hatColor=PastelRed&mouthType=Smile&skinColor=Brown&topType=ShortHairTheCaesar

looks like on my side

Any idea what's going on?

I am doing the following

1) <SVGImage [src]="avatar" height="256"></SVGImage>

2) import { fromUrl } from '@sergeymell/nativescript-svg';

3)

const avatarUrl = generator.generateRandomAvatar(this.journal.ref_user_id);
console.log(avatarUrl);
this.avatar = fromUrl(avatarUrl);

[SergeyMell]

Yeah, I've noticed that some images render broken. I don't know why this happens. Usually, our designers fix the files in this case. I will show them your file on Monday and I think they can help me to figure out what is wrong

[mm-psymbl]

@SergeyMell that's awesome, much appreciated :) haven't had the chance to try the original plugin that works only til {N} 6, cause i only been running 7.. :)

[SergeyMell]

Hi @mm-psymbl, I've discussed with our designers. The problem actually happens because your SVG uses masks. Unfortunately for now SVGKit which is used for ios as a native library in this plugin has problems with rendering SVG with masks. Here you can find an appropriate issue.

As a possible solution, you can use SVGs with clip-path not masks (actually, these are two possible ways for SVG clipping). Our designers know about it and create images only this way.

Unfortunately, since this issue comes from the native library, for now, there is nothing to do on the plugin level. So I'll close the issue for now. However, you can reopen it if you disagree.