SvgImageView

Overview

SvgImageView is like an ImageView which provides displaying SvgImages.

API Reference: UI.SvgImageView

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics

Load From Url

scripts/pages/pageSample.ts

import PageSampleDesign from "generated/pages/pageSample";
import Application from "@smartface/native/application";
import System from "@smartface/native/device/system";
import { Route, Router } from "@smartface/router";
import { styleableComponentMixin } from "@smartface/styling-context";
import SvgImageView from "@smartface/native/ui/svgimageview";

class StyleableSvgImageView extends styleableComponentMixin(SvgImageView) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
  mySvgImageView: StyleableSvgImageView;

  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.style.apply({
      flexProps: {
        flexDirection: "ROW",
        justifyContent: "CENTER",
        alignItems: "CENTER",
      },
    });
  }

  onShow() {
    super.onShow();
    const { headerBar } =
      System.OS === System.OSType.ANDROID ? this : this.parentController;
    Application.statusBar.visible = false;
    headerBar.visible = false;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();
    this.mySvgImageView = new StyleableSvgImageView({});

    this.mySvgImageView.loadFromUrl({
      url: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg",
    });
    this.addChild(this.mySvgImageView, "mySvgImageView", ".svgImageView", {
      width: 200,
      height: 200,
    });
  }
}

Load From File

scripts/pages/pageSample.ts

import PageSampleDesign from "generated/pages/pageSample";
import Application from "@smartface/native/application";
import System from "@smartface/native/device/system";
import { Route, Router } from "@smartface/router";
import { styleableComponentMixin } from "@smartface/styling-context";
import SvgImageView from "@smartface/native/ui/svgimageview";
import File from "@smartface/native/io/file";
import Path from "@smartface/native/io/path";

class StyleableSvgImageView extends styleableComponentMixin(SvgImageView) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
  mySvgImageView: StyleableSvgImageView;

  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.style.apply({
      flexProps: {
        flexDirection: "ROW",
        justifyContent: "CENTER",
        alignItems: "CENTER",
      },
    });
  }

  onShow() {
    super.onShow();
    const { headerBar } =
      System.OS === System.OSType.ANDROID ? this : this.parentController;
    Application.statusBar.visible = false;
    headerBar.visible = false;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();
    this.mySvgImageView = new StyleableSvgImageView({});

    this.mySvgImageView.loadFromFile({
      file: new File({ path: Path.AssetsUriScheme + "example.svg" }),
    });

    //this.mySvgImageView.svgImage = 'assets://example.svg'

    this.addChild(this.mySvgImageView, "mySvgImageView", ".svgImageView", {
      width: 200,
      height: 200,
    });
  }
}

Known Issues

Android

• SvgImageView does not support ImageFillType.STRETCH for Android.
• disk cashe and fade properties are not supported for Android.
• tintColor property is not supported for Android.