Konstruktion von Icons mit ObjektGrafik

QR-Code mit Objekt-Grafik

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure
Grundkenntnisse der Geometrie sind vorteilhaft. Das Verständnis der Details erfordert Grundkenntnisse von SVG, CSS und HTML.



Live-Ansicht der Icons


Dieses Icon wird von vielen Programmen verwendet, um die Position eines Ortes auf einer Landkarte zu markieren. Diese Grafik wurde von ihrem Browser nach einem SVG-Programm aus 2 Kreisen und einem Dreieck (159 Byte) erzeugt.   ↓ Details


Die SVG-Programme der beiden Icons sind direkt (→ Inline) in den Quelltext dieser Webseite eingebettet. Damit wird die zusätzliche Übertragung der Grafik-Dateien eingespart, die bei Pixel-Bildern den Server und das Netzwerk belastet.

GeoLocation-Icon

Skalierung (Größe)
  Animation

Mit dem Schieberegler kann man die Grafik ohne Verlust an Qualität verkleinern oder vergrößern.
Die Animation zeigt die  Achsen des Koordinaten-Systems und die Reihenfolge der Elemente beim Zeichnen.

Programmierung des GeoLocation-Icons


SVG-Programm des GeoLocation-Icons
<svg>
<g transform="scale(2,2)">
<g transform="translate(7,7)">
<line x1="-7" y1="0" x2="7" y2="0"/>
<line x1="0" y1="-7" x2="0" y2="7"/>
<circle cx="0" cy="0" r="4.5"/>
<circle cx="0" cy="0" r="3.141592"/>
</g>
</g>
</svg>


▶  Mit diesem Link kann man die ↗ Grafik als Mini-Webseite in einem eigenen Browser-Tab laden.
Man kann den ungekürzten ↗ Quelltext der HTML-Version in einer Datei *.html am eigenen Arbeits-PC speichern und mit jedem modernen Browser anzeigen.
Man kann den ↗ Quelltext der SVG-Version in einer Datei *.svg speichern, mit einem Browser anzeigen, in ein modernes Büro-Programm ( LibreOffice) importieren oder mit einem guten Grafik-Programm ( Inkscape, → GIMP) bearbeiten und in Pixel-Grafik umwandeln.

GeoLocation-Marker

Skalierung (Größe)
  Animation

Mit dem Schieberegler kann man die Grafik ohne Verlust an Qualität verkleinern oder vergrößern.
Die Animation zeigt die  Achsen des Koordinaten-Systems und die Reihenfolge der Elemente beim Zeichnen.

Programmierung des GeoLocation-Markers


SVG-Programm des GeoLocation-Icons
<svg>
<g id="gs" transform="scale(10,10)">
<g transform="translate(2,2)">
<circle id="ca" cx="0" cy="0" r="2"/>
<circle id="ci" cx="0" cy="0" r="1"/>
<path id="p" d="M0,4 L-1.732,1 L1.732,1 Z"/>
</g>
</g>
</svg>


▶  Mit diesem Link kann man die ↗ Grafik als Mini-Webseite in einem eigenen Browser-Tab laden.
Man kann den ungekürzten ↗ Quelltext der HTML-Version in einer Datei *.html am eigenen Arbeits-PC speichern und mit jedem modernen Browser anzeigen.
Man kann den ↗ Quelltext der SVG-Version in einer Datei *.svg speichern, mit einem Browser anzeigen, in ein modernes Büro-Programm ( LibreOffice) importieren oder mit einem guten Grafik-Programm ( Inkscape, → GIMP) bearbeiten und in Pixel-Grafik umwandeln.



Aus dem Radius des äußeren Kreises (r=2) und dem Abstand der Spitze kann man die Tangenten an den Kreis bzw. deren Berührungspunkte berechnen.
Mangelnde Kenntnisse der Geometrie dürfen kein Hindernis sein:  Bei der IT-Entwicklung braucht man oft die Hilfe anderer Fachgebiete oder Fachkräfte. Die Arbeit besteht darin, aus den jeweiligen Kenntnissen mit den Mitteln der Informatik ein Produkt herzustellen.

Verschiebung

In der Informatik werden die Koordinaten von der linken oberen Ecke einer Grafik nach rechts und unten gemessen.

Das Beispiel zeigt einen Kreis mit dem Radius r=1 dessen Mittelpunkt am Ursprung cx=0, cy=0 des Koordinatensystems liegt.

Mit den beiden Schiebereglern kann man das transform-Attribut (unter der Grafik) programmieren und damit den Kreis verschieben.

