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:
- M/m – moveto = Stift dorthin bewegen
- L/l – lineto = mit Stift dorthin zeichnen
- Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)
- 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" />
<ellipse cx="100" cy="100" rx="50" ry="20" />
<rect x="100" y="100" width="100" height="200" />
<line x1="100" y1="100" x2="200" y2="200" />
<polyline points="100 100 200 200 300 40" />
<polygon points="100 100 100 200 150 200" />
<text x="100" y="100" font-size="40px">Hallo Welt!</text>