Scalable Vector Graphics (SVG): Teil 2 [Profile und erweiterte Formen]

== Vorwort ==Wir schließen jetzt am ersten Teil an, dessen Wissen hier benötigt wird. Hier gehen wir hauptsächlich auf weitere Formen (Polygone, Pfade...) ein, die komplexer als unsere Kreis oder Linien sind. Als Grundlage nehmen wir wieder diese Datei:
== Profile ==Wir werden ganz kurz auf die verschiedenen Profile einer SVG-Grafik eingehen. Damit ist dieses Stückchen Code gemeint:
Dieses 'baseProfile' beschreibt eigentlich nur den 'Modus' der SVG-Datei. Von diesen Profilen gibt es 3 verschiedene:

• baseProfile="tiny" ist die stark abgespeckte Version, beinhaltet nicht mal Ansatzweiße den SVG-Standard und wird zum Einsatz auf Handys benutzt
• baseProfile="basic" ist eine Grund-Version, die zwar schon gewisse Standards enthält, aber eben noch nicht den vollen Funktionsumfang von SVG nutzt.
• baseProfile="full" ist die Vollversion und ist empfohlen. Diese wird meistens auf PCs genutzt

== Polylinie ==Nun geht es wieder an Formen. Polylinien werden durch das Element <polyline /> erstellt. Sie haben im Gegensatz zu den 'normalen' Linien beliebig viele Punkte. Diese einzelnen Punkte werden durch 'points' festgelegt.
== Polygone ==Polygone werden durch das Element <polygon /> erstellt und sind wie Rechtecken, nur mit mehreren Ecken, die wie bei den Polylinien durch 'points' gesetzt werden. Der Unterschied zwischen diesen beiden ist jedoch, dass automatisch eine geschlossene Form gebildet wird. Das heißt, wenn ich meinen Anfangspunkt bei 1|1 habe, den Zweiten bei 5|5 und den Dritten bei 10|10 wird automatisch von 10|10 eine Linie zu 1|1 gezogen.
== Pfade ==Pfade werden mit dem Element <path /> erstellt und sind die komplexesten Elemente in SVG. Die einzelnen Punkte und Arten werden in 'd' gesetzt.
Nehmen wir unsere Kurve 1. M ist hierbei der Ursprungspunkt und bedeutet 'move to', danach wird über Q eine Bézierkurve durch 150|225 zum Punkt 0|300 gezeichnet. Wer jetzt genau hingesehen hat sieht, dass wir eigentlich den Punkt 150|450 angegeben haben, aber die Kurve durch 150|225 geht. Unser Punkt 150|450 dient nur als Orientierungspunkt. Wie diese Koordinate zu Stande gekommen ist, sieht man an folgenden Grafiken zu den jeweiligen Kurven: Kurve 1 , Kurve 2 und Kurve 3. Und wie diese Kurve zu Stande kommt würde einen ganzen Wiki-Artikel füllen, deshalb lest euch das hier durch, wenn es euch interresiert.
Neben diesem 'Q' gibt es noch zahlreiche andere Möglichkeiten. 'M' für 'move to' und 'Q' für 'Bezierkurve' haben wir schon kennen gelernt. In der folgenden Liste beschreibe ich kurz die restlichen Möglichkeiten ohne Beispiel-Codes:

• L: Zeichnet eine Linie zu den angegeben Koordinaten
• H: Zeichnet eine horizontale Linie zu den angegeben Koordinaten
• V: Zeichnet eine vertikale Linie zu den angegeben Koordinaten
• C: Zeichnet eine Kurve zu den angegeben Koordinaten
• S: Zeichnet eine weiche Kurve zu den angegeben Koordinaten
• T: Zeichnet eine weiche Bezierkurve zu den angegeben Koordinaten
• Z: Schließt den aktuellen Pfad, inderm eine Zeichne zum Ursprungspunkt gezeichnet wird
• A: Zeichnet eliptische Bögen
  

Nähers dazu, kann auf wikibooks.org nachgelesen werden.
== Text ==Man kann durch das Element <text /> auch simple Texte erstellen. Man kann auch innerhalb dieses <text />-Elements mehrere Zeilen durch <tspan /> schreiben.
== Schlusswort ==Das war nun dieser Teil. In den nächsten tagen wird ein weiterer Teil über erweiterte Formatierungen und Effekte hochgeladen.