Proseminar XML Thema: SVG

Transkript

1 Proseminar XML Thema: SVG Sascha Berkessel Rong Liu - 1 -

2 Inhalt Inhalt Was ist SVG Geschichte Plugins und Programme Übersicht Reine SVG-Vektorgrafikprogramme Vergleich von GML, VML und SVG SVG und Flash im Vergleich Vorteile von SVG SVG in der Praxis Aufbau des SVG-Dokuments Das <svg>-element Das <g>-element Das <desc>-element Das <title>-element Das <defs>-element Das <symbol>-element Das <use>-element Das <image>-element Das <switch>-element Weitere Attribute Statische Grafikobjekte Das <rect>-element Das <line>-element Das <circle>-element Das <ellipse>-element Das <polyline>-element Das <polygon>-element Das <path>-element Weitere Attribute Text in SVG Das <text>-element Das <tspan>-element Das <tref>-element Das <textpath>-element Links in SVG Das <a>-element Farben in SVG Das <lineargradient>-element Das <radialgradient>-element Das <pattern>-element Das <filter>-element Animationen Attribute Das <animate>-element Das <set>-element Das <animatemotion>-element Das <animatecolor>-element Das <animatetransform>-element Schlussbemerkung Quellen

3 Was ist SVG - SVG - Scalable Vector Graphics - XML-basierte Auszeichnungssprache für Vektorgrafiken 1. Dieses Vektorformat ergänzt die gegenwärtig im Internet verwendeten Rasterformate (GIF,JPEG,PNG). 2. SVG ermöglicht das erstellen strukturierter Dokumente und Verarbeitung im Umfeld anderer XML-Technologien. 3. SVG-Dokumente lassen sich statisch und dynamisch generieren und relativ einfach in Server-seitige anwendungen integrieren. - Offizielle W3C-Spezifikation / DTD seit (SVG 1.0) Geschichte - Seit August 1998 arbeiten die Vertreter der wichtigsten Softwarefirmen unter der Schirmherrschaft des W3C an der neuen Vektorgrafiksprache SVG. Adobe, Netscape, IBM, Microsoft, Apple, Sun, Corel, Macromedia und andere sind an der Entwicklung des offenen Standards beteiligt, der sich jedoch frühestens mit der nächsten Browsergeneration durchsetzen wird. - seit SVG1.0 Offizielle W3C-Spezifikation/DTD zur Beschreibung von 2D- Vektorgrafiken in XML-Syntax. - seit SVG seit SVG 1.2 Plugins und Programme Adobe bietet für die Anzeige von SVG-Grafiken ein Browser-Plugin für den Internet Explorer und den Netscape Navigator (jeweils ab Version 4) an

4 Übersicht Organization Product Platforms Adobe Adobe SVG Viewer 3.2(Browser) MacOS, Win95/98/ME WinNT/2000, RedHat Linux, Solaris 8 IBM IBM SVGView(Browser) Win95/98, WinNT Apache Batik SVG browser(browser) Any Java 2 W3C Amaya 5.0(Editor/Browser) Unix and Windows Adobe Illustrator 9.0 (Editor) MacOS, Win95/98/ME WinNT/2000/XP KDD Labs JaMaPS Japan map with GPS support PalmOS CSIRO Pocket SVG Viewer Viewr Pocket PC Appligent SVG2PDF (Converts from SVG to PDF) MacOS, Win95/98/ME WinNT/2000 IBM AFP to SVG transcoder (Server-side SVG Win95/98, WinNT generators) Corels CorelDRAW 9 Win 98/2000/XP MacOS Reine SVG-Vektorgrafikprogramme WebDraw - 4 -

5 Mayura - 5 -

6 Vergleich von GML, VML und SVG GML, VML und SVG sind XML-basierte Auszeichnungssprachen für Vektorgrafiken: GML - Geography Markup Language VML - Vector Markup Language SVG - Scalable Vector Graphics; SVG und Flash im Vergleich OpenGIS Consortium (OGC) Microsoft W3C-Spezifikation/DTD SVG Flash Einsatz von Events wie onmouseover etc mit Hilfe von Java- oder VB-Script möglich durch eigenes "ActionScript", ist zwar leicht, aber man muss es lernen Formatierung über CSS1, teilweise keine Kompatibilität CSS2/Transformation über XSLT möglich SVG-Dateien sind von Text durchsuchbar, Das geht mit Flash nicht!! beispielsweise nach einem Städtenamen SVG-Dokumente sind von Suchmaschienen Das ist auch nicht möglich indexierbar Unterstützung von DOM 1 und teilweise DOM keine Unterstützung, nur eigene 2 Entwicklungen Unterstützung von ICC- und SRGB- Pofilen keine Unterstützung, nur eigene Entwicklungen voll kompatibel zu XHTML keine Kompatibilität das Plugin für den Browser ist relativ groß (ca. 200kb) (3mb) - 6 -

