Basics about SVG´s

SVG (Scalable Vector Graphics) are special vector-based drawings that can be created even in a simple text editor (with a little skill).

But there are also some free or inexpensive tools, that make your job easier.

SVG's offers the advantage over "normal" pixel graphics, that they can be scaled to any size. So, you can zoom in as far as you want in such a graphic,

without it being pixelated. In addition, SVG´s offer the possibility to address and edit individual parts of the graphic. (If these have been developed accordingly.)

Here's an example of what such an SVG can look like. Above, the source code of the SVG, and below the representation, as you can expect in the editor, viewer or browser:

The picture shows the three parts (1 to 3) of the SVG in a color matching the highlighting in the source code above.

All parts of the graphic that will later be controlled by properties are therefore contain as individual elements in the SVG. This is important because otherwise,

for example, the arm of the barrier wouldn´t rotate separately from the rest of the graphic. Or the color of the arm couldn´t be changed separately to the color of the post.

For further explanation of the individual elements of an SVG graphic, you can visit the following external website:


This basic knowledge is necessary if SVG´s are to be created without the help of an appropriate editor.

But even without this basic knowledge it is possible to easily create SVG´s.

For example, with tools like “Boxy SVG”: * ---> this is a cheap tool for developing SVG´s.

DTD - Document Type Definition

QuickHMI doesn't support a DTD for XML. If you receive an error message related to DTD when saving / importing an SVG,

please remove the reference to the DTD document. (Usually at the beginning of the XML file)

For more information about DTD, visit the following external website:



The ViewBox defines an internal coordinate system for the SVG.

Without a defined ViewBox, all measurements within the SVG are understood to be absolute pixels:

The red frame (300px x 300px) represents the total size of the SVG. As you can see in the picture,

the rectangle takes up only a part (200px x 100px) of the total size.

To get 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":

In principle the red frame now has 2 sizes. On the outside it has the dimensions of 300px x 300px, which it takes both in the editor, as well as at runtime.

Inside, the frame for the SVG has a size of 200 x 100 units defined by the ViewBox.

Now you would think that a rectangle of 200 x 100 units, completely fills a frame of 200 x 100 units. In the example above, this is not the case.

Why? The ViewBox, in its default setting, tries to preserve the aspect ratio of the elements in it. If this behavior is not desired, this can be changed

by another attribute "preserveAspectRatio":

These are the basics of ViewBox. For further understanding, you can learn more about this topic at the following website:


* | We have no influence on the content of external websites