HyperPBI implements two governed vector components:
svg: structured declarative scene graph; preferredsvgMarkup: renders authored SVG or a complete SVG from a data column. Explicit security.svgMode: "trusted" applies to authored SVG.Use SVG for diagrams, process flows, pictorial marks, schematics, custom gauges, and animated KPI presentation. Use semantic ECharts components for standard analytical charts.
Set "panZoom": true on svg or svgMarkup to enable pan and zoom. The default is false. The fitted drawing uses the full component width and available height while preserving its aspect ratio. Use heightMode: "fill" to give the diagram the available dashboard height, or set a fixed height to size the viewport. In automatic-height layouts, the drawing’s aspect ratio determines its height.
Scroll the mouse wheel over the drawing to zoom toward the pointer. Drag with a mouse or one finger to pan, and pinch with two fingers to zoom. The floating + and − buttons zoom around the center of the viewport within 1×–5× of the fitted view. Fit restores the original scale and position. Switching to a different bound schematic also restores the fitted view. Clicking, tapping, or using the keyboard on an interactive SVG mark still activates it.
svgMarkup supports pan and zoom in sanitized inline mode and in data-bound image mode. Authored SVG in trusted mode uses its separate sandboxed document. For authored markup, include a viewBox or intrinsic pixel dimensions to define the drawing’s proportions.
svgRequired properties are viewBox and elements; include ariaLabel. Optional component properties include width/height, preserveAspectRatio, role, description, dataContext, motion, performance, dataset, normal component interaction/UI actions, and shared styling.
g, path, rect, circle, ellipse, line, polyline, polygon, text, tspan, defs, linearGradient, radialGradient, stop, clipPath, mask, marker, title, and desc.
The schema allowlists properties by element family:
Unknown element types or properties are errors.
A value is a literal string/number/Boolean/null or an object using:
bind: current-row field, $index, or $counttemplate: direct and row namespaces, , or; supported aggregation namespaces such as `` are field-bearing, while metric, state, selected, configuration, and runtime namespaces are preserved rather than rewrittenscale: linear|threshold|ordinal, domain array or auto, range, optional clampmap: string-keyed value map with fallbackwhen/then/else: field condition using the standard filter operatorsstate/equals/then/else: dashboard-state conditionposition resolves numeric x/y/rotate/scale into a safe transform. Literal transforms allow only numeric translate/scale/rotate/skew/matrix functions—no URL/expression content.
aggregate (default): sums fields whose non-null values are all finite numbers; otherwise takes the first non-null valueselectedRow: uses the first selected row key; falls back to aggregate with a warningfirst: optionally sorts by sortBy; default direction is descending unless asc; warns when multiple rows are used without a sort fieldThe component’s dataset controls its normal rows. An element repeat may name another dataset.
repeat accepts optional dataset, limit, keyField, and required children.
maxRepeatDepth: 1)keyField is allowed but warns because identity may be unstableAn SVG element may carry the same universal interaction and uiAction as a component. Repeated elements carry their row index/key. Selection trigger state is computed from component-selected source rows. External filter rules remain unchanged: a real model-column field is required; derived fields/metrics cannot directly filter Power BI.
Presets:
fade-in, slide-in, scale-in, pulse, float, swim, rotate, draw-path, progress-fill, follow-progress, flow-dash, blink-status, bounce, shimmer
Triggers:
auto, hover, focus, selected, dataChange, state, none
state requires stateKey; selected activates only for selected marks; dataChange changes the animation key when the bound row changes. Hover/focus use scoped selectors. none disables animation.
Duration is 100–60,000 ms; delay 0–30,000 ms; finite iterations 1–100. Infinite iteration is allowed only for continuous presets pulse, float, swim, rotate, flow-dash, bounce, and shimmer. Direction is normal|reverse|alternate|alternate-reverse; fill mode is none|forwards|backwards|both. Easing is limited to standard keywords, bounded cubic-bezier, or steps.
Custom keyframes allow only offset plus opacity, transform, fill/stroke properties, stroke dash offset, and x/y/cx/cy/r/width/height. Offset is 0–1.
draw-path is limited to path/line/polyline/polygon. progress-fill is limited to rect/line/path.
Motion policy is respect-system, always-reduce, or never-reduce. Component/runtime motion may also be disabled. Reduced mode emits no animation and leaves the authored final/static state. Every compiled animation also contains a prefers-reduced-motion guard. Offscreen/inactive SVG blocks pause animations.
The active animation budget is the minimum of component performance, component motion, runtime config (default 12), and the hard limit.
| Limit | Value |
|---|---|
| Elements per component | 500 |
| Elements per dashboard | 2,000 |
| Animated elements per component | 20 |
| Animated elements per dashboard | 50 |
| Default repeat rows | 100 |
| Maximum repeat rows | 250 |
Path d characters |
20,000 |
| Gradients per component | 50 |
| Masks per component | 25 |
| Clip paths per component | 50 |
| Markers per component | 50 |
| Nesting depth | 20 |
| Repeat depth | 1 |
| Raw SVG markup characters | 250,000 |
Performance overrides (maxElements, maxAnimatedElements, maxRepeatedRows) can only lower the corresponding hard limits.
svgMarkupUse svg for authored markup or svgBinding for SVG stored in a text column. Authored SVG text templates are XML-escaped. Templates cannot create element/attribute names or inject d path data.
The sanitizer:
svg plus the structured element allowliston*, style, href, xlink:href, src, srcset, and form-action attributeExplicitly forbidden tags include script, foreignObject, iframe, object, embed, image, use, audio/video/canvas, style, a, switch, set, and discard. SVG filters are disabled in the final profile.
Raw markup does not accept arbitrary CSS. Component css, if used, still passes the scoped CSS sanitizer and may reference only safe local SVG IDs when that mode is enabled.
Add the facility ID and SVG text columns to Values and set them to Don’t summarize. Add a Power BI facility slicer and set its interaction with HyperPBI to Filter. The Water Operations Explorer example includes an importable CSV, a complete specification, and setup steps.
{
"type": "svgMarkup",
"id": "station_schematic",
"dataset": "powerbi",
"heightMode": "fill",
"panZoom": true,
"ariaLabel": "Selected facility process schematic",
"svgBinding": {
"mode": "data",
"keyField": "stationid",
"svgField": "schematic"
}
}
svgBinding.dataset overrides the component dataset and defaults to the component dataset or powerbi. Use Field Manifest aliases or logical dataset field names. The binding takes precedence over any authored svg and reads the complete cell as SVG, with template syntax left literal. The default svgBinding.renderMode is "inline", which uses the sanitizer even when the visual is set to Trusted SVG. The report shows the diagram on its own and displays an error when it cannot render the selected schematic.
HyperPBI draws a schematic when the filtered rows contain exactly one nonblank facility key. Identical SVG values for that facility count as one diagram. Blank schematic cells are ignored when a duplicate row supplies the diagram. Conflicting values, missing text, and malformed or truncated SVG produce an error. With zero or multiple facility keys, the visual shows “Select one facility to view its process schematic.” A dataset containing only one facility displays it immediately.
Bound SVG fits the available area with aspect ratio preserved. Provide a valid viewBox or positive pixel width and height in the document. Use heightMode: "fill" to use the visual’s height or a numeric component height to set a fixed frame. Inline mode allows up to 250,000 characters, 500 allowed elements, 20 nesting levels, and 20,000 characters per path. Local paint, clip, mask, and marker references retain their isolated IDs. Power BI can truncate long cell values before they reach HyperPBI.
Add "renderMode": "image" inside svgBinding for design-tool exports that rely on local <symbol> and <use>, filters, CSS, embedded raster images, or native SVG animation. Keep the same SVG text column. HyperPBI displays the SVG as an isolated browser image with a limit of 1,000,000 characters, 5,000 elements, and 64 nesting levels. HyperPBI removes scripts, event attributes, and foreign HTML content before building the image. The browser disables script execution, link interaction, and external resource loading. SVG image rendering rules
The image uses the styles inside its SVG. Component CSS can style its report frame. Image mode uses native SVG and CSS animation. It suppresses both when system reduced motion is enabled or when HyperPBI motion settings disable animation. The browser controls playback of any embedded raster animation.
Place an <animate> child inside a shape, text element, or group. HyperPBI translates numeric stroke-dashoffset for flowing pipes and opacity for equipment indicators into scoped CSS. For example, a dashed pipe with a dash pattern totaling 18 units can use:
<path d="M20 60H260" fill="none" stroke="#0284c7" stroke-dasharray="10 8">
<animate attributeName="stroke-dashoffset" from="18" to="0" dur="1.2s" repeatCount="indefinite"/>
</path>
Use from and to or 2–5 semicolon-separated numeric values. Supported durations are 1–60 seconds with s or ms units. Repeats default to 1 and can be 1–20 or indefinite. At most one animation per target is used, with a default of 12 and a hard limit of 20 per bound diagram. Use motion.enabled: false to disable motion. The system reduced-motion preference always applies to these animations. Set base presentation attributes so that the stationary diagram still communicates flow direction and equipment status.
Other animation elements, animation timing events, target references, motion paths, and transforms are removed from data-bound SVG. Standard authored svgMarkup continues to use component CSS for animation. Structured svg provides its existing animation presets.
{
"type": "svg",
"id": "completion_gauge",
"viewBox": "0 0 400 140",
"height": 140,
"ariaLabel": "Completion percentage",
"dataContext": { "mode": "aggregate" },
"motion": {
"enabled": true,
"reducedMotion": "respect-system",
"maxConcurrentAnimations": 4
},
"elements": [
{
"type": "rect",
"id": "track",
"x": 20,
"y": 70,
"width": 360,
"height": 20,
"rx": 10,
"fill": "#e5e7eb"
},
{
"type": "rect",
"id": "value",
"x": 20,
"y": 70,
"width": {
"bind": "completionRate",
"scale": {
"type": "linear",
"domain": [0, 1],
"range": [0, 360],
"clamp": true
}
},
"height": 20,
"rx": 10,
"fill": "#206bc4",
"animation": {
"preset": "progress-fill",
"durationMs": 800
}
}
]
}
Select trusted SVG explicitly in Runtime Config. Raw svgMarkup retains definitions, filters, symbols/use, images, styles, foreignObject and animation without the Standard allowlist. Data templates remain inert. The opaque-origin iframe denies same-origin access, report host services, top navigation and popups. Browser and Power BI CSP/WebAccess/CORS policies still apply. Structured svg continues to use the governed, interaction-capable scene graph; use raw SVG for arbitrary authored markup. See trusted rendering.