SVG Picture

The SVG Picture object can display a Scalable Vector Graphics (SVG) file in your project.

SVG Picture currently does not support animations and only shows a static image.

Scripting

When using JavaScript or TypeScript coding, the features of this object can be accessed via the ISVGPictureInstance script interface.

Importing an SVG image

The easiest way to add an SVG file you your project is to drag-and-drop an SVG file in to the Layout View. This will automatically import the SVG file as a project file, create an SVG Picture object, and set the SVG Picture to display the imported file.

Alternatively you can follow this process manually:

  1. Import the SVG file as a project file
  2. Create an SVG Picture object
  3. Set the SVG file property to the imported SVG file

Other ways to use SVG

You can also import SVG files in the Animations Editor for use in other objects like Sprite. This will rasterize them, which means converting them to a bitmap image at a fixed size. This loses some of the benefits of scaling SVGs, but allows them to be used in other objects, including as a part of Sprite animations, and provides other features such as customizing the collision polygon.

SVG Picture properties

SVG file
Choose the SVG file to display. The SVG file must have been imported as a project file in the Files folder.
Image
When an SVG file is selected, the View link provides a shortcut to preview or edit it. This is the same view you get when double-clicking the SVG file in the Project Bar.
Initially visible
Choose whether the object is shown (visible) or hidden (invisible) when the layout starts.
Origin
Choose the position of the origin of the object relative to its unrotated bounding rectangle.

SVG Picture conditions

SVG Picture does not have any of its own conditions. For conditions in common to other objects, see Common conditions.

SVG Picture actions

Set image
Set image (by name)
Set the SVG file being displayed by the object, either by a dropdown list or by an expression of the filename.

SVG Picture conditions

SVG Picture does not have any of its own expressions. For expressions in common to other objects, see Common expressions.

Construct Animate Manual 2024-02-16