Inkscape is very useful SVG image editor that can help us to create a device image of any kinds. The image can be used for building SCADA or HMI. You can follow the video tutorial to know details about Inkscape.
How to draw a valve for automation system
STEP 01
=> Draw a rectangle, select it
=> Edit path by node (F2)
=> Path | Object to Path, drag a corner and make a shape like a valve
=> Object | Group
=>Make the shape that fits the screen (File | Document Properties | Custom Size | Resize page to drawing or selection)
=> Done
How to draw a curved line
STEP 01
=> Select the Bezier tool
=> Press on a point and note the x-y coordinate from the scale
=> Go to x or y direction while holding the mouse, release the mouse with a suitable distance
=> Make the perpendicular line with the same distance for x and y and press enter
=> Change the stroke (stroke can be thought of as the width of the line) while the line is selected from the bottom left corner or by selecting properties of the line by F4
=>Make the shape that fits the screen (File | Document Properties | Custom Size | Resize page to drawing or selection)
=> Done
How to fit curve in the UI
Problem: We have many lines or curves in the UI and we need to join, how shall we do that in UI
=> In UI change the WidthMode/HeightMode to Content by default it is a value
=> In the following image, we have 3 lines (up, curved and bottom), those are done in SVG and also in UI by using the content
=> In this way, we can modify the individual line, another option could be using the technique described here https://stackoverflow.com/questions/69997309/programmatically-change-svg-classes-during-runtime
=> If we don’t manipulate by JS/CSS then another option we need to have possible lines drawn in the projects
=> Done