Die Transformation ermöglicht es, jedes Grafik-Element so einfach wie möglich zu programmieren:
Ein Kreis wird z.B. fast immer mit seinem Mittelpunkt am Ursprung angelegt cx="0", cy="0" und danach an die gewünschte Position verschoben.
<circle cx="0" cy="0" r="1" transform="translate(0,0)" />



Im Beispiel wird ausnahmsweise auch ein kleiner Teil des unsichtbaren Bereichs (hellgrau unterlegt) angezeigt.
Nach der (möglichst einfachen) Konstruktion eines Objekts verschiebt man es in den sichtbaren Bereich.
Beispiel: Symmetrische Objekte werden um den Ursprung gezeichnet und danach um ihre halbe Breite nach rechts bzw. um ihre halbe Höhe nach unten verschoben.



Detail des Beispiels ↑ GeoLocation-Merker:
<g transform="translate(2,2)">
<circle cx="0" cy="0" r="2"/>
<circle cx="0" cy="0" r="1"/>
<path d="M0,4 L-1.73,1 L1.73,1 Z"/>
</g>



Alternative (unübersichtliche) Programmierung:
<circle cx="2" cy="2" r="2"/>
<circle cx="2" cy="2" r="1"/>
<path d="M2,6 L0.27,3 L3.73,3 Z"/>

Skalierung


Bei Skalierung werden alle XY-Koordinaten sowie alle Werte von Eigenschaften wie Breite, Höhe, Radius, Schriftgröße, Strich-Stärke usw. mit den Skalen-Faktoren multipliziert. Das Zentrum liegt im jeweiligen Koordinaten-Ursprung, den man vorher mit ↑ Translation an den gewünschten Punkt verschieben muss.

Das Beispiel dieses Kapitel zeigt 2 Kreise, auf welche die gleiche Skalierung angewendet wird, jedoch mit unterschiedlicher Wirkung:


Die gleiche Skalierung wirkt sich auf die beiden Kreise unterschiedlich aus:
Roter Kreis:
<g transform="scale(25,25)">
<g transform="translate(1,1)">
<circle cx="0" cy="0" r="1"/>
</g>
</g>
Äquivalente Koordinaten:
<circle cx="25" cy="25" r="25"/>

Grüner Kreis:
<g transform="translate(200,100)">
<g transform="scale(25,25)">
<circle cx="0" cy="0" r="1"/>
</g>
</g>
Äquivalente Koordinaten:
<circle cx="200" cy="100" r="25"/>
transform="scale(25,25)"


Die äußere <g> Gruppe des grünen Kreises verschiebt den Ursprung für alle darin enthaltenen Elemente an den Punkt (200,100)
Die Translation wirkt als Addition (nur) auf alle XY‑Koordinaten, nicht jedoch auf den Radius und andere skalierbare Eigenschaften.

Die innere Gruppe des grünen Kreises skaliert (vergrößert) alle darin enthaltenen Elemente mit dem einstellbaren Faktor. Das Zentrum der Vergrößerung liegt im vorher verschobenen Ursprung (200,100).
Davon sind zwar alle 3 Attribute des Kreises betroffen, es ändert sich jedoch nur der Radius, weil die XY-Koordinaten des Mittelpunkts bei jeder Multiplikation x=y=0 bleiben. Der Kreis wird daher vergrößert, jedoch nicht verschoben. Wenn diese Gruppe auch andere Elemente enthielte, dann würden diese ebenso skaliert (hier: relativ zum Mittelpunkt des Kreises).

Alle Grundformen einer ObjektGrafik werden so einfach wie möglich programmiert, z.B. ein <circle> Kreis meistens mit dem Mittelpunkt cx=cy=0 im Ursprung. Erst danach werden sie mit Translation, Rotation, Skalierung usw. in die gewünschte Form und an die geplante Position gebracht. Diese Strategie erlaubt Flexibilität und gute Übersicht.


Das transform-Attribut erlaubt nicht nur die hier vorgestellten Transformationen (Translation und Skalierung) sondern auch Rotation, Schrägstellung und komplexe Matrix-Transformationen. Spiegelung erreicht man einfach mit negativen Skalierungs-Faktoren.

Häufig werden mehrere Transformationen hintereinander angewendet: In diesen Fällen kommt es darauf an, die richtige Reihenfolge der Transaktionen zu programmieren. Dazu kann man Gruppen ineinander verschachteln oder mehrere Transformationen in einem einzigen Attribut kombinieren.

Die Seite → Planeten-Resonanzen zeigt einige Beispiele mit Kombinationen von Translation und Rotation.