Open dnicer3 opened 1 year ago
I managed to use a SVG image with the native script plugin "@nativescript-community/ui-svg" .
Install the native script plugin:
ns plugin add @nativescript-community/ui-svg
Register the components in app.ts :
import { registerNativeViewElement } from 'svelte-native/dom'
import { svelteNativeNoFrame } from 'svelte-native'
import App from './App.svelte'
registerNativeViewElement("canvasSVG", () => require("@nativescript-community/ui-svg").CanvasSVG); registerNativeViewElement("cSVG", () => require("@nativescript-community/ui-svg").SVG); registerNativeViewElement('svgView', () => require("@nativescript-community/ui-svg").SVGView);
3. Use new tags 'canvasSVG', 'cSVG', 'svgView':
```svelte
<canvasSVG>
<cSVG horizontalAlignment="left" src="~/assets/red_blue_squares.svg" height="100%" width="100%" stretch="aspectFit" />
</canvasSVG>
I had also to specify the width which was not specified in the example of the plugin. Hope this helps.
@FredericKarliczek That plugin for me ismthe closest one to the solution, because I don't get errors within it. However, anyway I have an issue - it throws me "SvelteNativeDom: set attribute threw an error, attr:src on csvg: SVGKImage is not defined" error, Maybe there are some extra dependencies or extra rollup configurations?
@dnicer3 you need to share the callstack for your error. also you should try with the svgView
which is a simple view on which you can defined a src prop (and stretch,...) for the svg
I have spent long time trying to implement SVG images in my Svelte Native App, however, the only really working solution from other repositories is to transfer them to PNG. I have already tried many packages like svelte-inline-svg, svelte-svg etc. I have also tried to register in app.ts and use nativescript plugins such as nativescript-svg, ui-svg and so on, but still no response. The best what I have reached is just a blank screen. Could anyone please advise a proper solution?