MBLogic
for an open world in automation
Editing SVG with Inkscape
Overview
A web based HMI client will consist of several components. If the HMI is to be graphical, then one of these components will need to provide some form of dynamic graphics capabilities to display such things as push buttons, pilot lights, dial gauges, etc.
This can be achieved by a number of means, but only one is supported directly by almost all modern web browsers. That means is SVG (Scalable Vector Graphics). SVG allows graphics to be specified directly in the web page (without external files) in an XML format, and then manipulated by Javascript just like normal web page HTML. Other methods require special proprietary plug-ins that are the source of numerous compatibility and security headaches and also often require special proprietary (and expensive) development software. SVG is supported by numerous standard drawing packages, and can even be edited directly using a simple text editor.
- Setting the Background Colour - Setting the colour of the background used in the SVG drawing.
- Working with Layers - Layers are used to provide multiple graphical "screens" in a single drawing.
- Object Stacking - The "stacking" of SVG objects determines which drawing elements appear on top of or below others.
- The SVG "id" Property - The SVG "id" property is used to give each object (widget) a unique name which can then be used to control its colour, rotation, or any other property.
- Setting Text Labels - Setting the text labels which may come as part of the push buttons, selector switch labels, or other objects.
- Other Editing Features - Other editing features including grouping objects, setting (or removing) the fill and stroke properties, and editing hints.
- Background Pixel Graphics - Using pixel graphics such as JPEG or PNG files as background images.
- User Created Graphics - Some points to observe when creating custom graphics.