SVG Shapes
WATCHOUT includes a built-in shape editor. Create vector-based assets — rectangles, ellipses, and text — inside the Producer. SVG (Scalable Vector Graphics) shapes are stored as vector data and rasterized to pixels at a set resolution before they render on Runner nodes. A shape stays crisp at any target size, but the final output is always a pixel image. The visual renderer does not process vector graphics directly.
How It Works
Shapes follow a different path than imported assets. They are not transcoded to a video codec. Instead:
- Define the shape in the Producer shape properties panel (geometry, colors, text).
- The Asset Manager stores the shape as SVG markup.
- The shape is rasterized to RGBA pixels at the set resolution. Rendering uses the resvg/usvg engine with CPU-based tiny-skia rasterization.
- The pixels distribute to Runners like an image asset.
The visual renderer has no native SVG support. All shapes rasterize to pixels before transfer to Runner nodes. Set the render resolution correctly to avoid pixelation — see SVG Render Resolution.
Shapes vs. Imported Images
| Aspect | SVG Shape | Imported Image |
|---|---|---|
| Creation | Built-in editor in WATCHOUT | External graphics application |
| Storage | SVG markup in show data | File on disk, managed by Asset Manager |
| Resolution | Configurable per-cue, re-rasterized on change | Fixed at source resolution |
| Alpha support | Yes (fill and stroke alpha) | Depends on format (PNG, TGA, EXR) |
| Optimization | Rasterized directly, no codec transcoding | Goes through full optimization pipeline |
| Editing | In-app property panel | Requires external tool and re-import |
| Use case | Simple geometric shapes, titles, labels | Complex graphics, photographs, renders |
Why Use Shapes
Shapes are useful for:
- Title cards and labels. Create text overlays inside WATCHOUT.
- Solid backgrounds. Place colored rectangles behind content or fill gaps.
- Geometric overlays. Add circles, rectangles, and stroked outlines for visual accents.
- Dynamic text. Change text content between shows with Dynamic Assets.
- Quick prototyping. Add placeholder graphics during show development.
Shapes are generated inside the Producer. You do not need an external graphics editor for simple visual elements.
Creating a Shape
- Right-click in the Assets window and open the New/Add submenu.
- Select one shape type:
- New Rectangle
- New Ellipse
- New Text
- Enter a name for the shape and click Ok.
The new shape appears in the Assets window. A shape is created as a Dynamic Asset (a visual auto-updating folder). When a folder is selected, the shape is placed in that folder.
Shapes cannot be created inside composition folders or non-visual Dynamic Asset folders.
Shape Properties Panel
Select a shape asset to open its properties panel. Shapes show an interactive editor instead of the standard property fields.
Preview
The top section shows a live preview of the shape on a checkerboard background (transparency). The preview updates as you change properties. Selecting multiple shapes with different values shows a "Multiple Values" message instead.
Base Size
The Base Size section sets the canvas dimensions:
- Width and Height — the SVG canvas size in pixels. Both must be positive integers.
- The total pixel area must not exceed 3840 × 2160 × 8 pixels (about 66 megapixels). This limit prevents shapes that consume excessive GPU memory.
For text shapes, a Crop to fit button sets the canvas size to the bounds of the rendered text.
Geometry
The Geometry section switches the shape type and sets visual properties:
- Kind — switch between Ellipse, Rectangle, and Text. Switching kind keeps the canvas size and colors. Type-specific properties reset.
- Fill — the fill color, including alpha (transparency). Click to open the color picker.
- Stroke — the stroke (outline) color, also with alpha.
- Stroke Width — the stroke thickness in pixels. Set it to 0 for no stroke.
Fill and stroke show a reset button when the value differs from the original. Click it to revert that property.
Text Properties
When the kind is Text, an extra section appears:
| Property | Description |
|---|---|
| Value | Multiline text field for the content to render. |
| Alignment | Left, center, or right alignment buttons. |
| Line Height | Spacing multiplier between lines (1.0 = normal, 1.5 = 150%). |
| Font Size | Text size in pixels. |
| Fit | Sets the largest font size that fits the current canvas. |
| Font | Dropdown of the font assets in the show, with thumbnail previews. |
WATCHOUT ships one built-in font, Roboto. To use another font, first add the font file as an asset in the Assets window (see Asset Types). It then appears in the font dropdown.
Applying Changes
Shape changes do not apply automatically. After editing, click Apply Changes at the bottom of the panel to commit the new shape. This updates all cues that reference the shape.
SVG Render Resolution
Each shape cue has its own render resolution. Set it in the cue's properties, under SVG render resolution:
- Width and Height — the rasterization resolution. It defaults to the shape's base size.
- Lock Aspect Ratio — a toggle that keeps the width-to-height ratio fixed when you change one dimension.
- Reset — reverts the render resolution to the shape's base size.
Set the render resolution to match or exceed the final display size. A shape shown at 4K needs at least a 4K render resolution. Scaling a cue beyond its render resolution causes the same pixelation as any bitmap image. A higher render resolution gives sharper output when the cue is scaled up on stage. It also uses more GPU memory.
Using Shapes on the Timeline
Shape assets work like any other visual asset:
- Drag the shape from the Assets window onto a timeline layer.
- A media cue is created with the shape as its source.
- Apply position, scale, opacity, and other effects as usual.
- When the shape content changes (for example, text is updated and applied), all cues that reference it update.
Use shapes as versions in Dynamic Assets — for example, a text shape whose content changes between shows.
Best Practices
- Match render resolution to display output. See SVG Render Resolution.
- Use Crop to fit for text. It sizes the canvas to the text bounds and avoids oversized canvases that waste GPU memory.
- Keep shapes simple. For gradients, shadows, or many elements, use an external graphics tool and import the result as an image.
- Use font assets. System fonts may not be present on every Runner. Add font files to the show before creating text shapes (see Text Properties).
- Apply changes deliberately. The manual Apply Changes step prevents accidental updates to a live show. Review the preview first.
- Mind the pixel area limit. The maximum is about 66 megapixels. Even smaller shapes use memory in proportion to their resolution.
Limitations
- No native vector rendering. Shapes rasterize to pixels. The visual renderer does not process SVG directly. To avoid pixelation, see SVG Render Resolution.
- Simple geometry only. The editor supports rectangles, ellipses, and text. Complex paths, gradients, filters, and other SVG features are not available.
- CPU-based rasterization. Shape rendering uses CPU rasterization (tiny-skia), not the GPU. Very large shapes at high resolution take longer to generate.
- Font dependency. Text shapes need the font as a font asset. A missing font causes rendering problems.
.svg files can also be imported as image assets. They rasterize during optimization.
Related
- Asset Types — all asset types, including font assets for text shapes.
- Asset Properties — resolution, color space, and state metadata.
- Formats and Codecs — supported image formats for external graphics.
- Dynamic Assets — using shapes as versioned content that changes between shows.
- Asset Manager Issues — troubleshooting optimization, transfer, and asset problems.