Linux

SVG

SVG

Entstehung und Definition

SVG, ausgesprochen Scalable Vector Graphics (Skalierbare Vektor-Grafiken), ist ein Standart, der 2001 von dem W3C () herausgegeben wurde. Es handelt sich um eine Beschreibungssprache, der die XML-Syntax zugrunde liegt. Damit lassen sich 2-Dimensionale Grafiken beschreiben. Der Funktionsumfang kann durch hinzufügen andersartiger Skripte erweitert werden. Angezeigt werden können die Grafiken von vielen populären Webbrowsern, wie beispielsweise Firefox und Opera. Eine aktuelle Liste der funktionierenden Webbrowser finden sie hier:

Einfache Grundformen von SVG

Die grundlegendste Funktion von SVG ist path. Sie beschriebt den Weg des Stiftes über die Fläche. <path d="M 20 20 L 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" /> Erklärung: Im Atribut d wird der Weg beschrieben. Auf Großbuchstaben folgen Koordinaten, auf Kleinbuchstaben folgen Vektoren. Erklärung der Buchstaben:

  1. M/m – moveto = Stift dorthin bewegen
  2. L/l – lineto = mit Stift dorthin zeichnen
  3. Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)
  4. C/c – kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)

Da diese Art der Beschriebung sehr umständlich ist, gibt es ergänzende Elemente:

<circle cx="100" cy="100" r="50" />
Kreis, cx ... x-Koordinate des Mittelpunkts, cy ... y-Koordinate des Mittelpunkts, r ... Radius
<ellipse cx="100" cy="100" rx="50" ry="20" />
Ellipse, cx ... x-Koordinate des Mittelpunkts, cy ... y-Koordinate des Mittelpunkts, rx und ry sind Radien in x- bwz. y-Richtung.
<rect x="100" y="100" width="100" height="200" />
Rechteck, x und y ... Koordinaten des linken oberen Eckpunktes, width und height ... Breite und Höhe
<line x1="100" y1="100" x2="200" y2="200" />
Linie, x1 und y1 ... Koordiaten des Anfangspunktes, x2 und y2 Koordinaten des Endpunktes
<polyline points="100 100 200 200 300 40" />
Poly-Linie, points ... Die Punkte: x-Wert1 y-Wert1 x-Wert2 y-Wert2 ...
<polygon points="100 100 100 200 150 200" />
Polygon, points ... Die Punkte: x-Wert1 y-Wert1 x-Wert2 y-Wert2 ...
<text x="100" y="100" font-size="40px">Hallo Welt!</text>
Text, x und y... Koordinaten, zwischen den Tags ... Text der ausgegeben werden soll (Hier: Hallo Welt!)