7 Vorteile von SVG SVG ist eine auf XML basierende Sprache SVG ist ein offizieller Standard des W3C SVG Grafiken bestehen aus ASCII-Code SVG Grafiken können mit jedem beliebigen Texteditor erstellt werden SVG Grafiken (Vektorgrafiken) sind ohne Qualitätsverlust skalierbar SVG unterstützt Stylesprachen (z.b. CSS) SVG unterstützt Scriptsprachen (z.b. JavaScript, ECMAScript) SVG besitzt ein eigenes DOM, ist konform zum DOM 1 und unterstützt teilweise DOM 2. Es wird weitgehend kompatibel zu HTML 4.0 sein. SVG ist voll kompatibel zu XHTML SVG bietet zahlreiche Filtereffekte. SVG ermöglicht das Schwenken und Zoomen in Grafiken. SVG-Dokumente sind, da sie aus Texten bestehen, durchsuchbar und damit von Suchmaschinen indexierbar. SVG bietet Unterstützung von ICC- und srgb-profilen

8 SVG in der Praxis Aufbau des SVG-Dokuments Die Grundstruktur eines SVG-Dokuments ist immer gleich: Zunächst wird mit <?xml version= 1.0 standalone= no?> die genutzte Syntax angegeben, gefolgt von der DOCTYPE-Deklaration <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " welche die genutzte Dokumenttypdefinition (DTD) enthält. Erst danach erfolgt innerhalb des Wurzelements <svg> die Deklaration des SVG-Bildes (im Folgenden wie im Englischen auch Image genannt). Im obigen Beispiel finden sich innerhalb des Wurzelelements zwei Kommentare <!-- -->; als Ausgabe ergibt sich im Browserfenster ein weißer Hintergrund: Ein SVG-Image kann komplett innerhalb eines SVG-Dokuments oder auch innerhalb eines Fragments desselben beschrieben werden, wofür die nachstehend aufgeführten Elemente zur Verfügung stehen: Das <svg>-element Jedes SVG-Dokument muss mindestens ein <svg>-element enthalten, welches als Wurzelelement dient. Daneben ist das Einbetten weiterer <svg>-elemente möglich, z.b. zum Gruppieren verschiedener anderer Elemente. Dies hat den Vorteil, dass man nur das einbettende - 8 -

9 <svg>-element verschieben muss; die eingebetteten Elemente behalten ihre relative Position zueinander. Mögliche Attribute für das <svg>-element sind z.b.: xmlns[:prefix]= resource-name : Hier lässt sich ein passender XML- Namensraum angeben. version : Die SVG-Version, auf die das Dokument (oder Dokumentfragment) aufbaut ( 1.0 oder 1.1 ). x und y : Diese Attribute beschreiben die Position des Elements innerhalb des Images. Die Position wird anhand der Koordinatenachsen bestimmt, die wie folgt verteilt sind: (0,0) x y height und width : Diese Attribute geben die Höhe und die Breite des Elements an. Das <g>-element Mit Hilfe des <g>-elements lassen sich, wie schon mit Hilfe des <svg>-elements, verschiedene Elemente gruppieren. Der Vorteil des <g>-elements liegt aber in der hier möglichen Transformierbarkeit, welche für die Animation von Gruppen mit SVG von Bedeutung ist, wie im Kapitel Animationen noch zu sehen sein wird. Das <desc>-element Das <desc>-element dient der wörtlichen Beschreibung von Elementen. Es wird nicht gerendert, ist also bei der Ausgabe des Elements im Browserfenster nicht sichtbar. Das <title>-element Das <title>-element ermöglicht die Ausgabe von Text in der Kopfzeile des Browserfensters. Mehr zum Thema Text in SVG findet man im gleichnamigen Kapitel. Das <defs>-element SVG ermöglicht dem User die Wiederverwendung bereits erstellten Codes innerhalb von individuellen SVG-Dokumenten. Diese referenzierten Elemente (engl. referenced elements) erstellt man innerhalb eines <defs>-elements. Sie erlauben es z.b., innerhalb eines SVG-Dokuments mehrfach benötigte Elemente ein einziges Mal zu definieren und über ihren URL (Uniform Resource Locator) darauf zuzugreifen. Dazu muss man das jeweilige Element mit einer ID versehen, welche innerhalb des jeweils öffnenden Element-Tags als Attribut festgelegt wird

