The SVG Layer displays a vector image within a Layout. It is used for icons, logos, and scalable graphics that need to remain sharp at any size.

SVG stands for “Scalable Vector Graphics”, meaning the image is drawn using paths and shapes rather than pixels. This allows it to scale smoothly without losing quality or becoming blurry.

SVG Layers have no borders by default, as the SVG itself drives the appearance.

This Layer can be created with the “Place SVG from File” tool in the Tool Select Toolbar.

Properties #

This Layer supports all of the universal Layer properties along with some of its own.

Svg File #

Specifies the location of the SVG file to be displayed.

The “…” button beside the field opens the file browser, allowing you to select an SVG asset from your file system.

Stretch #

Determines how the SVG fits within the Layer’s bounding box. Stretch modes define whether the SVG is scaled, cropped, or centered relative to its defined Width and Height.

Stretch Direction

Works together with the Stretch setting to control which dimension (horizontal, vertical, or both) the SVG stretches along.

Opacity Mask #

This property is of the Brush Property type, which allows for color and visual styling of the Layer.

Applies a mask effect over the SVG’s rendered content to control how it blends or fades. This can be used to create gradient transparency, fade effects, or highlight shapes.

The opacity mask affects both Fill and Stroke uniformly, without changing geometry.