Hi all,
I have been trying to use an SVG in our new app to define icons all over the app. This to save space and not use bitmap images all the time that would increase our package size since we want to distribute this app in Apple App Store and Google Play Store.
So we are using Adobe XD, creating icons in it, then I am exporting it for Web using Adobe XD Design specs feature. This provides the possibility to export the icon as SVG.
My issue is the following: whatever the icon I have in XD just doesn’t get rendered as good when trying out the app, whatever the problem. I thought screenshots would better help describe the issue. This is my icon in Adobe XD:
Then this is the same icon exported by Adobe XD to SVG format, I open it in Chrome:
So far so good. Now here is rendering once in our ionic app:
There are some differences as you can see between what is being shown in Chrome, in Adobe XD, and what the app is rendering. The difference doesn’t seem like much, but actually when looking at it on an Android phone or iOS device it really shows. Especially when we programmatically colorize the icon.
So, my question is, first is there something we’re doing wrong in the implementation - I can share more code examples upon request if you guys need to know - and then if it’s not an implementation issue but more a platform support issue then how do you guys suggest we do to get our icons displayed with high fidelity while optimizing package size?