10 Im folgenden Beispiel wird ein <lineargradient>-element (s. Kapitel Farben in SVG ) innerhalb des <defs>-elements definiert. Mittels des Attributes id= Gradient wird ihm der Name Gradient zugewiesen. In den beiden auf das <defs>-element folgenden <rect>- Elementen (s. Kapitel Statische Grafikobjekte ) wird dieser Gradient zur Füllung des jeweiligen Rechtecks benutzt. Dies geschieht über das style-attribut fill: Das <symbol>-element Das <symbol>-element kann ähnlich wie das <g>-element eingesetzt werden, insbesondere in Verbindung mit dem <use>-element (s. dort). Der Unterschied zwischen <symbol>- und <g>- Element besteht darin, dass letztgenanntes vollständig gerendert wird, von erstgenanntem jedoch nur Instanzen gerendert werden, die von einem <use>-element erzeugt worden sind. Mögliche Attribute zu <symbol> sind:

11 viewbox= min-x min-y width height : Definiert das Viewport, dient also der Anpassung an die aktuelle Größe des Browserfensters. preserveaspectratio : Definiert die Ausrichtung der Elemente im Viewport. Das <use>-element Mit dem <use>-element kann man eine Referenz auf ein SVG-Element darstellen. Insbesondere ist <use> interessant für die mehrfache Verwendung von definierten <svg>-, <g>-, <symbol>-, <rect>-, <line>- oder vergleichbaren Elementen (s. jeweils dort). Der Zugriff auf solche Elemente erfolgt mittels xlink:href= [jeweilige URL]. Im Gegensatz zum nachstehend erläuterten <image>-element kann ein <use>-element jedoch nur auf solche Referenzen zugreifen, welche innerhalb des aktuellen SVG-Dokuments definiert worden sind. Mit der Verwendung des <image>-elements ist auch der Zugriff auf Elemente aus anderen Dateien möglich. Attribute zu <use> sind: x, y, height und width : Diese sind schon bekannt xlink:href : Gibt die URL des Elements an, das referenziert werden soll. Im folgenden Beispiel wird ein vordefiniertes Rechteck mit Hilfe von <use> zweimal verwendet:

12 Das <image>-element Das <image>-element ermöglicht das Einbinden von SVG-Elementen, die außerhalb des aktuellen SVG-Dokuments definiert worden sind, sowie von Bitmap-Grafiken wie *.png, *.gif oder *.jpg. Im Gegensatz zu <use> ist <image> nicht auf Elemente innerhalb des aktuellen SVG-Dokuments anwendbar. Die Attribute x, y, height, width und xlink:href sind bereits bekannt. Im folgenden Beispiel wird das Foto AwacsProd.jpg in ein SVG-Image eingebunden:

13 tet Das <switch>-element Mit Hilfe des <switch>-elements lassen sich die Optionen für das Rendern von Grafiken ändern. Die Attribute zu <switch> sind: requiredfeatures : Dieses Attribut enthält eine Liste von FeatureStrings, die bestimmte erwartete Eigenschaften des jeweiligen Elements definieren. requiredextensions : Dieses Attribut enthält eine Liste von erwarteten Language Extensions. systemlanguage : Dieses Attribut enthält eine Liste von Systemsprachen. Während des Renderns werden die in <switch> eingebetteten Elemente nacheinander überprüft. Die aufgelisteten Attribute liefern dabei boolesche Werte zurück. Das erste Element, welches für alle drei Attribute den Wert true liefert, wird im Browserfenster dargestellt, die übrigen nicht. Interessant ist <switch> z.b. in Verbindung mit der Internationalisierung von Webseiten: Man kann hier den Hintergrund einer Seite ein einziges Mal definieren und bestimmte Elemente und Texte nur dann einfügen, wenn der User auf seinem System beispielsweise die Systemsprache Englisch hat. So ist der Internetauftritt dann je nach Land verschieden

14 Weitere Attribute Hier seien einige Attribute genannt, die auf alle SVG-Elemente angewandt werden können: id : Dieses Attribut weist dem Element einen Namen zu. xml:base : Weist dem Element eine Base zu. xml:language : Weist dem Element eine Sprache zu. xml:space : Legt fest, ob White Spaces zum Zeichensatz gehören oder nicht

