Nativescript-svg NPM

NativeScript SVG

Install

tns plugin add nativescript-svg

Usage

You use it in the same way you use Image source.

Android Library	iOS CocoaPod
pents90 svg-android	SVGKit by SVGKit

there are limitations: - saveToFile ins't working

Quick start

var ImageSourceSVGModule = require("nativescript-svg");
var svgFile = new ImageSourceSVGModule.ImageSourceSVG();

var loaded = svgFile.fromResource('foxie');

var path = '//somepath/file.svg';
loaded = svgFile.loadFromFile(path);

var url = 'http://somepath/file.svg';
loaded = svgFile.loadFromUrl(url);

if(loaded){
    console.log("object loaded");
} else {
    console.log("error");
}

API

ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG

Loads this instance from the specified resource name.

ImageSourceSVGModule.fromFile(path: string): ImageSourceSVG

Creates a new ImageSourceSVG instance and loads it from the specified file.

ImageSourceSVGModule.fromData(data: any): ImageSourceSVG

Creates a new ImageSourceSVG instance and loads it from the specified resource name.

ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG

Creates a new ImageSourceSVG instance and loads it from the specified resource name.

ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG

Creates a new ImageSourceSVG instance and loads it from the specified resource name.

ImageSourceSVGModule.fromUrl(url: string): Promise:ImageSourceSVG

Downloads the image from the provided Url and creates a new ImageSourceSVG instance from it.

You can call every method in two ways, for example:

//from the svf file object
svgFile.loadFromResource(name: string): boolean  // synchronously
svgFile.fromResource(name: string): ImageSourceSVG //asynchronously

//from the svg module api
ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG

Since ver 1.1 Implement a similar image tag to be used as for example:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:svg="nativescript-svg" loaded="pageLoaded">
  <StackLayout>
    <!--svg image tag-->
    <svg:SVGImage src="~/image/nativescript.svg" height="100" />
    <svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />

    <!--normal image tag-->
    <Image src="~/images/logo.svg" stretch ="none" />    
  </StackLayout> 
</Page>

Roadmap

ver 1.6 implement an SVGImage tag that can support svg tags.

<!-- this is more complicated to implement, pending to be implemented -->
    <svg:SVGImage width="100" height="100"> 
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg:SVGImage>

ver 1.5 Change api dependency from pents90/svg-android to Pixplicity/sharp