Skip to main content

SVG Image

An SVG Image is a widget capable of drawing an SVG image file, that can be freely scaled and rotated around an adjustable rotation center.

Note
  • Vector Rendering must be enabled in TouchGFX Generator to be able to use SVG Image widget.
  • A Complex SVG image file will have a significant effect on the MCU load.
  • SVG Image running in the simulator

    Widget Group

    The SVG Image can be found in the Images widget group in TouchGFX Designer.

    SVG Image in TouchGFX Designer

    Properties

    The properties for an SVG Image in TouchGFX Designer.

    Property GroupProperty Descriptions
    NameName of the widget. Name is the unique identifier used in TouchGFX Designer and code.
    LocationX and Y specify the top left corner of the widget relative to its parent.

    W and H specify the width and height of the widget. The size of the widget is determined by the size of the associated image.

    Lock specifies if the widget should be locked in its current X, Y, W and H.
    Locking the widget also disables interacting with the widget through the screen.

    Visible specifies the visibility of the widget. Making the widget invisible also disables interacting with the widget through the screen.
    SVGSVG specifies the associated SVG image. Select either from the imported images in the Project tab or from the set of free TouchGFX images in the Stock tab.

    Lock Image to Center specifies if the image position should be locked to the center of the widget.
    This option only applies in the TouchGFX Designer, i.e. if the SVG Image is resized during runtime, this option doesn't have any effect on the centered position of the image.

    Fit Image To Size will scale the image to fit the size of the SVG Image widget.
    This option only applies in the TouchGFX Designer, i.e. if the SVG Image is resized during runtime, this option doesn't have any effect on the image size.

    Image Position X and Y specifies the top left corner of the image.

    Image Scale X and Y specifies the scaling factors used to scale the image in the X and/or Y direction.

    Rotation Center X and Y specifies the center of rotation and Rotation (deg) specifies the angle in degrees to rotate the image.
    MixinDraggable specifies if the widget is draggable at runtime.

    ClickListener specifies if the widget emits a callback when clicked.

    MoveAnimator specifies if the widget can animate changes to X and Y values.

    Interactions

    The actions and triggers supported by the SVG Image are described in the following sections.

    Actions

    Widget specific actionDescription
    Rotate SVG ImageRotate the SVG Image around its Rotation Center either relative to its current orientation or to a specific angle.
    Scale SVG ImageScale the SVG Image either relative to its current size or to a specific size.
    Resize widgetResize the width and height of a widget.
    Standard widget actionsDescription
    Move widgetMove a widget to a new position over time.
    Hide widgetHides a widget (sets visibility to false).
    Show widgetMake a hidden widget visible (sets visibility to true).

    Triggers

    An SVG Image does not emit any triggers.

    Performance

    The performance of an SVG Image widget depends on the complexity of the SVG image file used, e.g. number of elements, number of paths, the path size, the use of gradients etc.. Therefore, an SVG Image is considered a demanding widget on most platforms.

    For more details on drawing performance, read the General UI Component Performance section.

    Examples

    Generated Code

    In the generated code for the View base class we can see how TouchGFX Designer sets up an SVG Image.

    Screen1ViewBase.cpp
    #include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
    #include <touchgfx/canvas_widget_renderer/CanvasWidgetRenderer.hpp>
    #include <touchgfx/Color.hpp>
    #include<images/SVGDatabase.hpp>

    Screen1ViewBase::Screen1ViewBase()
    {
    touchgfx::CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);

    svgImage.setSVG(SVG_ALTERNATE_THEME_IMAGES_LOGOS_TOUCHGFX_GRADIENT_EMBOSSED_SVG_ID);
    svgImage.setPosition(26, 25, 260, 180);
    svgImage.setScale(1.2f, 0.8f);
    svgImage.setImagePosition(40, 30);
    svgImage.setRotationCenter(130, 90);
    svgImage.setRotation(5);

    add(svgImage);
    }

    Screen1ViewBase::~Screen1ViewBase()
    {
    touchgfx::CanvasWidgetRenderer::resetBuffer();
    }

    void Screen1ViewBase::setupScreen()
    {
    }
    Tip
    You can use these functions and the others available in the SVGImage class in user code. Remember to force a redraw by calling svgImage.invalidate() if you change the appearance of the widget.

    User Code

    The following code example shows how to rotate the SVG Image by continuously adjusting the rotation in the handleTickEvent():

    mainView.cpp
    #include <gui/screen1_screen/Screen1View.hpp>

    Screen1View::Screen1View()
    {
    }

    void Screen1View::setupScreen()
    {
    Screen1ViewBase::setupScreen();
    }

    void Screen1View::tearDownScreen()
    {
    Screen1ViewBase::tearDownScreen();
    }

    void Screen1View::handleTickEvent()
    {
    svgImage.setRotation(svgImage.getRotation() + 2.0f);
    svgImage.invalidate();
    }

    TouchGFX Designer Examples

    To further explore the SVG Image, try creating a new application within TouchGFX Designer with the following UI template:

    SVG Image UI template in TouchGFX Designer

    API Reference