15 Statische Grafikobjekte Nachstehend möchten wir eine kurze Übersicht über die verschiedenen statischen Grafikobjekte aus SVG geben: Das <rect>-element Das <rect>-element definiert ein Rechteck. Attribute zu <rect> sind: x, y, height und width : Diese Attribute sind bereits bekannt. rx und ry : Definieren, ob und wie stark die Kanten eines Rechtecks abgerundet sein sollen. rx definiert dabei den Radius in x-, ry den in y-richtung; der Standardwert ist 0 (ohne Rundung). style : s. Weitere Attribute (S. 20) Das folgende Beispiel definiert ein Quadrat mit Seitenlänge 100 mit schwarzem Rand von 4 Pixeln Breite und ohne Füllung, dessen linke obere Ecke im Punkt (10,20) liegt. Rand und Füllung werden hier mit CSS-Attributen definiert. Das <line>-element Mit Hilfe von <line> lassen sich Strecken darstellen. Neben der Verwendung verschiedener CSS- Attribute (mit style) kann man auch mittels der normalen Attribute stroke und stroke-width die Darstellung der Strecke festlegen. Zudem kommen hier folgende Attribute zur Anwendung: x1 und y1 : Definieren den Startpunkt der Strecke. x2 und y2 : Definieren den Endpunkt der Strecke. Das folgende Beispiel definiert eine schwarze Strecke der Stärke 4 zwischen den Punkten (10,20) und (160,170):

16 Das <circle>-element <circle> dient der Darstellung von Kreisen. Neben den Attributen fill, stroke und strokewidth (alternativ wieder CSS-Atribute über style) sind die folgenden Attribute von Bedeutung: cx und cy : Legen den Mittelpunkt des Kreises fest. r : Definiert den Mittelpunkt des Kreises. Das Beispiel definiert einen Kreis um den Punkt (100,100) mit einem Radius von 90: Das <ellipse>-element Mit Hilfe von <ellipse> lassen sich Ellipsen darstellen. Attribute zu <ellipse> sind: cx und cy : Definieren den Mittelpunkt der Ellipse. rx und ry : Legen die Radien in x- und y-richtung fest. Im folgenden Beispiel wird eine Ellipse ohne Füllung mit Mittelpunkt (100,100) und schwarzem Rand definiert, deren Radius in horizontaler Richtung 90, in vertikaler Richtung 45 beträgt: Selbstverständlich lässt sich ein Kreis mit Hilfe eines <ellipse>-elements darstellen: Man weist lediglich rx und ry den gleichen Wert zu. Das <polyline>-element <polyline> ermöglicht die Darstellung von Kombinationen von Strecken. Dazu wird folgendes Attribut benötigt: points : Dieses Attribut enthält eine Liste von Start- und Endpunkten der jeweiligen Strecken, wobei der Endpunkt der n-ten gleichzeitig den Startpunkt der n+1-ten Strecke darstellt

17 Soll das Element eine Füllung erhalten, so muss man darauf achten, dass vom SVG-Viewer zwischen dessen Start- und Endpunkt eine virtuelle Linie eingefügt wird, die die Begrenzung der auszufüllenden Fläche darstellt. Das folgende Beispiel verdeutlicht die Thematik: Das <polygon>-element Das <polygon>-element definiert ein Vieleck. Wie schon bei <polyline> enthält das Attribut points die Start- und Endpunkte der Kanten. Die letzte Kante muss nicht zusätzlich definiert werden; der SVG-Viewer rendert das Objekt so, dass die schließende Kante im Browserfenster dargestellt wird. Das folgende Beispiel zeigt ein gleichschenkliges Dreieck mit schwarzem Rand und grüner Füllung:

18 Das <path>-element <path> ermöglicht die Darstellung von Freihand-Figuren. Die Definition eines <path>-elements ist vergleichbar mit dem Zeichnen einer Figur mit einem Stift. Man nutzt dazu folgende Attribute: d : Dieses Attribut beschreibt den Zeichenvorgang; es enthält die verschiedenen Kommandos. Die folgende Tabelle stellt die möglichen Kommandos dar: Kommando Name Beschreibung M m moveto Bewegt die Position des imaginären Stiftes zu einem Punkt, ohne zu zeichnen. L l lineto Zeichnet eine Linie vom aktuellen zum angegebenen Punkt. H h horizontal lineto Zeichnet eine waagrechte Linie vom aktuellen zum angegebenen Punkt. V v vertical lineto Zeichnet eine senkrechte Linie vom aktuellen zum angegebenen Punkt. C c curveto Zeichnet eine kubische Bezier-Kurve vom aktuellen Punkt aus. S s shorthand / smooth curveto Zeichnet eine kubische Bezier-Kurve vom aktuellen Punkt aus. Q q quadratic Bezier curveto Zeichnet eine quadratische Bezier-Kurve vom aktuellen Punkt aus. T t shorthand / smooth quadratic Bezier curveto Zeichnet eine quadratische Bezier-Kurve vom aktuellen Punkt aus. A a elliptical arc Zeichnet einen Bogen vom aktuellen Punkt aus. Z z closepath Schließt den path, also den Pfad, durch zeichnen einer Linie vom letzten zum ersten Punkt. Man unterscheidet zwischen absoluten (GROSS) und relativen (klein) Kommandos: Absolute Kommandos beziehen sich auf die Position innerhalb des Koordinatensystems, relative hingegen beziehen sich auf die Positionsänderung in Bezug auf den vorangegangenen Punkt. Die folgenden Beispiele sollen einen Überblick über die verschiedenen Bezier-Kurven geben und zudem die Anwendung der relativen Kommandos verdeutlichen; man muss darauf achten, dass die jeweilige Anzahl der die Bezier-Kurve beschreibenden Punkte gleich der im Beispiel ist, da sonst kein Rendering möglich ist

