Skip to main content

Interactive SVG Graphics

Mango provides the <ma-svg> component for embedding interactive SVG (Scalable Vector Graphics) directly into custom pages. SVG graphics can contain elements that are dynamically bound to data point values, enabling real-time visual representations of your physical systems -- building floor plans, electrical panels, process diagrams, HVAC schematics, and more.

Why SVG for SCADA Dashboards​

SVG is an XML-based vector image format that renders crisply at any resolution. Unlike raster images (PNG, JPEG), SVG graphics scale without losing quality, making them ideal for dashboards displayed on screens of varying sizes. Because SVG elements are part of the DOM, they can be individually targeted and manipulated with CSS and JavaScript, enabling rich interactivity.

Key advantages of using SVG in Mango dashboards:

  • Resolution independence -- Graphics look sharp on 4K monitors, standard desktops, tablets, and mobile devices.
  • Dynamic binding -- Individual SVG elements (shapes, text, groups) can be bound to data point values to change color, opacity, visibility, position, or text content in real time.
  • CSS styling -- SVG elements support CSS properties, allowing you to apply themes, transitions, and animations.
  • Small file size -- Vector graphics are typically much smaller than equivalent raster images, especially for diagrams and schematics.

The <ma-svg> Component​

The <ma-svg> component loads an SVG file and inlines it into the page DOM, making all its internal elements accessible for AngularJS binding. The basic syntax is:

<ma-svg src="/rest/v2/file-stores/default/my-floor-plan.svg"></ma-svg>

Once the SVG is loaded and inlined, you can use AngularJS directives on any element within the SVG that has an id attribute. This is where the design tool (Adobe Illustrator or Inkscape) workflow becomes important -- you assign meaningful IDs to SVG elements during the design phase so they can be targeted in Mango.

Creating SVG Graphics​

You can create SVG graphics using any vector graphics editor:

  • Adobe Illustrator -- Professional-grade vector editor with excellent SVG export support.
  • Inkscape -- Free, open-source vector graphics editor with native SVG format support.
  • Figma -- Browser-based design tool that exports to SVG.

When designing SVGs for Mango, follow these guidelines:

  1. Assign meaningful layer/group names -- These become the id attributes in the exported SVG. Use descriptive names like pump-1-status, temperature-zone-a, or valve-main.
  2. Group related elements -- Group elements that should change together (for example, all parts of a pump icon) so you can target the group as a single unit.
  3. Use simple shapes where possible -- Simple rectangles, circles, and paths are more efficient to render and manipulate than complex compound paths.
  4. Export as plain SVG -- Avoid compressed or optimized SVG formats that may strip id attributes or restructure the document.

Binding SVG Elements to Data Points​

After embedding an SVG with <ma-svg>, you can use AngularJS directives on elements within it. Common binding patterns include:

Changing Color Based on Value​

Use ng-style or ng-class to change an element's fill color based on a data point value:

<ma-get-point-value point-xid="pump-1-running" point="pump1"></ma-get-point-value>
<ma-svg src="/rest/v2/file-stores/default/floor-plan.svg">
    <!-- Inside the SVG, target elements by ID -->
</ma-svg>

Within the SVG file, elements with matching IDs can have AngularJS attributes added. For example, using ng-style on a circle element:

<circle id="pump-1-status" cx="100" cy="100" r="20"
        ng-style="{'fill': pump1.value ? '#4CAF50' : '#F44336'}"/>

Showing/Hiding Elements​

Use ng-show or ng-hide to toggle visibility:

<g id="alarm-indicator" ng-show="alarmPoint.value > 0">
    <circle cx="50" cy="50" r="10" fill="red"/>
    <text x="50" y="55" text-anchor="middle" fill="white">!</text>
</g>

Displaying Values as Text​

Use ng-bind to display a data point's current value as text within the SVG:

<text id="temperature-reading" x="200" y="150"
      ng-bind="tempPoint.value | number:1"></text>

Click Handlers​

Use ng-click to make SVG elements interactive:

<rect id="zone-a" x="0" y="0" width="100" height="100"
      ng-click="showDetails('zone-a')"
      style="cursor: pointer;"/>

Animations​

SVG supports CSS animations and transitions. You can animate elements based on data point values:

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

#alarm-active {
    animation: pulse 1s infinite;
}

Combine CSS animations with ng-class to activate animations conditionally:

<circle id="alarm-indicator" cx="50" cy="50" r="10"
        ng-class="{'alarm-active': alarmPoint.value > 0}"/>

Best Practices​

  • Optimize SVG files before uploading. Remove unnecessary metadata, hidden layers, and unused elements to reduce file size and improve rendering performance.
  • Test at multiple zoom levels to verify that text remains readable and interactive elements are easy to click.
  • Use the Mango file store (/rest/v2/file-stores/default/) to host your SVG files so they are accessible to all users.
  • Consider accessibility -- provide tooltips or alternative text for interactive elements so the interface is usable for all operators.

For a detailed guide on the SVG design process using Adobe Illustrator, see SVG Development in Mango.