Forcing Embedded SVG to Fill Bounding Box in Ignition Perspective

Forcing Embedded SVG to Fill Bounding Box in Ignition Perspective

Inductive Automation's Ignition Perspective 8.0.15 (and compatible 8.x line) ships an Embedded SVG component that imports a vector file and renders it inside a Perspective view container. By default the component maintains the SVG's intrinsic aspect ratio and centers the artwork within its bounding box, which produces two recurring field issues:

1. The artwork shrinks with empty whitespace and never fills the rectangle drawn on the view.
2. Strokes, line weights, and labels distort or stretch when the container is forced to a non-matching aspect ratio.

The root cause is two-fold: the source SVG may lack a viewBox attribute, and the component's preserveAspectRatio property defaults to a meet/slice behavior that locks the artwork's proportions. This reference walks through the exact properties, the supported attribute grammar, and the in-Designer procedure to make an embedded vector fill its container cleanly.

How Perspective's Embedded SVG Component Scales

The Perspective Embedded SVG component is a wrapper around the SVG 1.1 <svg> element and exposes the two attributes that govern viewport scaling: viewBox and preserveAspectRatio. The two control properties exposed in the component property binding tree are:

• props.viewBox - the four-value viewport rectangle (min-x, min-y, width, height) that defines the SVG user coordinate system.
• props.preserveAspectRatio - defaults to xMidYMid meet in most Perspective builds, which fits the artwork into the bounding box while preserving the source aspect ratio (the classic letterbox/pillarbox effect).

When viewBox is missing from the file, the Perspective import workflow reports an empty viewBox property in the property editor and the artwork will not scale predictably. When preserveAspectRatio is left at the default, the SVG will never fill the container unless its proportions happen to match the bounding box exactly.

Prerequisites

• Ignition 8.0.15 (or compatible 8.x branch) with the Perspective module licensed and an active gateway.
• An SVG file authored or post-processed so the viewBox attribute is present on the root <svg> element.
• Optional but recommended: Inkscape 1.x for the Save As -> Optimized SVG workflow used to inject a clean viewBox and strip editor metadata.
• Designer access to the target view and write access to the project resource browser.

Step 1 - Prepare the SVG File with a Clean viewBox

Open the SVG in Inkscape and use File -> Save As -> Optimized SVG. The optimized-output dialog does three things that matter for Perspective:

1. Adds an explicit viewBox attribute calculated from the document's page size.
2. Strips Inkscape and Sodipodi namespace declarations that confuse some renderers and bloat the file.
3. Collapses unused <defs>, gradients, and metadata blocks (toggle the Remove unused IDs and Collapse groups options in the dialog).

Verify the result by opening the file in a plain text editor. The root element should resemble:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  ...
</svg>

If the viewBox is missing, manually add it after the xmlns attribute using the document width and height in user units. Perspective will populate props.viewBox with whatever string the viewBox attribute contains - for a 100x100 artboard, expect to see 0 0 100 100.

Step 2 - Embed the SVG in a Perspective View

1. In the Perspective project browser, drag the cleaned .svg file onto a view canvas. The drop menu offers two options: Embed and Upload.
2. Choose Embed. Embedding inlines the vector data into the component definition; uploading stores the file as a resource URL only.
3. Confirm that the props.viewBox field on the new component is now populated (for example, 0 0 100 100 for a 100x100 artwork). If it is blank, the source file is missing the viewBox attribute and you must re-save through Inkscape Optimized SVG.

Step 3 - Set preserveAspectRatio to none

In the component property tree, change the default value of:

props.preserveAspectRatio = "xMidYMid meet"

to:

props.preserveAspectRatio = "none"

The none value instructs the SVG renderer to scale the viewBox independently along X and Y until the artwork exactly covers the bounding box. There will be no letterboxing, but the artwork will stretch in the direction the container is wider or taller than the source aspect ratio.

preserveAspectRatio Reference

The full grammar for the attribute, including the meet / slice keywords and the defer modifier for nested SVG, is documented at the MDN preserveAspectRatio reference.

Step 4 - Prevent Stroke Distortion with vector-effect

When preserveAspectRatio="none" is active, a 1-px stroke in a 100x100 viewBox drawn inside a 1000x1000 container becomes a 10-px horizontal line and a 10-px vertical line - the stroke stretches with the artwork. To keep stroke widths constant in screen pixels, add a CSS rule either to the component's style property binding or directly inside the SVG file:

svg, svg * { vector-effect: non-scaling-stroke; }

This declaration is honored by the Ignition Perspective Chromium-based SVG renderer and keeps line weight consistent regardless of bounding box size. Combine it with preserveAspectRatio="none" to get a clean full-bleed vector panel with crisp strokes.

Verification Procedure

1. Place the configured component on a view with a known bounding box, e.g. a 480x320 container.
2. Preview the view in a browser session. The SVG artwork should reach every edge of the 480x320 rectangle.
3. Resize the container (via a docked/anchored layout, a session-property binding, or a window resize event) and confirm the artwork continues to fill the new bounding box.
4. Inspect a stroked path: a 2-px stroke should remain visually 2 pixels at 100% zoom even when the container grows to 1920x1080.
5. Open the browser DevTools console and confirm no warnings about missing viewBox are logged for the embedded component.

Troubleshooting Matrix

Field-Proven Tips

• For dashboard backgrounds, author your artwork at the exact bounding box ratio you will deploy with (e.g. 1920x1080). Then none stretches become a non-issue because the aspect ratio matches.
• Keep gradients as linearGradient with explicit gradientUnits="userSpaceOnUse" so they do not collapse when the component is squashed.
• For dynamic width/height driven by session properties, bind the props.viewBox to the same dimensional property to keep the user coordinate system in sync with the visible canvas.
• Test the result in the Perspective Workstation client and at least one browser target. The SVG renderer is the same Chromium engine in both, but DPI scaling can expose stroke alignment issues that do not show at 1x.
• Keep the source file under 100 KB to avoid DOM bloat - Perspective renders the entire vector tree as live DOM nodes, and very large files will noticeably slow first paint.

FAQ