19 - 19 -

20 Weitere Attribute Nachstehend einige Attribute, welche für alle statischen Grafikobjekte eingesetzt werden können: fill : Füllt das Element mit einer Farbe. stroke und stroke-width : Definieren die Farbe und Dicke des Randes. visibility : Definiert, ob das Element sichtbar (visible) oder versteckt (hidden) ist. style : Dient der Verwendung von CSS-Attributen

21 Text in SVG Aus der Perspektive von SVG ist Text schlicht ein weiterer Teil des Dokuments, der vom SVG- Viewer gerendert wird. Entsprechend können am Text all die Änderungen vorgenommen werden, die auch bei den statischen Grafikobjekten möglich sind. Die verschiedenen Methoden, Text einzubinden, sind: Das <text>-element Die einfachste Möglichkeit, Text in ein SVG-Image einzubinden, ist das <text>-element. Der auszugebende Text steht dabei zwischen Start- und End-Tag. Man muss beachten, dass Text, der mit Hilfe des <text>-elements eingebunden wird, immer genau eine Textzeile darstellt. Da SVG keine Zeilenumbrüche anbietet und auch keine direkte Unterstützung für Scroll-Leisten bietet, muss man den Text gegebenenfalls auf mehrere <text>-elemente verteilen, damit er auch komplett sichtbar bleibt. Das Attribut, welches neben den schon bekannten wie x und y benötigt wird, ist style : Neben stroke, stroke-width und fill bietet style noch verschiedene andere Möglichkeiten, die Ausgabe zu verändern, welche sich mit Hilfe der CSS-Attribute realisieren lassen: font-family definiert die Schriftart. font-style definiert, ob der Text normal, kursiv (italics) oder schräg (oblique) ausgegeben werden soll. font-size legt die Schriftgröße fest. font-weight definiert, wie fett (oder auch nicht) der Text ausgegeben werden soll. Das <tspan>-element Das <tspan>-element dient, wie bereits <text>, der zeilenweisen Ausgabe von Text. Dabei bietet <tspan> zwei Vorteile: Zum einen ermöglicht es die relative Positionierung von Text, zum anderen lässt sich damit das Kopieren von mehreren Textzeilen durch einen User (z.b. bei Internetseiten) realisieren. <tspan> muss immer in ein <text>-element eingebunden werden; neben den auf <text> anwendbaren sind hier zusätzlich noch folgendes Attribut wichtig: dy : Ermöglicht die relative Positionierung von Text (vgl. auch die CSS-Spezifikation). Lediglich die erste Textzeile muss absolut positioniert werden. Das folgende Beispiel zeigt die wesentlichen Unterschiede zwischen <text> und <tspan> bezüglich der Realisierung von Zeilenumbrüchen:

22 Das <tref>-element Mit Hilfe des <tref>-elements lässt sich vordefinierter Text in ein SVG-Element einbinden: Hat man mit <text> innerhalb des <defs>-elements einen Text vordefiniert, so kann man diesen innerhalb des zu rendernden Images in ein weiteres <text>-element einbinden. Dies erfolgt über das bereits bekannte Attribut xlink:href. Wie das folgende Beispiel zeigt, verändert man die Schriftart sowie die übrigen Eigenschaften erst an der Stelle, an der der vordefinierte Text eingebunden wird:

23 Das <textpath>-element Das <textpath>-element ermöglicht das Ausrichten von Text entlang eines (zu definierenden) Pfades. Dazu bettet man das <textpath>-element in ein <text>-element ein und greift über das Attribut xlink:href auf den gewünschten Pfad zu. Das folgende Beispiel zeigt eine einfache Anwendungsmöglichkeit von <textpath>:

24 - 24 -

25 Links in SVG Das <a>-element Mit Hilfe des <a>-elements lassen sich Links in ein SVG-Image einfügen. Um ein Element mit einem URL zu verlinken, muss man dieses in das <a>-element einbetten. Die benötigten Attribute snd: xlink:href : Hier gibt man den Ziel-URL an. xlink:show : Definiert, ob das Ziel in einem neuen Fenster (new) oder im gleichen Fenster (replace) dargestellt werden soll. Weitere Attribute aus XLink sind möglich. Im folgenden Beispiel öffnet ein Mausklick auf den Text die Homepage des Proseminars. Da sich die Auswirkungen auf einem Blatt Papier schlecht live darstellen lassen, sei zur besseren Anschauung der Download des Beispiels von empfohlen. Hier finden sich neben sämtlichen Beispielen aus dieser Ausarbeitung noch weitere Appetithappen aus der weiten Welt von SVG

