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"
  xmlns:xlink="http://www.w3.org/1999/xlink"
></svg>

Info

Den hier verfassten Code kann auch in eine Datei mit der Dateiendung .svg geschrieben werden und anschliessend bspw. in einem Browser betrachtet werden.

Rechtecke

Das folgende Beispiel stellt die französische Flagge dar:

Live Editor

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

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

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.

Halten Sie den verwendeten Code separat im untenstehenden Textfeld fest.

Danger

Änderungen im Live-Editor werden nicht gespeichert!

Live Editor

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

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

Ergebnisse

Loading...

Grundformen

Auf der folgenden Seite sind die Grundformen von SVG zusammengefasst:

• SVG-Grundformen

Grundformen

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

Live Editor

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <desc>Grundformen</desc> </svg>

<svg width="300" height="200" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <desc>Grundformen</desc>
</svg>

Ergebnisse

Loading...

Eigene Zeichnung

Erstellen Sie mit SVG eine winterliche oder festliche Grafik.

Live Editor

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <desc>Eigene Zeichnung</desc> </svg>

<svg width="300" height="200" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <desc>Eigene Zeichnung</desc>
</svg>

Ergebnisse

Loading...

---

1. Quelle: S. Rothe, T. Jampen, R. Meyer↩