Easily create your individual control elements with the QuickHMI Editor.
You can find out how to do this in the following article.
Creating and deleting an SVG control element
To create a new SVG control, click on 
“SVG controls” in the“Project Explorer”.
The“SVG Control Manager” opens, which has a similar structure to the“HTML Manager”.
You have two options for creating a new SVG:
– Click on the plus icon to create a new empty SVG, which you can now fill yourself.
– With a click on the AI icon will also create a new empty SVG, which you can now fill with the help of the SVG chatbot. You can find out how to create an SVG with the help of the SVG chatbot in the article “Creating SVGs with the chatbot“.
In our example, an SVG is created without the support of the SVG chatbot.
Then determine the name of your new SVG.
A still empty SVG is created, for which properties and actions as well as content can now be defined via syntax. This is done in the “SVG” area of the “SVG Control Manager“.
You can find out exactly how to define actions and properties in the following article: Adding properties and actions
The created SVG control element appears with the other control elements at “SVG“. You can interact with them in the same way as with all other controls.
To delete created SVG controls, simply click on the delete button or select the SVG and press the delete button. The SVG will then also disappear from the list of SVG controls.
Exporting and importing SVGs
To export a created control element, simply click on the export button within the toolbar.
Then select the file path and export the SVG. This is exported under the same name as you created it in the “SVG Control Manager“.
The SVG can then be opened in a browser of your choice, for example.
To import an existing control element, select the Import button.
Then select your desired SVG and confirm. This is then loaded into the “SVG Control Manager” and can be edited.
