by outloud | v0.0.9
Adds support for SVGs in your NativeScript apps.
npm i --save @outloud/nativescript-ui-svg
  • Version: 0.0.9
  • GitHub:
  • Downloads:
    • Last Day:   0
    • Last Week:  0
    • Last Month: 0

NativeScript SVG widget

npm downloads npm downloads npm

A NativeScript SVG plugin. Very basic implementation for now


Run the following command from the root of your project:

tns plugin add @nativescript-community/ui-svg


For now only vue (and core) is supported.

import CanvasSVG from '@nativescript-community/ui-svg/vue';

It works in 3 ways!.

CanvasSVG extending Canvas

<CSVG horizontalAlignment="left" src="~/assets/svgs/Ghostscript_Tiger.svg" height="100%" stretch="aspectFit" />

or SVGView which is a basic svg view with support for auto sizing

<SVGView height="30%" src="~/assets/svgs/Ghostscript_Tiger.svg" stretch="aspectFit" backgroundColor="red" />

Or within and canvas extending view

<CGroup fontSize="18" verticalAlignment="middle" paddingLeft="20">
<CSpan text="test" fontWeight="bold" />
<CSpan text="test2" color="#ccc" fontSize="16" />
<CSVG horizontalAlignment="left" src="~/assets/svgs/Ghostscript_Tiger.svg" height="10" stretch="aspectFit" />

For full example / doc look at the vue demo and the typings.