SVG
The SVG widget displays vector graphics (SVG) that keep their quality however far you scale them up or down.
Use it for images that must stay sharp at any size, such as icons, logos, and illustrations.
Definition and role
The SVG widget loads SVGs from a range of sources — assets, the network, files, and strings — and renders them. Tint the whole SVG with color, adjust how it fits its area with fit, and set its alignment. Animated SVGs respond to play, pause, and stop. If the source is empty or can't be found, a placeholder image appears instead.
- Category: Contents
- Default state: shows a placeholder image when the source is empty
Features
| Feature | Description |
|---|---|
| Vector rendering | Renders sharply at any size. Scaling up or down never degrades quality. |
| Source loading | Loads an SVG from an asset, the network, a file, or a string. |
| Color tinting | Applies a color across the whole SVG with color and colorBlendMode. |
| Fit and alignment | Use fit and alignment to control how the SVG sits inside its area. |
| Animation | Turn on animated to play an animated SVG, and use repeat to control looping. |
| Placeholder | Shows the placeholder image when there is no source or the load fails. |
How to use
- Open the Contents category in the left widget palette.
- Drag the SVG item onto the canvas.
- In the properties panel on the right, set the SVG source to display.
- Adjust the color (
color), fit (fit), and size (Size) as needed. - For an animated SVG, turn on
animatedand userepeatto decide whether it loops.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
svgLoader | SVG source to display (asset, network, file, string, and more) | Empty source | SVG loader |
placeholder | Name of the fallback image shown when there is no source | Not set | String (asset name) |
Size | Widget size - width and height (expand to edit width and height) | Not set | Number (px) |
fit | How the SVG fits inside its area | contain | fill·contain·cover·fitWidth·fitHeight·none·scaleDown |
alignment | Alignment inside the area | center | Alignment value |
matchTextDirection | Mirror horizontally to match text direction (RTL) | false | true / false |
allowDrawingOutsideViewBox | Allow drawing beyond the viewBox | false | true / false |
color | Tint color laid over the SVG | Not set | Color |
colorBlendMode | How color is composited onto the SVG | srcIn | Blend mode |
semanticsLabel | Accessibility (screen reader) label | Not set | String |
excludeFromSemantics | Exclude from the accessibility tree | false | true / false |
clipBehavior | How content outside the area is clipped | hardEdge | none·hardEdge·antiAlias·antiAliasWithSaveLayer |
cacheColorFilter | Whether to cache the color filter | false | true / false |
animated | Whether to play an animated SVG | false | true / false |
repeat | Whether the animation loops (when animated is on) | true | true / false |
Notes and tips
You set animated while authoring. An animated SVG plays only while it's on — leave it off for static SVGs and they cost nothing extra to render.
If the source is empty or the asset can't be found, the placeholder image you set appears instead — or the default placeholder when you haven't set one.
Learn more
For the full set of Widget Controls (Property, Method, and Event) that drive this widget from a script, visit SVG Widget Control.