Nativescript: Support for .SVG file format

[PanayotCankov]

There are existing libraries such as:

• SVGKit
• svg-android

These can handle .SVG to some extent.
Since they will increase the size of the core modules, but won't be frequently used, they are a good candidate for an optionally installed nativescript ui-plugin.

• How to create nativescript plugin
• How to create nativescript UI-plugin.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[NathanaelA]

I should add for anyone who is up for doing this I have a blog post on how to create a plugin for both iOS and android from a third party library. http://fluentreports.com/blog/?p=167 that should be very helpful in addition to the two resource that @PanayotCankov listed.

[mike-ense]

@PanayotCankov @NathanaelA I do not agree that it would only be "rarely used" and must not be included in the central codebase for that reason. I think fairly healthy apps could use this absolutely all over, as the central tool for display resolution independence, see https://groups.google.com/forum/#!topic/nativescript/-yVyKT0159I for discussion.

Next question then is how it can be implemented the most easily in the respective target environment (iOS, Android and Windows Phone) - is there some SVG to Image/image-background rendering facility, or would native "SVG"/vector components need to be used,

What do you say?

[mike-ense]

@PanayotCankov @NathanaelA , any thoughts re. relevance? And a followup question: Do both Android and iOS have good builtin native SVG/vector display facilities, or SVG to bitmap rendering?

[NathanaelA]

@mike-ense I'm personally with @PanayotCankov; I don't think this is a core feature. It would work really well as a plugin and @PanayotCankov has linked to several that could be used as a plugin. As for built in; to my knowledge neither have any built in support in the actual devices.

[WombatWorks]

Lacking SVG support is the reason I'm forced to limit NativeScript use. A plugin is better, but additional issues arise from plugin's use. I hope to see SVG support added, because I'm a big supporter of NativeScript, and though I recommend NativeScript all the time, I'm unable to use NativeScript for most of my work. (Thank you for the open discussion.)

[NathanaelA]

@WombatWorks why exactly would a plugin have issues? Several of the plugins are totally integrated into the system. For example, my sqlite plugin; even if it was move into core it wouldn't be written any differently nor have any additional hooks. The current project I'm working on I easily integrated Picasso on the android side and it behaves exactly as if it was totally part of the native system. I even created a property (works both in JS and in the Declarative UI XML) on the image; and Picasso then downloads the image and assigns it to that image in declarative UI. So my code is and It is used in basically a list view; so it is constantly downloading/caching images. :-D Doing the same thing with a SVG plugin should be trivial also. I can't speak for the NativeScript team on if they have any intention of doing it, but with my blog posts; you should be able to build a plugin on both iOS and Android fairly quickly. If you don't want to build one; then place a bounty -- several contract developers on the forums.

I should also say my picasso integration does not actually modify anything in the core js code, so it is not upgrade sensitive and I can easily upgrade to v1.6+ when the new versions comes out. You just have to know how to structure your code and tie in to the proper places in the system to easily extend it.

[PanayotCankov]

Hello,

@WombatWorks could you elaborate on use-cases you have? That would be helpful. I've been a front end developer for several years and from my experience vector graphics are not always better than a plain jpeg/png. Sometimes high fidelity vectors can be more CPU intensive than decoding a PNG.

Also this issue was placed to separate displaying SVG files from using SVG elements directly in the {N} UI markup (read integrated in the core modules).

@mike-ense Writing a plugin that uses the before mentioned libraries is supposed to be trivial in {N}. If it is not please list issues you have so we can polish our framework further.

As for relevance we have the following background in our marketplace demo that uses huge PNG instead of just drawing several vector lines, so if I could use vector graphics there I would.

The core team frequently considers voting and SVG is falling behind, you could up-vote SVG here, it is on 26th place or something..

[victorsosa]

Hi Guys,
I come up with this plug-in for NativeScript to support SVG files. It still in alpha, so the development continues, but you can help me out testing or with PR. It is for IOS and Android. Please report any issue you find.

