Nächste Seite: 5.4 Animationen und Interaktionen
Aufwärts: 5 SVG
Vorherige Seite: 5.2 Grundlagen
  Inhalt
Die einfachsten Objekte, die auf der Zeichenfläche platziert werden können, sind Rechtecke, Kreise, Ellipsen, Polygone, Linien und Polylinien5. Sie alle lassen sich durch Angabe ihrer spezifischen Punkte erzeugen. Darunter ist beispielsweise für einen Kreis der Mittelpunkt und der Radius zu verstehen, für ein Rechteck sind das der Startpunkt, die Breite und die Höhe. Die Reihenfolge der Definitionen bestimmt, welches Element oben liegt. Das ist bei übereinander angeordneten Objekten immer das zuletzt angegebene. Ist die Position und Größe der Objekte festgelegt, so lassen sich noch anhand von Attributen Farbeinstellungen definieren. Farben können dabei mit ihrem Namen, in RGB-Werten oder per Hexadezimalcode festgelegt werden.
Beispiel 5.3.1:
Das Rechteck beginnt bei (x,y)=(50,50), mit Breite 50 und Höhe 30 Pixel. Es soll blau gefüllt werden. Der Kreis liegt direkt im Ursprung, hat einen Radius von 50 Pixel und wird grün dargestellt. Die Abbildung 11 zeigt das Ergebnis im SVG Viewer.
<rect x="50" y="50" width="50" height="30"
style="fill:rgb(0,0,255)" />
<circle cx="0" cy="0" r="50"
style="fill:rgb(0,200,150)" />
Abbildung 11:
Darstellung eines Rechtecks und Kreises in SVG
|
Zur Beschreibung von Formen, die nicht durch einfache Objekte abgebildet werden können, lassen sich Pfade definieren. Pfade sind sehr flexibel und geeignet um jegliche Formen abzubilden. Sie bestehen aus einer Aneinanderreihung von Streckenabschnitt, die durch unterschiedliche Beschreibungen entstehen. So lässt sich eine absolute Position bestimmen, beispielsweise für den Startpunkt, gerade Linien, Teilabschnitte von Ellipsen oder auch verschiedene Arten von Bezierkurven. Geschlossene Pfade bilden somit völlig neue Figuren, die wie andere Objekte gefüllt werden können. Die Angaben zur Definition der Pfade können in absoluten Werten, ausgedrückt durch große Buchstaben, und in relativen Werten mittels kleinen Buchstaben vorgenommen werden. Eine einmal definierte Form lässt sich somit bei Verwendung relativer Pfade durch die Änderung der absoluten Position einfach verschieben.
Beispiel 5.3.2:
Es soll eine gewellte Linie mittels eines Pfades definiert werden. Mittels des id
-Attributes wird der Name welle
vergeben. Die Definition findet im d
-Attribut statt. Mit Mx y
wird der Startpunkt der Linie auf
(x, y) = (50, 100) gesetzt. qdx1 dy1 dx dy
definiert eine quadratische Bezierkurve mittels relativer Koordinaten. Sie beginnt beim Startpunkt, endet bei
(xe, ye) = (x + dx, y + dy) = (150, 100) und die Krümmung wird durch den Kontrollpunkt
(x1, y1) = (x + dx1, y + dy1) = (100, 150) festgelegt. Der Endpunkt liefert automatisch den neuen Startpunkt für die nächste Kurve. Da Pfade standardmäßig nicht dargestellt werden, ist der Rand dieses Pfades mit dem style
-Attribut auf blau und seine Füllung auf leer gesetzt worden. Das Ergebnis ist in Abbildung 12 zu sehen.
<path id="welle"
d="M50 100 q50 50 100 0 q50 -50 100 0 q50 50 100 0"
style="stroke:rgb(0,0,255);fill:none"/>
Abbildung 12:
Eine gewellte Linie, die mittels einer Pfadbeschreibung erzeugt wurde.
|
Ein weiteres wichtiges Element stellt Text dar, der sich auch beliebig positionieren lässt. Die besondere Art der Verwendung von Text in SVG gegenüber anderen zweidimensionalen Grafikformaten stellt einen wesentlichen Vorteil von SVG dar. Text wird als reiner Text eingefügt und auch als Text belassen. Somit können SVG-Grafiken auch nach ihrem textuellen Inhalt durchsucht werden und sind so für Suchmaschinen interessant. Der Text kann beliebig formatiert werden, sowohl bezüglich seiner Farbe als auch seines Schrifttyps. Dazu dienen sehr ähnliche Beschreibungen wie bei CSS. Soll nicht der ganze Text verändert, sondern nur ein bestimmter Inhalt angepasst werden, so lassen sich mittels tspan
-Elementen auch einzelne Formatierungen innerhalb des Text-Objektes vornehmen. Damit lässt sich beispielsweise ein einzelner Buchstabe hoch oder tief stellen. Zur Ausrichtung des gesamten Textes können Pfade verwendet werden. Sie werden mittels textPath
-Element in den Text eingefügt und die Grundlinie des Textes wird am Pfad ausgerichtet.
Beispiel 5.3.3:
Der Text wird im Schrifttyp Arial, Schriftgröße 24 und blau dargestellt. Da der Text entlang eines Pfades laufen soll, muss er nicht positioniert werden. Dafür wird ihm ein textPath
-Element mitgegeben. Das besteht aus einem Link zu dem Pfad, der zur Ausrichtung verwendet werden soll. In diesem Fall ist das die in Beispiel 5.3.2 definierte Welle. Anhand dieser schlängelt sich der Text, der noch für das Wort Text
eine grüne Färbung enthält, vgl. Abbildung 13.
<text
style="font-family:Arial;font-size:24;fill:rgb(0,0,255)">
<textPath xlink:href="#welle">
Das ist <tspan style="fill:green">Text</tspan> auf
einem Pfad...
</textPath>
</text>
Abbildung 13:
An einem Pfad orientierter Text
|
Wie schon in Beispiel 5.3.3 bei Pfaden gezeigt, lassen sich Elemente, denen eine ID zugewiesen wurde, über diese referenzieren. Das funktioniert für jedes beliebige Element, also auch für Text. Damit lassen sich diese Elemente einfach wiederbenutzen. Weiterhin können neue Symbole erstellt werden, die in Form ihrer Definition in der Grafik nicht auftauchen, aber an verschiedenen Stellen über das use
-Element eingefügt und formatiert werden. Diese Verweise beschränken sich nicht nur auf Elemente innerhalb einer SVG-Datei, sondern lassen sich auch durch XLink (XML Linking Language) auf externe Dateien ausweiten. Dadurch ist es beispielsweise möglich eine Symboldatei anzulegen, die in unterschiedlichen Grafiken benutzte Darstellungen definiert.
Es lassen sich auch Grafiken anderer Formate in SVG-Grafiken einfügen. So sorgt das image
-Element dafür, das beispielsweise auch gif, jpg und png Grafiken integriert werden können. Sie können nicht nur der einfachen Darstellung dienen, sondern auch die Grundlage für Füllmuster bilden. Diese können neben Farben zum Füllen von Objekten benutzt werden. Farbverläufe sind eine weitere Möglichkeit um Objekte zu füllen. Durch Attribute lässt sich auch ein Wert für den Alphakanal mit angeben, der über die Transparenz eines Objektes entscheidet. Um den optischen Eindruck von Schatten und Licht zu bekommen, können Filter eingesetzt werden. Neben den existierenden lassen sich auch beliebige Filter neu definieren. Damit können verschiedenartige Effekte erzielt werden, wie beispielsweise auch das Verschmieren von Rändern.
Elemente, die sich aus verschiedenen Objekten zusammensetzen, lassen sich zu Gruppen zusammenfassen. Damit werden sie in der Gruppe platziert und ausgerichtet. In der Gruppe entsteht ein eigenes Koordinatensystem, auf das sich alle Elemente der Gruppe beziehen. Dieses stimmt standardmässig mit dem Ausgangskoordinatensystem der Zeichenfläche überein, kann aber geändert werden. Mittels des transform
-Attributes lassen sich verschiedene Arten von Transformationen auf die Gruppe anwenden. Sie beschreiben beispielsweise die neue Position oder Skalierung des neuen im Bezug zum alten Koordinatensystem. Mehrere Transformationen, wie Verschieben und Drehen können nicht nur alleine vorgenommen werden, sondern lassen sich auch in einer Transformationsmatrix zusammenfassen.
Weiter unterstützt werden noch Titel und Beschreibungselemente, die innerhalb jedes Elements angewendet werden können. Mit ihnen lässt sich der Titel der SVG-Grafik oder eine Beschreibung des Elementes festlegen. Objekte die nur definiert werden, aber nicht erscheinen sollen, lassen sich innerhalb des defs
-Elementes erzeugen. Damit existiert dieses Objekt während der Verarbeitung der SVG-Grafik und lässt sich an anderen Stellen referenzieren. Das Einfügen des defs
-Elementes ist nur direkt unterhalb des svg
-Elements möglich.
Nächste Seite: 5.4 Animationen und Interaktionen
Aufwärts: 5 SVG
Vorherige Seite: 5.2 Grundlagen
  Inhalt
Tanja Schniederberend
2003-06-11