Skip to main content

View Development with SVG in Mango

This guide walks through the complete process of creating SVG graphics for Mango dashboards, from initial sketching through vector drawing in Adobe Illustrator to preparing the SVG for animation and data binding in the Mango UI.

View Designing in Adobe Illustrator​

To create a view with an animated SVG in the Mango software, you start with the design of the view in Adobe Illustrator (AI) to produce a vectorized, documented image and obtain a .svg file.

A vector graphic is represented in a basic XML language, which allows animating the drawing through programming tools. This XML structure is what makes SVG uniquely suited for SCADA dashboards -- each drawn element becomes a named node that can be targeted by AngularJS directives in Mango.

View Sketching​

The sketch of a view includes variables definition, graphic resources, and the user experience (UX) that you want to develop.

Variables Definition​

Variables that will be displayed in the view must be defined. For example: temperature, pressure, humidity, voltage, power factor, and the status of actuators.

Classify the variables by data type:

Data TypeExamplesSVG Representation
BinaryPump on/off, valve open/closedColor change, show/hide element
MultistateOperating mode, alarm levelMultiple visual states
NumericTemperature, pressure, voltageText display, gauge fill, color gradient
AlphanumericDevice name, status messageText display

Graphics Resources​

Define the graphics resources to be used in the view: images, icons, tooltips, graphs, tables, maps, and other visual elements. Plan which elements will be static backgrounds and which will be dynamic (bound to data points).

User Experience​

The user experience (UX) refers to the structure, graphic design, functionality, and sequence of the views. Plan the function of buttons, hover effects, element distribution, and navigation flow between views.

Creation of SVGs in Adobe Illustrator​

When the view sketch is complete, identify which icons will be part of the view and establish which elements will be animated. For example, creating four electrical panels: the main panel which distributes energy to the lighting panel, HVAC panel, and miscellaneous panel of a facility.

Electrical Panel Example​

Design the electrical panels and the elements they contain: energy meters, terminals, breakers, pushbuttons, gutters, wiring distribution, and other components.

Establish the animation plan -- which elements will change state based on data (breaker status, real-time energy meter variables visualization, etc.).

Vector Drawing Construction​

In the Adobe Illustrator work table, begin vectorizing each element that will be part of the view. The drawing can start from a freehand or structured sketch, or you can use a PNG or JPG image as a basis for tracing.

For example, the Breaker object is designed by tracing from a reference image using tools such as:

  • Pen Tool -- For precise path drawing and curves.
  • Rectangle Tool and Ellipse Tool -- For geometric shapes.
  • Line Segment Tool -- For wiring and connection lines.
  • Transparency (Opacity) -- For layered visual effects.
  • Fill and Stroke -- For color and outline settings.

The main electrical panel design includes pre-built SVG components such as the energy meter, breakers, electric terminal block, current transformers (CT), conduit, wiring, and the panel enclosure.

SVG Documentation and Layer Organization​

Each object created in the AI work table represents an element associated with layers. These layers must be identified to generate a documented SVG. Group the layers to create logical objects:

  • Group 1: Breakers 1
  • Group 2: Breakers 2
  • Group 3: Meter 1
  • Group 4: Meter 2

Naming Conventions​

The identifications (IDs) and groups in AI directly map to element IDs in the exported .svg file. Use a consistent naming convention:

ElementSuggested IDPurpose
Main breakerbreaker-mainBinary status animation
Sub-panel breakerbreaker-lighting-1Binary status animation
Energy meter displaymeter-main-kwhNumeric value display
Status indicatorstatus-pump-1Multistate color change
Wiring groupwiring-main-to-hvacColor change for load status

Export Settings​

When exporting from Adobe Illustrator to SVG:

  1. Choose File > Save As and select SVG format.
  2. In the SVG Options dialog, select SVG 1.1 as the profile.
  3. Set Type to "SVG" (not "SVG Compressed").
  4. Under Advanced Options, ensure CSS Properties is set to "Presentation Attributes" for maximum compatibility.
  5. Keep Decimal Places at 2 or 3 for a good balance between file size and precision.

Uploading to Mango​

After exporting the SVG file:

  1. Upload the file to the Mango file store at /rest/v2/file-stores/default/ using the File Store page in the administration section.
  2. Reference the SVG in your custom page using the <ma-svg> component:
<ma-svg src="/rest/v2/file-stores/default/electrical-panel.svg"></ma-svg>
  1. Add AngularJS directives to the SVG elements using their IDs to bind them to data points. See Interactive SVG Graphics for binding techniques.

Tips for Effective SVG Views​

  • Keep file sizes manageable -- Complex SVGs with thousands of paths can slow down rendering. Simplify where possible.
  • Use consistent coordinate systems -- Design at a fixed artboard size that matches your target display resolution.
  • Plan for interactivity first -- Decide which elements need to be dynamic before starting the vector drawing. This prevents having to reorganize layers later.
  • Test incrementally -- Upload and test the SVG in Mango after completing each major section rather than waiting until the entire view is finished.