The idea is use it in the same way you use the Image-source module.

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

[enchev]

Hey @victorsosa,

Great work! Let's use your repo for issues, suggestions, etc. I'm closing this thread.

[bufke]

The package noted here does not work with modern versions of Nativescript and was last updated 8 months ago. Should this issue be reconsidered?

[noomieware]

+1

[demetrio812]

I think SVG support is VERY important in modern apps (especially cross platforms ones) and this should be part of the core Nativescript offer so it can be properly maintained and updated...I would reopen this one

[Gitelaus]

@bufke if you are referring to https://github.com/peoplewareDo/nativescript-svg it does still work, and is "usable".

I say that within quotation marks as it's No Support list is bigger than the list of supported functionality. I believe this issue should be reopened as SVG support feels like core functionality considering how prevalent they are within modern web development, and recreating the functionality surrounding them is close to impossible with the alternative image formats available.

[bufke]

When I looked at that project, it didn't work at all with the latest NS. Seems like it got some updates in Aug so I will check it out. Looking at the :+1:'s it seems I am not alone in having trouble.

I agree that it feels like a core feature and is something a web developer is used to having supported. When porting an existing web SPA to have a NS version we had to convert all SVG's to various sized image assets which is not ideal. At the time at least it didn't seem viable using svg with NS. That said react-native also does not have core svg support.

[drewcovi]

@enchev @gitelaus under what context can this issue get re-opened? SVG is absolutely as essential as support for raster images.

This is a modern framework for building cross platform mobile applications.

By it's very conception, it should support various resolutions and SVG is the one graphic format built to scale.

[drewcovi]

@bufke it may be working, but only barely.

@victorsosa do you still maintain the repo? seems issues are left languishing.

[stevenspiel]

Yes! What would it take to reopen this issue?

[NickIliev]

Reopening the issue and marking this one as a feature.

[drewcovi]

Zomg!

[fibric]

SVG support would be perfect. No more fiddling around with SVG -> PNG conversion and trying to guess what size could be perfect for what screen size and resolution.

The ideal solution is NativeScript + X aware. Shouldn't care much if you use Angular, Vue, Svelte, or React.

[oneWaveAdrian]

This would be a great feature indeed! Have there been any updated plans on this lately?

[rgr19]

Please svg asap!

[rizosamuel]

i am also currently working on a project that uses a hoard of iconography. svg support would indeed be very helpful

[triniwiz]

@rizosamuel I started adding svg support to the canvas plugin

[bufke]

Looking around the landscape today, I couldn't find any way to add svg support in NS 7.

• nativescript-svg has not worked for years as far as I can tell. I can't get past Could not find com.pixplicity.sharp:library:1.0.2 but there's numerous upstream issues reporting it doesn't work. https://github.com/peoplewareDo/nativescript-svg/issues/50
• @teammaestro/nativescript-svg is a 3 year old fork that did work for me before NS 7 but no longer works. SVG's just don't show up once upgrading to 7. I'm mostly sure it's not a webpack copy problem as the latest vanilla webpack config copies all assets.

Someone says they got simplistic svgs working as a font - if considering this. I'd probably recommend finding a new job or hobby over this...

[fibric]

Our designers now prefer to work with web developers rather than the mobile developers simply because they can integrate the produced SVG artifacts with almost no effort.

A migration to React Native or pure native apps would be conceivable or customers who pay more because it takes longer to 'rebuild' SVG artifacts in NS apps.

[NathanaelA]

Please note; the new https://github.com/NativeScript/canvas, not sure if Osei can use any help; but I know he has been working on getting full SVG support into the plugin. ;-)

[fibric]

Impossible to find for non-NS-core members as Canvas as no up-to-date Readme, description, or useful commit-history.

[Codex-]

Our designers now prefer to work with web developers rather than the mobile developers simply because they can integrate the produced SVG artifacts with almost no effort.

A migration to React Native or pure native apps would be conceivable or customers who pay more because it takes longer to 'rebuild' SVG artifacts in NS apps.

