SVG Process Control Diagrams & Specify SCADA Performance
Create process control diagrams using standard svg shape elements. Libraries are provided where ISA symbols, components, and process equipment are available for your use.
Your associated SCADA drawings can also be created in SVG format, with you specifying their dynamic aspects. Included are HMI (Human-Machine Interface) symbols used to define
To meet your specifications the completed project would then consist of SCADA dynamic drawings, its data acquisitions, plus user interface selections: All distributed within a secure internet/intranet environment, conforming to W3C standards.
As the Process Control designer, you can create associated static SVG SCADA drawings and specify
their dynamic performance. Vendors therefore will provide an interactive SVG SCADA system and its data acquisitions to
meet your specifications
The resulting svg elements are animated using a cloud-based network for communication to/from field control devices and the SCADA operator's selections.
1.) Creating SVG Shape Elements
Each element includes its unique pane to set & edit its specific values. Click on the element's button to use its pane to create and place the element in the drawing.
After an element is created, it can be edited by moving the cursor over the element, then right-click the mouse button.
Paths - Both linear and curved paths can be created by clicking their points on the drawing. Drag any point to modify its shape.
Paths can also create 3d-like pipelines:
Symbols - This a list of thirty(30) polygons that can be created and placed in the drawing.
Icons - Over 500 icons created from groups of unicode text elements: DINGBATS, GEOMETRIC, ARROWS, MATHEMATICAL, TECHNICAL, and SYMBOLS.
Textures - Three(3) types of pre-built patterns are available: circles, lines, and paths. The pattern is placed in either an element's fill or stroke.
Gradients - Radial and linear gradients can be created to be placed in either an element's fill or stroke.
Shadows - Each element can be selected to include a drop-shadow.
Save/Edit SVG Drawing - You may save the drawing within an .svg drawing stored on your computer. It can then be edited in the future by placing the file in the textarea, under the 'Existing SVG' selection.
Libraries - Three(3) SVG image libraries are available:
ISA Symbol LibraryComponents LibraryProcess Equipment Library
2.) SVG SCADA Via Data Stream Network
These are examples of communication to/from an operator's interactive SVG SCADA drawings. It takes field transmitter values, equipment status, and client requests; sending this data to interact with the SVG SCADA drawing. It also obtains SCADA operator selections and sends the request to the associated field devices.
There are many examples for dynamic SVG that can be applied to meeting the SCADA
specifications created by designers that use this application.
If you want to participate with a vendor to meet the SCADA specifications, then it
SVG Component Library
Components are custom symbols for transmitters, sensors, actuators, dampers, controlled devices etc.
You may copy one or more components from the library into your schematic. The component can be modified within your schematic as needed.
Selecting this will show images of all custom components currently in the library. Click on the image in the table to add the component to your schematic.
Then right-click on the added component to drag, copy, and resize it, followed by selecting .
Creating A Component - Also, you can
create a component from a segment of your schematic drawing via .
Adding Your Component to Library - You can
send a segment of your schematic drawing as a component to the library for use by others via .
Remove Your Component from Library - After you have sent a component to the library, you may remove it at any time.
All of your added components are listed in a table at the bottom of the Component Library symbols. Select to delete the symbol from the library.
Copy this library for your use: Component.svg
ISA Symbol Library
ISA symbols are SVG standard P&ID symbols for sensors, actuators, dampers, pumps, fans, convertors, etc.
You may copy one or more symbols from the library into your schematic. The symbol can be modified within your schematic as needed.
Selecting this will show images of all ISA/P&ID Standards in the library. Click on the image in the table to add the symbol to your schematic.
Then right-click on the added symbol to drag, copy, color, and resize it. Select after changes have been made.
Copy this library for your use: Isa.svg
ISA Symbol Library
Process Equipment Library
These are SVG images of process equipment used within P&ID schematics of industrial control and automation: Blowers, Chemicals, Process Heating, Process Cooling, Pumps, Tanks, and Valves.
You may copy one or more images from the library into your schematic. The images can be modified within your schematic as needed.
Selecting this will show the process images currently in the library. Click on the image in the table to add one or more process symbols to your schematic.
To edit an image right-click on the added process equipment image to drag, copy, and resize it, followed by selecting .
Copy this library for your use: Process.svg
HMI SVG Symbols
This shows a list of current Human-Machine-Interface symbols used both in process control design, and the associated graphics at central monitoring (SCADA).
Each symbol can be customized and inserted into your SVG control drawing.
Click image to see an interactive example of how it is configured and applied dynamically for central monitoring (SCADA).
An ellipsoid representing a process controller
Tuning the PID loop: It displays and has access to adjust the PID values plus setpoint and output
3.) Round Gauge
A round configurable gauge object with a dial on its face.
4.) Trend Gauge
A rectangular configurable gauge object with a chart on its face.
5.) Bar Gauge
A rectangular configurable horizontal gauge object with a bar on its face.
6.) Tank Level
A configurable tank with a built-in level gauge object.
7.) Digital Readout
A rectangular configurable digital readout object with digital numbers on its face.
8.) Pilot Light
A pilot light object that has five(5) states: ON, ALARM, INTERMITTENT, DEFECTIVE, and NORMAL OFF.
9.) Status Stick
A strip object that displays all five(5) states: ON, ALARM, INTERMITTENT, DEFECTIVE, and NORMAL OFF.
10.) Button ON/OFF
Manual push button - toggles ON(green) or OFF(red)
11.) Circuit Breaker
Monitor circuit breaker and show status: ON (closed/green) or OFF (tripped/red)
12.) Substation Digital Monitor
Substation panel showing AMPS (A, B, C, N) and MW, MVAR, MVA. Values displayed are digital values transmitted from a sensor
13.) Variable Frequency Drive
Plots and reads digital VFD values of: control output, hertz, and voltage. Includes status monitoring.
14.) Process Variable Chart
Plots a continuous strip chart for either 1, 2, or 3 measured variables along a timeline.
15.) Auto/Manual Override
The Auto/Manual Override can function to adjust a control signal to a field control device.
It includes a slider to set the output signal during Manual selection.
The above will be continually updated based on your requests - Contact me to add new symbols.
Select this to zoom into the drawing via the mousewheel.When zoomed you may drag/drop any SVG shape element: With the cursor
over the element right-click the mouse button, then drag the element.
To close the Mousewheel zoom feature, click the red zoom button symbol:
Publish SVG Drawing: Mobile-Friendly
Excellent mobile-friendly interactive SVG zoom/pan
The following is the typical HTML source at your website's web page to publish your drawing for mobile units.