SVGs (Scalable Vector Graphics) are special vector-based drawings which, with a little skill, can even be created in a simple text editor. However, there are also some free or inexpensive tools that make your work easier.
SVGs have the advantage over “normal” pixel graphics that they can be scaled as required. This means that you can zoom into such a graphic as far as you like without it becoming pixelated. In addition, SVGs (if they have been developed accordingly) offer the possibility of addressing and editing individual parts of the graphic.
Here you can see an example of how such a, in this case quite simple, SVG can look. Above is the source code of the SVG, and below is how you can expect it to look in the editor, viewer or browser:
The image shows the three individual parts (1 to 3) of the SVG in a coloring that corresponds to the highlighting in the source code above:
All parts of the graphic that are later to be controlled by properties are therefore contained as individual elements in the SVG.
This is important because otherwise, for example, the arm of the barrier could not be rotated separately from the rest of the graphic. Or the color of the arm could not be changed separately from the color of the post.
A more detailed explanation of the individual elements of an SVG graphic can be found on the following external website:
This basic knowledge is necessary if SVGs are to be created without the help of a corresponding editor.
But even without this basic knowledge, it is possible to create SVGs easily. For example, with the help of a tool such as “Boxy SVG“:
DTD – Document Type Definition
QuickHMI does not support DTD for XML. If you receive an error message referring to DTD when saving / importing an SVG, please remove the reference to the DTD document (usually at the beginning of the XML file).
You can find out more about DTD on external websites such as:
*https://wiki.selfhtml.org/wiki/XML/DTD/Elemente_und_Verschachtelungsregeln
ViewBox
The ViewBox defines an internal coordinate system for an SVG. Without a defined ViewBox, all information within an SVG is understood as absolute pixels:
<svg style="height:100vh;width:100vw;">
<qhmi>
<!-- QHMI Eigenschaften und Aktionen hier -->
</qhmi>
<g>
<rect width="200" height="100" fill="#8AC5E1" />
</g>
</svg>
The yellow frame (300px x 300px) represents the total size of the SVG. As you can see in the picture, the rectangle only takes up a part (200px x 100px) of the total size.
If the size of the control element is now changed, however, the blue rectangle does not change.
In order to obtain a rectangle that adapts to the size of the control element, a ViewBox must be defined to translate the absolute size (300px x 300px) to an internal coordinate system.
In this example 200 x 100 “units”:
<svg style="height:100vh;width:100vw;" viewBox="0 0 200 100">
<qhmi>
<!-- QHMI Eigenschaften und Aktionen hier -->
</qhmi>
<g>
<rect width="200" height="100" fill="#8AC5E1" />
</g>
</svg>
The yellow frame basically has 2 sizes. Externally, it has the dimensions of 300px x 300px, which it assumes both in the editor and at runtime.
Internally, the frame for the SVG has a size of 200 x 100 units, which are defined by the ViewBox.
Now you would think that a rectangle of 200 x 100 units would completely fill a frame of 200 x 100 units. However, this is not the case in the example above.
Why? The ViewBox in its standard setting tries to maintain the aspect ratio of the elements in it.
If this behavior is not desired, this can be changed by an additional attribute “preserveAspectRatio“:
<svg style="height:100vh;width:100vw;" viewBox="0 0 200 100" preserveAspectRatio="none">
<qhmi>
<!-- QHMI Eigenschaften und Aktionen hier -->
</qhmi>
<g>
<rect width="200" height="100" fill="#8AC5E1">
</g>
</svg>
These are the basics of the ViewBox. You can find out more about this topic on the following website:
*https://www.mediaevent.de/tutorial/svg-viewbox-koordinaten.html
*|We have no influence on the content of external websites.