26 Farben in SVG Die Farben in SVG werden über das RGB-Modell definiert. Man hat drei Möglichkeiten, eine Farbe zu einem Element anzugeben: hexadezimal: #rrggbb dezimal: rgb(r,g,b) Schlüsselwörter: blue, red, Nachstehend finden Sie eine Übersicht der in SVG verfügbaren Schlüsselwörter. Auf diesem Weg können mehr als 140 verschiedene Farben angegeben werden: aliceblue rgb(240, 248, 255) antiquewhite rgb(250, 235, 215) aqua rgb( 0, 255, 255) aquamarine rgb(127, 255, 212) azure rgb(240, 255, 255) beige rgb(245, 245, 220) bisque rgb(255, 228, 196) black rgb( 0, 0, 0) blanchedalmond rgb(255, 235, 205) blue rgb( 0, 0, 255) blueviolet rgb(138, 43, 226) brown rgb(165, 42, 42) burlywood rgb(222, 184, 135) cadetblue rgb( 95, 158, 160) chartreuse rgb(127, 255, 0) chocolate rgb(210, 105, 30) coral rgb(255, 127, 80) cornflowerblue rgb(100, 149, 237) cornsilk rgb(255, 248, 220) crimson rgb(220, 20, 60) cyan rgb( 0, 255, 255) darkblue rgb( 0, 0, 139) darkcyan rgb( 0, 139, 139) darkgoldenrod rgb(184, 134, 11) darkgray rgb(169, 169, 169) darkgreen rgb( 0, 100, 0) darkgrey rgb(169, 169, 169) darkkhaki rgb(189, 183, 107) darkmagenta rgb(139, 0, 139) darkolivegreen rgb( 85, 107, 47) darkorange rgb(255, 140, 0) darkorchid rgb(153, 50, 204) darkred rgb(139, 0, 0) darksalmon rgb(233, 150, 122) lightpink rgb(255, 182, 193) lightsalmon rgb(255, 160, 122) lightseagreen rgb( 32, 178, 170) lightskyblue rgb(135, 206, 250) lightslategray rgb(119, 136, 153) lightslategrey rgb(119, 136, 153) lightsteelblue rgb(176, 196, 222) lightyellow rgb(255, 255, 224) lime rgb( 0, 255, 0) limegreen rgb( 50, 205, 50) linen rgb(250, 240, 230) magenta rgb(255, 0, 255) maroon rgb(128, 0, 0) mediumaquamarine rgb(102, 205, 170) mediumblue rgb( 0, 0, 205) mediumorchid rgb(186, 85, 211) mediumpurple rgb(147, 112, 219) mediumseagreen rgb( 60, 179, 113) mediumslateblue rgb(123, 104, 238) mediumspringgreen rgb( 0, 250, 154) mediumturquoise rgb( 72, 209, 204) mediumvioletred rgb(199, 21, 133) midnightblue rgb( 25, 25, 112) mintcream rgb(245, 255, 250) mistyrose rgb(255, 228, 225) moccasin rgb(255, 228, 181) navajowhite rgb(255, 222, 173) navy rgb( 0, 0, 128) oldlace rgb(253, 245, 230) olive rgb(128, 128, 0) olivedrab rgb(107, 142, 35) orange rgb(255, 165, 0) orangered rgb(255, 69, 0) orchid rgb(218, 112, 214)

