Für Vektorgrafiken gibt es das Standardformat Scalable Vector Graphics (SVG).

---

In der SVG-Datei werden die geometrischen Objekte, aus denen das Bild besteht (Rechtecke, Linien, Kreise etc.) in Textform spezifiziert. Ein Browser oder Grafik-Programm liest diese Beschreibungen und zeichnet die Grafik. Dadurch kann das Bild ohne Qualitätsverlust beliebig vergrössert oder verkleinert werden. Alle modernen Browser und viele Grafik-Programme können SVG-Dateien anzeigen.

Grundstruktur, Elemente und Attribute

Der Text in SVG-Dateien wird durch Elemente und Attribute strukturiert (sogenanntes XML-Format). Diese bestimmen, wie Formen gezeichnet werden sollen.

Element

Baustein der angibt, was gezeichnet wird
(Kreis, ein Rechteck, Linie, …)

Attribut

zusätzliche Information/Wert, der beschreibt, wie das Element aussehen soll
(Farbe, Grösse, Position, …)

Beispiel: Hier ein einfaches Beispiel

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <desc>Ein einfaches Rechteck</desc>
  <rect x="0" y="0" width="200" height="100" fill="rgb(0, 0, 0)" />
</svg>

Aufgabe: SVG-Datei

1. Welche Zeichen und Begriffe könnten die Elemente sein, welche die Attribute? Was könnten sie bedeuten?
2. Wie sieht die Grafik wohl aus, die damit erzeugt wird?

Lösung: SVG-Datei (nicht angemeldet)

Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.

Allgemein gesagt sind alle SVG-Elemente folgendermassen aufgebaut:

<elementname attribut="wert" />

oder

<elementname attribut="wert"> Inhalt </elementname>

Eine SVG-Datei kann beliebig viele Elemente enthalten. Hier ein paar Beispiele:

• <rect> für Rechtecke
• <circle> für Kreise
• <ellipse> für Ellipsen
• <polygon> für vieleckige Formen
• <line> für Linien
• <path> für komplexe Formen

Hier ein konkretes Beispiel:

Beispiel:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="300" height="200" fill="rgb(255, 255, 255)" />
  <circle cx="150" cy="100" r="60" fill="rgb(255, 0, 0)" />
</svg>

Aufgabe: Eigene SVG-Grafik erstellen

• Öffne in Windows den Texteditor Notepad, in macOS TextEdit.
• Kopiere das obige Beispiel in den Texteditor.
• Speichere die Datei unter dem Namen Aufgabe.svg.
• Öffne die Datei in einem Webbrowser (z.B. Chrome, Edge, Safari).
• Ändere die Grafik so, dass der Kreis Gelb ist und der Hintergrund Hellblau.
• Verschiebe den Kreis um 35 Pixel nach rechts.
• ⭐ Die Flagge welches Landes hast du gerade erstellt?

Lösung: Eigene SVG-Grafik erstellen (nicht angemeldet)

Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.

Positionierung im 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:

Koordinatensystem

Die obige Flagge zeichnest du als wie folgt:

Beispiel: Französische Flagge

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <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>

Aufgabe: Bolivianische Flagge

Erstelle eine SVG-Datei, welche die Bolivianische Flagge darstellt. Die Flagge ist 500 Pixel breit, jeder Streifen ist 100 Pixel hoch. Die Farben haben folgende RGB-Werte:

• Rot (218, 41, 28)
• Gelb (248, 230, 0)
• Grün (0, 122, 51).

Lösung: Bolivianische Flagge (nicht angemeldet)

Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.

Grafische Bearbeitung

SVG-Dateien können auch grafisch mit Programmen wie Inkscape und Affinity bearbeitet werden. Inkscape ist eine kostenlose Software, die auch die Konvertierung von Vektorgrafiken in Pixelgrafiken in unterschiedlichen Formarten ermöglicht. Zudem gibt es auch online-Tools mit denen SVG-Dateien direkt im Browser bearbeitet und angezeigt werden können, z.B. SVG Viewer.

Zusatzaufgaben

⭐ Zusatzaufgabe: Grundformen

Auf der folgenden Seite werden die Grundformen von SVG mit Beispielen vorgestellt. Löse die Aufgaben.

• SVG-Grundformen

⭐ Zusatzaufgabe: Aufgabe Grundformen

Erstellen Sie eine neue SVG-Datei und probieren Sie die Grundformen aus.

⭐ Zusatzaufgabe: Zusatzaufgabe Flaggen

Auf der Webseite Flaggenfinder findest du Länderflaggen nach geometrischen Mustern. Versuche einige nachzubauen. Die entsprechenden Farben findest du auf der Seite Flag Color Codes.