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

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"
>
  <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"
>
  <desc>Eigene Zeichnung</desc>
</svg>
Ergebnisse
Loading...
S. Rothe, T. Jampen, R. MeyerBearbeitetCC 4.0