Zum Hauptinhalt springen

5. Vektorgrafik

Eine SVG-Datei ist eine Textdatei, welche «Befehle» enthält, wie Formen gezeichnet werden sollen.

Grundstruktur​

Eine SVG-Datei hat folgende Grundstruktur:

<svg
  xmlns="http://www.w3.org/2000/svg"
></svg>

Rechtecke​

Das folgende Beispiel stellt die französische Flagge dar:

Live Editor
<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>
Ergebnisse
Loading...

  • 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.

Deutsche Flagge

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.

Live Editor
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <desc>Deutsche Flagge</desc>
</svg>
Ergebnisse
Loading...

  • Öffnen Sie in ihren Texteditor.

  • Kopieren Sie die Lösung in den Texteditor.

  • Speichern Sie die Datei unter dem Namen Aufgabe.svg ab. Sie kann nun bspw. im Browser angeschaut werden oder in Word/Powerpoint importiert werden.

  • Damit Sie den SVG-Code auch später wieder im Live-Editor anschauen können: halten Sie diesen im untenstehenden Feld fest.

Grundformen​

Auf der folgenden Seite sind die Grundformen von SVG zusammengefasst:

Grundformen
Live Editor
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <desc>Grundformen</desc>
</svg>
Ergebnisse
Loading...

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

Halten Sie auch hier wieder den SVG-Code im untenstehenden Feld fest.

Eigene Zeichnung
Live Editor
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <desc>Meine Zeichnung</desc>
</svg>
Ergebnisse
Loading...

Erstellen Sie mit SVG eine festliche Grafik.

Halten Sie auch hier wieder den SVG-Code im untenstehenden Feld fest.

S. Rothe, T. Jampen, R. MeyerBearbeitetCC 4.0