Vektorgrafik

Als Beispiel für Vektorgrafiken betrachten wir das Standardformat Scalable Vector Graphics (SVG). Eine SVG-Datei ist eine Textdatei, welche «Befehle» enthält, wie Formen gezeichnet werden sollen.

SVG-Dateien können von allen Programmen, welche Vektorgrafiken bearbeiten, importiert und exportiert werden. Alle Browser können SVG-Grafiken darstellen.

Grundstruktur

Eine SVG-Datei hat folgende Grundstruktur:

<svg
  width="800"
  height="400"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
></svg>

Ein Befehl beginnt immer mit einer spitzen Klammer < (oder auch Kleiner als-Zeichen). Danach folgen Angaben zum Befehl, welche immer die Form

attribut="wert"

haben. Solche Angaben heissen Attribute, sie legen wichtige Informationen zum Befehl fest.

Der Befehl svg umschliesst alle anderen Befehle. Die Attribute width und height legen die Breite und Höhe des Bildes fest:

Attribut	Bedeutung
width	Breite des Bildes
height	Höhe des Bildes

Alle weiteren Befehle müssen zwischen dem svg-Befehl und dem Ende-Befehl </svg> stehen.

Beispiel

Diese SVG-Datei stellt die französische Flagge dar:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Flagge Frankreichs</desc>
  <rect x="0" y="0" width="100" height="200" fill="rgb(0, 85, 164)" />
  <rect x="100" y="0" width="100" height="200" fill="rgb(255, 255, 255)" />
  <rect x="200" y="0" width="100" height="200" fill="rgb(239, 69, 49)" />
</svg>

• width="300" legt die Breite des Bildes auf 300 Pixel fest.
• height="200" legt die Höhe des Bildes auf 200 Pixel fest.
• <rect ...> zeichnet ein Rechteck an den angegebenen Koordinaten mit der angegebenen Breite, Höhe und Farbe.

Koordinatensystem

Koordinaten werden in SVG ausgehend von der oberen linken Ecke des Bildes angegeben. Dabei zeigt die x-Achse nach rechts und die y-Achse nach unten:

Grundformen

Rechteck (rect)

Mit dem Befehl rect wird ein Rechteck gezeichnet. Die folgenden Attribute können verwendet werden:

Attribut	Bedeutung
x	x-Koordinate der oberen linken Ecke
y	y-Koordinate der oberen linken Ecke
width	Breite des Rechtecks
height	Höhe des Rechtecks
rx	Abrundung der Ecken in horizontaler Richtung
ry	Abrundung der Ecken in vertikaler Richtung

Beispiel

<rect x="100" y="50" width="600" height="100" rx="20" ry="20" />

✏️ Aufgabe 1

Erstellen Sie eine SVG-Datei, welche die Deutsche Flagge darstellt. Die Flagge ist 500 Pixel breit, jeder Streifen ist 100 Pixel hoch. Das Rot ist rein (d.h. 255 Rot, 0 Grün und 0 Blau). Das Gelb hat einen Rotanteil von 255 und einen Grünanteil von 204.

Kreis (circle)

Mit dem Befehl circle wird ein Kreis gezeichnet. Die folgenden Attribute können verwendet werden:

Attribut	Bedeutung
cx	x-Koordinate des Mittepunkts
cy	y-Koordinate des Mittelpunkts
r	Radius des Kreises

Beispiel

<circle cx="400" cy="100" r="100" />

Ellipse (ellipse)

Mit dem Befehl ellipse wird eine Ellipse gezeichnet. Die folgenden Attribute können verwendet werden:

Attribut	Bedeutung
cx	x-Koordinate des Mittepunkts
cy	y-Koordinate des Mittelpunkts
rx	Radius des Ellipse in x-Richtung
ry	Radius der Ellipse in y-Richtung

Beispiel

<ellipse cx="400" cy="100" rx="200" ry="100" />

✏️ Aufgabe 2

Erstellen Sie eine SVG-Datei, welche eine Kerze darstellt. Tipp: Verwenden Sie eine Ellipse und einen Kreis für die Flamme.

Polygon (polygon)

Mit dem Befehl polygon wird ein Polygon gezeichnet. Der Befehl hat points als einziges Attribut. Dort wird eine Liste von Koordinaten angegeben, die Eckpunkte des Polygons.

Attribut	Bedeutung
points	Liste von Koordinaten

Beispiel

<polygon points="200,100, 300,200, 500,200, 600,100, 400,0" />

Farben

In SVG werden Farben als RGB-Werte angegeben. Dazu wird beim Zeichenbefehl das Attribut fill verwendet.

Beispiel

<circle cx="150" cy="100" r="100" fill="rgb(255, 0, 0)" />
<circle cx="400" cy="100" r="100" fill="rgb(0, 255, 0)" />
<circle cx="650" cy="100" r="100" fill="rgb(0, 0, 255)" />

Gruppieren und wiederverwenden (g und use)

Oft möchten wir in einer Grafik die gleiche Form mehrmals verwenden. Das ist in SVG einfach möglich. Es braucht zwei Schritte:

• Wir fassen die gewünschte Figur zu einer Gruppe g zusammen und geben der Gruppe einen Namen:

  <g id="figur">
    <rect x="0" y="75" width="200" height="50" fill="rgb(255, 100, 100)" />
    <rect x="75" y="0" width="50" height="200" fill="rgb(255, 100, 100)" />
  </g>

  Dabei muss beachtet werden, dass die Gruppe mit dem Befehl </g> wieder abgeschlossen wird.

• Wir verwenden (use) die Gruppe. Dabei geben wir neue Koordinaten an:

  <use href="#figur" x="300" />

  Dabei muss beachtet werden, dass vor dem Namen der Gruppe ein Hashtag # stehen muss.

Beispiel

Das ganze sieht zusammengefasst so aus:

<g id="figur">
  <rect x="0" y="75" width="200" height="50" />
  <rect x="75" y="0" width="50" height="200" />
</g>
<use href="#figur" x="300" />
<use href="#figur" x="600" />

✏️ Aufgabe 3

Kopieren Sie die Kerze in eine neue SVG-Datei, welche vier Adventskerzen zeigen soll. Verwenden Sie das Gruppieren und verwenden, um Kopien der Kerze zu erstellen.

⭐️ Zusatzaufgabe 4

Erstellen Sie einen Weihnachtsbaum mit Kerzen als SVG-Grafik. (Der Baum muss nicht geschwungene Äste haben.)