Grundlegendes zu SVG´s

SVG´s (Scalable Vector Graphics) sind spezielle vektorbasierte Zeichnungen, die sich mit etwas Geschick sogar in einem einfachen Texteditor erstellen lassen.

Es gibt aber auch einige kostenfreie oder kostengünstige Tools, die einem die Arbeit erleichtern.

SVG´s bieten den Vorteil, gegenüber „normalen“ Pixelgrafiken, dass sie sich beliebig skalieren lassen. Sie können also beliebig weit in solch eine Grafik hineinzoomen,

ohne dass diese pixelig wird. Darüber hinaus bieten SVG´s (wenn diese entsprechend entwickelt worden sind) die Möglichkeit, einzelne Teile der Grafik anzusprechen und zu bearbeiten.

Hier sehen Sie ein Beispiel, wie ein solches, in diesem Fall recht einfaches, SVG aussehen kann. Oben der Quellcode des SVG´s, und unten die Darstellung,

wie Sie sie im Editor, Viewer oder Browser erwarten können:

Das Bild zeigt die drei einzelnen Teile (1 bis 3) des SVG´s in einer Färbung, die der Hervorhebung im Quellcode oben entspricht.

Alle Teile der Grafik, die später durch Eigenschaften gesteuert werden sollen, sind also als einzelne Elemente im SVG enthalten.

Das ist wichtig, da sich anderenfalls beispielsweise der Arm der Schranke nicht getrennt vom Rest der Grafik rotieren ließe.

Oder die Farbe des Arms ließe sich nicht separat zur Farbe des Pfostens ändern.

Eine tiefer gehende Erklärung der einzelnen Elemente einer SVG Grafik, können Sie auf folgender externen Website finden:

* https://www.w3schools.com/graphics/svg_intro.asp.

Dieses Grundwissen ist notwendig, wenn SVG´s ohne Hilfe eines entsprechenden Editors erstellt werden sollen.

Aber auch ohne dieses Grundwissen ist es möglich, SVG´s einfach zu erstellen. Beispielsweise mit Hilfe eines Tools, wie „Boxy SVG“:

* https://boxy-svg.com/ ---> einem günstigen Tool zur Entwicklung von SVG´s.

DTD - Document Type Definition

QuickHMI unterstützt keine DTD für XML. Wenn Sie beim Speichern / Importieren eines SVG´s eine Fehlermeldung erhalten, die sich auf DTD bezieht,

entfernen Sie bitte den Verweis auf das DTD Dokument. (Meist am Anfang der XML-Datei)

Genaueres zu DTD erfahren Sie auf externen Websites wie:

* https://wiki.selfhtml.org/wiki/XML/DTD/Elemente_und_Verschachtelungsregeln

ViewBox

Die ViewBox legt ein internes Koordinatensystem für ein SVG fest.

Ohne eine definierte ViewBox, verstehen sich alle Angaben innerhalb eines SVG´s als absolute Pixel:

Der rote Rahmen (300px x 300px) stellt die Gesamtgröße des SVG´s dar. Wie auf dem Bild zu sehen, nimmt das Rechteck nur einen Teil (200px x 100px) der Gesamtgröße ein.

Wird nun das Steuerelement in seiner Größe verändert, ändert sich jedoch das blaue Rechteck nicht.

Um ein Rechteck zu erhalten, welches sich der Größe des Steuerelements anpasst, muss eine ViewBox definiert werden,

um die absolute Größe (300px x 300px) auf ein internes Koordinaten-System zu übersetzen. In diesem Beispiel 200 x 100 „Einheiten“:

Der rote Rahmen hat im Prinzip 2 Größen. Nach außen hat es die Ausmaße von 300px x 300px, die es sowohl im Editor als auch zur Laufzeit annimmt.

Nach innen hat der Rahmen für das SVG eine Größe von 200 x 100 Einheiten, die durch die ViewBox definiert sind.

Nun sollte man meinen, dass ein Rechteck von 200 x 100 Einheiten, einen Rahmen von 200 x 100 Einheiten vollständig ausfüllt. In dem Beispiel oben ist dies aber nicht der Fall.

Warum? Die ViewBox in ihrer Standard-Einstellung versucht das Seitenverhältnis der in ihr gelegenen Elemente beizubehalten.

Wenn dieses Verhalten nicht gewünscht ist, kann dies durch ein weiteres Attribut „preserveAspectRatio“ geändert werden:

Dies sind die Grundlagen der ViewBox. Für weiteres Verständnis können Sie mehr zu diesem Thema unter folgender Website erfahren:

* www.mediaevent.de/tutorial/svg-viewbox-koordinaten.html

*| Auf den Inhalt externer Websites haben wir keinen Einfluss