1"use strict";(globalThis.webpackChunkradix_docs=globalThis.webpackChunkradix_docs||[]).push([[1838],{93493(e,n,i){i.r(n),i.d(n,{assets:()=>o,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"ui/customization/svg-development","title":"SVG Development in Mango","description":"Design SVG graphics in Adobe Illustrator for use in Mango dashboards, covering vector drawing, layer organization, and animation preparation.","source":"@site/docs/ui/customization/svg-development.mdx","sourceDirName":"ui/customization","slug":"/ui/customization/svg-development","permalink":"/docs/ui/customization/svg-development","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"title":"SVG Development in Mango","sidebar_position":5,"description":"Design SVG graphics in Adobe Illustrator for use in Mango dashboards, covering vector drawing, layer organization, and animation preparation.","ai_generated":false,"needs_review":false,"source_files":["raw/docs-website/developers/view-development-with-svg-in-mango.md"],"last_verified":"2026-03-12","verified_against":["Mango API/src/com/infiniteautomation/mango/rest/latest/FileStoreRestController.java","raw/github/RadixIoT-mango/help/UI-customPages.md"],"template":"concept"},"sidebar":"docsSidebar","previous":{"title":"Interactive SVG Graphics","permalink":"/docs/ui/customization/svg-graphics"},"next":{"title":"Advanced Charting","permalink":"/docs/ui/advanced-charting"}}');var s=i(74848),r=i(28453);const a={title:"SVG Development in Mango",sidebar_position:5,description:"Design SVG graphics in Adobe Illustrator for use in Mango dashboards, covering vector drawing, layer organization, and animation preparation.",ai_generated:!1,needs_review:!1,source_files:["raw/docs-website/developers/view-development-with-svg-in-mango.md"],last_verified:"2026-03-12",verified_against:["Mango API/src/com/infiniteautomation/mango/rest/latest/FileStoreRestController.java","raw/github/RadixIoT-mango/help/UI-customPages.md"],template:"concept"},l="View Development with SVG in Mango",o={},d=[{value:"View Designing in Adobe Illustrator",id:"view-designing-in-adobe-illustrator",level:2},{value:"View Sketching",id:"view-sketching",level:2},{value:"Variables Definition",id:"variables-definition",level:3},{value:"Graphics Resources",id:"graphics-resources",level:3},{value:"User Experience",id:"user-experience",level:3},{value:"Creation of SVGs in Adobe Illustrator",id:"creation-of-svgs-in-adobe-illustrator",level:2},{value:"Electrical Panel Example",id:"electrical-panel-example",level:3},{value:"Vector Drawing Construction",id:"vector-drawing-construction",level:3},{value:"SVG Documentation and Layer Organization",id:"svg-documentation-and-layer-organization",level:2},{value:"Naming Conventions",id:"naming-conventions",level:3},{value:"Export Settings",id:"export-settings",level:3},{value:"Uploading to Mango",id:"uploading-to-mango",level:2},{value:"Tips for Effective SVG Views",id:"tips-for-effective-svg-views",level:2},{value:"Related Pages",id:"related-pages",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"view-development-with-svg-in-mango",children:"View Development with SVG in Mango"})}),"\n",(0,s.jsx)(n.p,{children:"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."}),"\n",(0,s.jsx)(n.h2,{id:"view-designing-in-adobe-illustrator",children:"View Designing in Adobe Illustrator"}),"\n",(0,s.jsxs)(n.p,{children:["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 ",(0,s.jsx)(n.code,{children:".svg"})," file."]}),"\n",(0,s.jsx)(n.p,{children:"A vector graphic is represented in a basic XML language, which allows animating the drawing through programming tools. This XML structure is
1what makes SVG uniquely suited for SCADA dashboards -- each drawn element becomes a named node that can be targeted by AngularJS directives in Mango."}),"\n",(0,s.jsx)(n.h2,{id:"view-sketching",children:"View Sketching"}),"\n",(0,s.jsx)(n.p,{children:"The sketch of a view includes variables definition, graphic resources, and the user experience (UX) that you want to develop."}),"\n",(0,s.jsx)(n.h3,{id:"variables-definition",children:"Variables Definition"}),"\n",(0,s.jsx)(n.p,{children:"Variables that will be displayed in the view must be defined. For example: temperature, pressure, humidity, voltage, power factor, and the status of actuators."}),"\n",(0,s.jsx)(n.p,{children:"Classify the variables by data type:"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Data Type"}),(0,s.jsx)(n.th,{children:"Examples"}),(0,s.jsx)(n.th,{children:"SVG Representation"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Binary"})}),(0,s.jsx)(n.td,{children:"Pump on/off, valve open/closed"}),(0,s.jsx)(n.td,{children:"Color change, show/hide element"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Multistate"})}),(0,s.jsx)(n.td,{children:"Operating mode, alarm level"}),(0,s.jsx)(n.td,{children:"Multiple visual states"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Numeric"})}),(0,s.jsx)(n.td,{children:"Temperature, pressure, voltage"}),(0,s.jsx)(n.td,{children:"Text display, gauge fill, color gradient"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.strong,{children:"Alphanumeric"})}),(0,s.jsx)(n.td,{children:"Device name, status message"}),(0,s.jsx)(n.td,{children:"Text display"})]})]})]}),"\n",(0,s.jsx)(n.h3,{id:"graphics-resources",children:"Graphics Resources"}),"\n",(0,s.jsx)(n.p,{children:"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)."}),"\n",(0,s.jsx)(n.h3,{id:"user-experience",children:"User Experience"}),"\n",(0,s.jsx)(n.p,{children:"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."}),"\n",(0,s.jsx)(n.h2,{id:"creation-of-svgs-in-adobe-illustrator",children:"Creation of SVGs in Adobe Illustrator"}),"\n",(0,s.jsx)(n.p,{children:"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."}),"\n",(0,s.jsx)(n.h3,{id:"electrical-panel-example",children:"Electrical Panel Example"}),"\n",(0,s.jsx)(n.p,{children:"Design the electrical panels and the elements they contain: energy meters, terminals, breakers, pushbuttons, gutters, wiring distribution, and other components."}),"\n",(0,s.jsx)(n.p,{children:"Establish the animation plan -- which elements will change state based on data (breaker status, real-time energy meter variables visualization, etc.)."}),"\n",(0,s.jsx)(n.h3,{id:"vector-drawing-construction",children:"Vector Drawing Construction"}),"\n",(0,s.jsx)(n.p,{children:"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."}),"\n",(0,s.jsx)(n.p,{children:"For example, the Breaker object is designed by tracing from a reference image using tools such as:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Pen Tool"})," -- For precise path drawing and curves."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Rectangle Tool"})," and ",(0,s.jsx)(n.strong,{children:"Ellipse Tool"})," -- For geometric shapes."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Line Segment Tool"})," -- For wiring and connection lines."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Transparency (Opacity)"})," -- For layered visual effects."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Fill and Stroke"})," -- For color and outline settings."]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"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."}),"\n",(0,s.jsx)(n.h2,{id:"svg-documentation-and-layer-organization",children:"SVG Documentation and Layer Organization"}),"\n",(0,s.jsx)(n.p,{children:"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:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Group 1:"})," Breakers 1"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Group 2:"})," Breakers 2"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Group 3:"})," Meter 1"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Group 4:"})," Meter 2"]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"naming-conventions",children:"Naming Conventions"}),"\n",(0,s.jsxs)(n.p,{children:["The identifications (IDs) and groups in AI directly map to element IDs in the exported ",(0,s.jsx)(n.code,{children:".svg"})," file. Use a consistent naming convention:"]}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Element"}),(0,s.jsx)(n.th,{children:"Suggested ID"}),(0,s.jsx)(n.th,{children:"Purpose"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Main breaker"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"breaker-main"})}),(0,s.jsx)(n.td,{children:"Binary status animation"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Sub-panel breaker"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"breaker-lighting-1"})}),(0,s.jsx)(n.td,{children:"Binary status animation"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Energy meter display"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"meter-main-kwh"})}),(0,s.jsx)(n.td,{children:"Numeric value display"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Status indicator"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"status-pump-1"})}),(0,s.jsx)(n.td,{children:"Multistate color change"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Wiring group"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"wiring-main-to-hvac"})}),(0,s.jsx)(n.td,{children:"Color change for load status"})]})]})]}),"\n",(0,s.jsx)(n.h3,{id:"export-settings",children:"Export Settings"}),"\n",(0,s.jsx)(n.p,{children:"When exporting from Adobe Illustrator to SVG:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Choose ",(0,s.jsx)(n.strong,{children:"File > Save As"})," and select SVG format."]}),"\n",(0,s.jsxs)(n.li,{children:["In the SVG Options dialog, select ",(0,s.jsx)(n.strong,{children:"SVG 1.1"})," as the profile."]}),"\n",(0,s.jsxs)(n.li,{children:["Set ",(0,s.jsx)(n.strong,{children:"Type"}),' to "SVG" (not "SVG Compressed").']}),"\n",(0,s.jsxs)(n.li,{children:["Under ",(0,s.jsx)(n.strong,{children:"Advanced Options"}),", ensure ",(0,s.jsx)(n.strong,{children:"CSS Properties"}),' is set to "Presentation Attributes" for maximum compatibility.']}),"\n",(0,s.jsxs)(n.li,{children:["Keep ",(0,s.jsx)(n.strong,{children:"Decimal Places"})," at 2 or 3 for a good balance between file size and precision."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"uploading-to-mango",children:"Uploading to Mango"}),"\n",(0,s.jsx)(n.p,{children:"After exporting the SVG file:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Upload the file to the Mango file store at ",(0,s.jsx)(n.code,{children:"/rest/latest/file-stores/default/"})," using the ",(0,s.jsx)(n.strong,{children:"File Store"})," page in the administration section."]}
1),"\n",(0,s.jsxs)(n.li,{children:["Reference the SVG in your custom page using the ",(0,s.jsx)(n.code,{children:"<ma-svg>"})," component:"]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<ma-svg src="/rest/latest/file-stores/default/electrical-panel.svg"></ma-svg>\n'})}),"\n",(0,s.jsxs)(n.ol,{start:"3",children:["\n",(0,s.jsxs)(n.li,{children:["Add AngularJS directives to the SVG elements using their IDs to bind them to data points. See ",(0,s.jsx)(n.a,{href:"/docs/ui/customization/svg-graphics",children:"Interactive SVG Graphics"})," for binding techniques."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"tips-for-effective-svg-views",children:"Tips for Effective SVG Views"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Keep file sizes manageable"})," -- Complex SVGs with thousands of paths can slow down rendering. Simplify where possible."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Use consistent coordinate systems"})," -- Design at a fixed artboard size that matches your target display resolution."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Plan for interactivity first"})," -- Decide which elements need to be dynamic before starting the vector drawing. This prevents having to reorganize layers later."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Test incrementally"})," -- Upload and test the SVG in Mango after completing each major section rather than waiting until the entire view is finished."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"related-pages",children:"Related Pages"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"/docs/ui/customization/svg-graphics",children:"Interactive SVG Graphics"})," \u2014 Embed SVG files in Mango pages with data binding"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"/docs/developers/tutorials/floor-plan",children:"Creating a Dynamic Floor Plan"})," \u2014 Tutorial on building an SVG floor plan with live data overlays"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"/docs/ui/pages/custom-pages",children:"Custom Pages"})," \u2014 Create the pages where you embed your SVG views"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},28453(e,n,i){i.d(n,{R:()=>a,x:()=>l});var t=i(96540);const s={},r=t.createContext(s);function a(e){const n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.