27 darkseagreen rgb(143, 188, 143) darkslateblue rgb( 72, 61, 139) darkslategray rgb( 47, 79, 79) darkslategrey rgb( 47, 79, 79) darkturquoise rgb( 0, 206, 209) darkviolet rgb(148, 0, 211) deeppink rgb(255, 20, 147) deepskyblue rgb( 0, 191, 255) dimgray rgb(105, 105, 105) dimgrey rgb(105, 105, 105) dodgerblue rgb( 30, 144, 255) firebrick rgb(178, 34, 34) floralwhite rgb(255, 250, 240) forestgreen rgb( 34, 139, 34) fuchsia rgb(255, 0, 255) gainsboro rgb(220, 220, 220) ghostwhite rgb(248, 248, 255) gold rgb(255, 215, 0) goldenrod rgb(218, 165, 32) gray rgb(128, 128, 128) grey rgb(128, 128, 128) green rgb( 0, 128, 0) greenyellow rgb(173, 255, 47) honeydew rgb(240, 255, 240) hotpink rgb(255, 105, 180) indianred rgb(205, 92, 92) indigo rgb( 75, 0, 130) ivory rgb(255, 255, 240) khaki rgb(240, 230, 140) lavender rgb(230, 230, 250) lavenderblush rgb(255, 240, 245) lawngreen rgb(124, 252, 0) lemonchiffon rgb(255, 250, 205) lightblue rgb(173, 216, 230) lightcoral rgb(240, 128, 128) lightcyan rgb(224, 255, 255) lightgoldenrodyellow rgb(250, 250, 210) lightgray rgb(211, 211, 211) lightgreen rgb(144, 238, 144) lightgrey rgb(211, 211, 211) palegoldenrod rgb(238, 232, 170) palegreen rgb(152, 251, 152) paleturquoise rgb(175, 238, 238) palevioletred rgb(219, 112, 147) papayawhip rgb(255, 239, 213) peachpuff rgb(255, 218, 185) peru rgb(205, 133, 63) pink rgb(255, 192, 203) plum rgb(221, 160, 221) powderblue rgb(176, 224, 230) purple rgb(128, 0, 128) red rgb(255, 0, 0) rosybrown rgb(188, 143, 143) royalblue rgb( 65, 105, 225) saddlebrown rgb(139, 69, 19) salmon rgb(250, 128, 114) sandybrown rgb(244, 164, 96) seagreen rgb( 46, 139, 87) seashell rgb(255, 245, 238) sienna rgb(160, 82, 45) silver rgb(192, 192, 192) skyblue rgb(135, 206, 235) slateblue rgb(106, 90, 205) slategray rgb(112, 128, 144) slategrey rgb(112, 128, 144) snow rgb(255, 250, 250) springgreen rgb( 0, 255, 127) steelblue rgb( 70, 130, 180) tan rgb(210, 180, 140) teal rgb( 0, 128, 128) thistle rgb(216, 191, 216) tomato rgb(255, 99, 71) turquoise rgb( 64, 224, 208) violet rgb(238, 130, 238) wheat rgb(245, 222, 179) white rgb(255, 255, 255) whitesmoke rgb(245, 245, 245) yellow rgb(255, 255, 0) yellowgreen rgb(154, 205, 50)

28 Das <lineargradient>-element Lineare Gradienten, also Farbübergänge entlang einer Strecke, können in senkrechter, waagrechter und diagonaler Richtung auftreten. Die Farbübergänge müssen dabei nicht auf zwei Farben beschränkt sein. Man nutzt folgende Attribute: x1, y1, x2 und y2 : Definieren Start- und Endpunkt der Strecke, an der der Gradient ausgerichtet werden soll. spreadmethod : Legt fest, was passiert, wenn der Gradient kürzer ist als die entsprechende Strecke im zu füllenden Element. Man unterscheidet: pad : Der freibleibende Bereich wird mit der letzten Farbe des Gradienten aufgefüllt. reflect : Der freibleibende Bereich wird durch die Spiegelung des Gradienten aufgefüllt. repeat : Der freibleibende Bereich wird in der Form aufgefüllt, dass der Gradient wieder von vorn beginnt. gradientunits : Definiert, ob sich das dem Rendern zugrunde gelegte Koordinatensystem auf das des Users (userspaceonuse) oder die BoundingBox des Elements, auf das der Gradient angewandt werden soll (objectboundingbox), bezieht. Zusätzlich müssen in einem <lineargradient>-element die gewünschten Farben angegeben werden. Dies geschieht mittels des <stop>-elements. Attribute zu <stop> sind: offset : Definiert die Position des Stops entlang des Vektors. stop-color: Bestimmt die jeweilige Farbe. stop-opacity: Definiert die Transparenz der betreffenden Farbe. Um ein Element bzw. dessen Rand mit einem Gradienten zu füllen, muss man diesen vorher definieren. Dann kann man ihn unter Angabe des URL in ein Element einfügen. Im folgenden Beispiel werden ein horizontaler zwei- und ein diagonaler dreifarbiger Gradient definiert. Beide werden zum Füllen je eines Rechtecks verwendet, wobei im ersten Fall die vollständige Füllung durch Reflexion, im letzten Fall die vollständige Füllung durch Wiederholung erfolgt (vgl. Attribut spreadmethod):

29 Das <radialgradient>-element Das <radialgradient>-element ermöglicht die Darstellung von Farbverläufen entlang eines Kreisradius (von innen nach außen). Attribute sind hier cx und cy : Definieren den Mittelpunkt des den Gradienten umgebenden Kreises. r : Bestimmt den Radius. fx und fy : Definieren den Brennpunkt des Gradienten. Die Bestimmung der verwendeten Farben erfolgt wie bei <lineargradient>. Das folgende einfache Beispiel zeigt einen radialen Gradienten: Das <pattern>-element Mit Hilfe des <pattern>-elements lassen sich Muster erstellen. Als Attribute dienen hier x, y, height und width, die Positionierung und Abstände der einzelnen Elemente im Muster

