SVG images support

[dnicer3]

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?

[FredericKarliczek]

I managed to use a SVG image with the native script plugin "@nativescript-community/ui-svg" .

1. Install the native script plugin:

ns plugin add @nativescript-community/ui-svg

2. 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':

<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.

[dnicer3]

@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?

[farfromrefug]

@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