Scripted asset generation from SVG to appropriately sized raster graphics for resources is reasonably trivial to do in the meantime, for both iOS and Android.

This can also be tied into the webpack process too if you want to have an easy way to include the graphics you need without having the checked into your repositories etc.

Impossible to find for non-NS-core members as Canvas as no up-to-date Readme, description, or useful commit-history.

There are 3 applications demonstrating usage that can modified for your test cases:
https://github.com/NativeScript/canvas/tree/master/apps

Surely there's something there that'll help :)

[fibric]

I won't start generating thousand of PNGs as they need generating for several display-resolutions and screen-sizes. And if our users start using iOS or Android accessibility features like full-screen zoom or Magnifiers, PNG pixelates a lot when the zoom factor is uneven and larger than 1. I'm somewhat sad receiving such a recommendation in 2020.

Canvas SVG is the only option so far unless decisions lead to React Native or pure native apps.

[farfromrefug]

@fibric https://www.npmjs.com/package/@nativescript-community/ui-svg. Very basic but also very fast and working plugin i juste published

[steamwings]

@farfromrefug This looks promising. Angular support on the way?

[farfromrefug]

@steamwings no real "angular" support needed. You just need to register the component. But i will add a module when i have the time

[triniwiz]

@fibric the plan is to have a dedicated docs page since there is a lot of things to explain however each of the packages should contain a small README like, keep in mind with the canvas my plan is for it to be at least 95 - 100% compatible with the mobile web which would enable one to use any canvas web lib out there . So with the SVG you would only need to add the tags with the option of adding a source file or building it manually core e.g

<canvas:SVG  width="100%" height="100%">
  <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
</canvas:SVG>

I have some support for SVG in there but hoping to wrap that up soon once I finish up the file parser , trying to find the fastest way to do the drawing 😄 especially with large files

[farfromrefug]

@triniwiz i love the fact that our approaches are so different :D we really dont fill the same use cases :) So cool

[SergeyMell]

A while ago I've successfully used this plugin for my {N}6.x applications. However, it seems it's not been supported for about a year and I failed to use it on {N}7 application. So, I've implemented a plugin on its base and published it - https://www.npmjs.com/package/@sergeymell/nativescript-svg. Feel free to use and leave me the issues because I'm going to actively support it (at least for the nearest time). @bufke, I think this is what you need.

As long as this plugin is mostly based on the work of @victorsosa, as I see (of course I left him as an author), so I can move it to NativeScript or NativeScript-Community scope if this is allowed. Just let me know.

[mykone]

@fibric https://www.npmjs.com/package/@nativescript-community/ui-svg. Very basic but also very fast and working plugin i juste published

Thanks for this man. It works. Gave you a star too. :)

[fibric]

@fibric the plan is to have a dedicated docs page since there is a lot of things to explain however each of the packages should contain a small README like, keep in mind with the canvas my plan is for it to be at least 95 - 100% compatible with the mobile web which would enable one to use any canvas web lib out there . So with the SVG you would only need to add the tags with the option of adding a source file or building it manually core e.g

<canvas:SVG  width="100%" height="100%">
  <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
</canvas:SVG>

I have some support for SVG in there but hoping to wrap that up soon once I finish up the file parser , trying to find the fastest way to do the drawing 😄 especially with large files

Thanks for your explanation. Definitely a good solution, and it worked in a 5-minutes test project! 👍

[fibric]

@fibric https://www.npmjs.com/package/@nativescript-community/ui-svg. Very basic but also very fast and working plugin i juste published

Thanks! I'll check it out.

[SergeyMell]

@fibric, could you take a look at https://www.npmjs.com/package/@sergeymell/nativescript-svg? Is it worth using or smth wrong with it?

[bufke]

I got @sergeymell/nativescript-svg to work although with build warnings. I did report the issue to your project's github.

@nativescript-community/ui-svg works. I used registerElement to use it with Angular just fine. The resultant images are sized differently, which isn't surprising as it's not based on nativescript-svg.