Quick guide
This page provides a short introduction and some simple guidelines for creating minimal SVG code for shapes.
Minimal SVG code
The minimal SVG code required for a shape is the following:
<svg version="1.1" id="MyShapeType" width="100px" height="100px">
<!-- Shape definition -->
</svg>
Use the id attribute on the <svg> element to set a unique identifier for this shape type.
This value should be unique for each of your shape types.
Consider prefixing the identifier with your company name to avoid conflicts with other shape types, e.g. AcmeHeatPump.
Only use alphanumeric characters for the identifier and avoid spaces and special characters.
Use the width and height attributes on the <svg> element to specify the size of the shape (see define shape size).
Remove header
Since shapes are rendered inside of a schematic widget, the XML header and the DOCTYPE declaration that are usually found in SVG files are not required and can be safely removed. These lines are only necessary if you want to use the SVG file as a standalone file outside of the system.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Remove unnecessary attributes
Most third-party SVG editors add unnecessary attributes that can be safely removed.
<svg version="1.1" width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
The code above can be safely shortened to the following:
<svg version="1.1" id="MyShapeType" width="100px" height="100px">
Use SVG attributes instead of styles
If you want to add behaviors to your shape that modify the shape’s appearance at runtime, we recommend to use SVG attributes (fill, stroke etc.) to style individual elements rather than using the style attribute.
This notation is required so that the corresponding attribute names appear in the Element dropdown list in the behavior editor below. It also ensures that the system can override the attributes correctly at runtime.
Adhere to the grid size
By default, shapes on the schematic widget are aligned to a grid of 10 by 10 pixels. We therefore recommend to design your shapes in a way that they fit well into this grid, e.g. by using dimensions that are multiples of 10 and by placing important elements of the shape at coordinates that are multiples of 10. This ensures that the shapes are always properly aligned and look consistent in combination with other shapes.