Navigate to the desired shape group in the left sidebar and then click Add at the top in the action bar and then Add Shape. Enter the name of the new shape in the following dialog. If your shape will only contain a single data point, check the option Single Data Point Shape. For more information about this option, see Object Types in the Shape Library. If the menu items are disabled, please select a shape group first.
In the middle of the screen, the currently selected shape is displayed graphically as it will ultimately look on the schematic. Several general settings for the shape are available to the right:
The name of the shape as it appears in the shape library. Use the Edit Translations button to change the name in multiple languages.
Marks a shape as deprecated or obsolete. This is to inform users that the shape is no longer to be used in production systems and will be removed from the shape library in the future.
- Show Status Icons
Status icons relating to manual intervention and alarm status are automatically displayed to the right of the shape on the schematic. If you prefer to replace these default symbols with your own visualizations, you can deactivate this option and configure SVG code and behavior rules yourself instead (see Visualize manual mode and alarm status of linked schematics).
- Schematic Usage
Displays a list of all the schematic widgets on which the corresponding shape has been placed. Click on an entry in the list to jump directly to the corresponding schematic.
Shape preview and simulator
A preview of the shape is displayed on the left-hand side of the shape settings. By default, it will show the SVG code as defined on the Code tab. If you click on Start Simulator or enter a test value in the grid below, the test values will be applied to the shape according to the behavior rules.
The preview also offers some handy view options to test your shape:
Show View Box
Shows the view box of the shape, i.e. the position and dimension of the SVG viewport.
Show Connection Stubs
Shows the connection stubs, i.e. small triangles that indicate the position and orientation of places from where connections can be drawn. See Shape connection stubs.
Rotates the preview by 90° increments. This rotation only affects the preview, not the actual shape.
Edit the SVG code of a shape
Above the shape settings, to the right, click on Code to display the SVG source code of the shape. To edit the visualization of the shape, you can edit the SVG code directly in the text field or copy and paste it from third-party applications such as Adobe Illustrator, Affinity Designer or Inkscape.
This manual assumes a basic knowledge of SVG. A short introduction can be found under SVG reference.
In order to animate certain elements using behavior rules in dependance of measurements or properties or the current data point, they must first be uniquely marked. You do this by assigning a unique ID to the corresponding elements in the SVG code:
<path id="Background" fill="#ED145B" d="M10,0L20,20H0L10,0z" /> <path id="OperationState" fill="#FFFFFF" d="M10,5L15,15H5L10,5z" />
ShapeLabel are reserved IDs with a special meaning.
You can read more about this in the section Visualize manual mode and alarm status of linked schematics.
Edit the behavior rules of a shape
How to animate shapes with behavior rules is described in the chapter Shape behavior.
Automatically display shape name in shape
<text> element in the shape source code the ID
ShapeLabel so that it is automatically filled with the shape name (label) of the corresponding shape.
You can set the Label of a shape individually for each shape placed on the schematic using the Properties sidebar.
<text id="ShapeLabel" x="50" y="10" fill="black" text-anchor="middle" />
Use this special ID only once per shape.
Shape connection stubs
In order for a shape to be connectable to other shapes on the schematic, you must define so-called connection stubs in your shape. Each connection stub has a position and a direction and can be connected to any number of shapes on the schematic.
The connection stubs must be declared inside the
<defs> block, which must be defined as the first element within the
<svg version="1.1" id="AvelonVentilationCrossFlow" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <defs> <stub direction="left" x="0" y="50"></stub> <stub direction="right" x="100" y="50"></stub> <stub direction="up" x="50" y="0"></stub> <stub direction="down" x="50" y="100"></stub> </defs> <!-- Graphic elements --> </svg>
In order to display the stubs in the shape preview on the left, click on Show Connection Stubs in the preview area.
Note that the order of the
<stub> elements is critical.
If you have placed a shape on a schematic and connected it to other shapes and then remove, rearrange or add additional
<stub> elements, this can have unforeseen effects on existing connections.
Therefore please be certain to check all previously placed shapes and their connections after a change.
By default, colors defined in the shape’s SVG code are fixed. As long as all elements of a shape are placed on an element with a solid fill, this is okay for most use cases. However, if elements such as texts or thin lines are not placed on elements with a solid fill, they might not look as expected if the user places the shape on a schematic with a dark background color, or if the user has dark mode enabled.
To fix issues like these, you can add one of the following CSS classes to your elements to have them change color depending on their context.
Automatically sets the fill color of the element to the current theme color.
Automatically sets the stroke color of the element to the current theme color.
Automatically sets the fill color of the element to the appropriate contextual contrast color.
Automatically sets the stroke color of the element to the appropriate contextual contrast color.
theme-stroke reflect the current theme color (dark or light).
If the background of the schematic is set to a fixed color, however, they will adapt accordingly, appearing dark on dark backgrounds and light on light backgrounds.
contrast-stroke will take on a contrast color, appearing light on dark background and dark on light backgrounds, respectively.
<text x="0" y="0" class="contrast-fill">Context-aware text</text> <line x1="0" y1="0" x2="100" y2="100" class="contrast-stroke" stroke-width="1"/> <rect x="0" y="0" width="100" height="100" class="theme-fill contrast-stroke" stroke-width="1"/>
Do not add an explicit
fill attribute when using
contrast-fill, nor an explicit
stroke when using
contrast-stroke, as these might conflict with the context-aware colors.