NativeScript SVG

The similar version of this plugin for the NativeScript 6 is available here

Disclaimer

This plugin is almost fully based on the source code of Victor Sossa and Juras Norkus.
Thank you guys for your hard work and contributions!

Installation

ns plugin add @sergeymell/nativescript-svg

Prerequisites

Before starting using the plugin make sure your svg images will be copied to the build. This can be done by updating webpack.config.js. Add this line to the targets of CopyWebpackPlugin instance

{ from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },

so it should look something like this:

new CopyWebpackPlugin({
  patterns: [
    { from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.jpg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.png', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
  ],
}),

Usage

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

** there are limitations: ** - saveToFile is not working

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

or

//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="@sergeymell/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>

Usage within Angular Apps

Import an Angular Module

import {NativeScriptSvgModule} from '@sergeymell/nativescript-svg/angular';

@NgModule({
    [
       ...,
       NativeScriptSvgModule
    ],
    ...
})
export class AppModule {}

Use custom element in your views

<SVGImage src="~/images/nativescript.svg" width="256" height="256"></SVGImage>

Additional info

Please, refer some best practices of creating svg files

• https://jwatt.org/svg/authoring/#doctype-declaration
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

License

Apache License Version 2.0