30 definieren, sowie patternunits, das analog zum Attribut gradientunits bei Gradienten eingesetzt wird. Das folgende Beispiel zeigt ein Rechteck, welches mit einem Pattern gefüllt wird: Das <filter>-element Filter verändern die Darstellung von SVG-Elementen deutlich und das auf verschiedenste Art. Attribute zum <filter>-element sind x, y, height und width, die den Wirkungsbereich des Filters begrenzen. Daneben müssen in einem Filterelement sog. Filterprimitiven, wie z.b. fegaussianblur oder feturbulence, enthalten sein. Diese enthalten wiederum selbst Attribute, z.b. in und result (Eingangskanal und Ausgabe). Auch eine Verkettung von Filterprimitiven ist möglich, wie das folgende Beispiel zeigt. Es soll lediglich als Appetithappen dienen - eine weitergehende Erläuterung der teils komplexen Thematik würde den Rahmen dieser Übersicht sprengen

31 - 31 -

32 Animationen Als Animation bezeichnet man die Veränderung einer oder mehrerer Eigenschaften eines Elements innerhalb einer bestimmten Zeitspanne. Die Animationselemente in SVG wurden von den Entwicklern von SVG in Zusammenarbeit mit der W3C Synchronized Multimedia Working Group, welche für die Entwicklung von SMIL verantwortlich zeichnet, entwickelt. Dementsprechend sind die Animationen in SMIL und SVG ähnlich (vgl. animate, set, animatemotion und animatecolor), wobei SVG teilweise spezielle Erweiterungen aufweist. Attribute Folgende Attribute definieren die verschiedenen Animationselemente genauer: attributename : Welches Argument animieren? begin : Wann beginnt der Animationsvorgang? dur : Wie lange dauert der Animationsvorgang an? end : Bis wann dauert der Animationsvorgang an? repeatcount : Wie oft wird animiert (1 - indefinite)? fill : Neuen Wert beibehalten (freeze) oder nicht (remove)? calcmode: Definiert die Art der Animation (z.b. plötzlich (discrete) oder linear). values : Wird eingesetzt, wenn mehrere vorgegebene Werte durchlaufen werden sollen. from und to : Definiert die Änderung einer Eigenschaft von einem Wert zu einem anderen Wert Das <animate>-element <animate> dient dazu, einzelne Attribute zu animieren. Das folgende Beispiel zeigt ein Rechteck, das zwei Sekunden nach dem Laden des Images im Laufe von fünf Sekunden seine Breite verdoppelt. Es sei noch einmal darauf hingewiesen, dass alle Beispiele zum Download bereitstehen, so dass man die Ausgabe auch live erleben kann

33 Das <set>-element <set> ermöglicht die Änderung des Wertes eines Attributs für eine bestimmte Zeitspanne. Das folgende Beispiel zeigt ein Rechteck, welches seine Farbe ändert, solange man mit dem Mauszeiger darüberfährt (mousein und mouseout). Das <animatemotion>-element <animatemotion> ermöglicht die Animation von Elementen entlang eines Pfades. So zeigt das folgende Beispiel ein Rechteck, welches entlang eines Pfades läuft und sich entsprechend dem Verlauf des Pfades dreht (rotate= auto )

34 Das <animatecolor>-element <animatecolor> ermöglicht die Darstellung von Farbänderungen im Verlauf einer Zeitspanne. Das <animatetransform>-element <animatetransform> ermöglicht die Animation von Transformationselementen. Das folgende Beispiel zeigt eine Anwendungsmöglichkeit von <animatetransform>. Hier wird ein Rechteck in Rotation versetzt

35 Schlussbemerkung Dies soll nur ein Überblick über SVG gewesen sein. Insofern ist es nur verständlich, dass nicht jeder Bereich bis ins Detail behandelt werden kann. Da die Möglichkeiten, die SVG bietet, jedoch sehr groß sind, sei allen, die sich näher für die Thematik interessieren, ein Blick in die Quellen empfohlen Quellen Zwei Bücher mit zahlreichen Informationen rund um SVG im speziellen und XML im allgemeinen: Andrew H. Watt: Designing SVG Web Graphics, New Riders, 09/2001, ISBN E.R. Harold / W. Scott Means: XML In A Nutshell, O Reilly, 2. Auflage 2003, ISBN Verschiedene Informationen und Beispiele rund um SVG im Netz: Beispiele zum Vortrag: Spezifikationen von SVG, CSS und weiteren auf der Homepage des WorldWideWebConsortium: Weitere Beispiele und Informationen: