FH-Hof Scalable Vector Graphics Richard Göbel. FH-Hof Einführung Scalable Vector Graphics (SVG) - Darstellung von Vektorgraphiken in einem Web-Browser.

Präsentation zum Thema: "FH-Hof Scalable Vector Graphics Richard Göbel. FH-Hof Einführung Scalable Vector Graphics (SVG) - Darstellung von Vektorgraphiken in einem Web-Browser."—  Präsentation transkript:

1 FH-Hof Scalable Vector Graphics Richard Göbel

2 FH-Hof Einführung Scalable Vector Graphics (SVG) - Darstellung von Vektorgraphiken in einem Web-Browser Definition durch ein Konsortium aus Unternehmen wie Adobe, Apple, IBM, Kodak an Sun W3C Empfehlung seit 2003 Wichtige Eigenschaften: Plugin von Adobe für fast alle Browser verfügbar Basis ist die Extensible Markup Language (XML) Einbindung in HTML und Nutzung von JavaScript Hier: Darstellung von Vektordaten als Positionen auf einer Landkarte

3 FH-Hof Beispiel für eine einfache SVG-Datei

4 FH-Hof Einindung in eine HTML-Datei SVG Test Einfacher Test

5 FH-Hof Darstellungsbereich Größe des Bereichs wird durch Attribut viewbox in Element svg festgelegt! (0,0)

6 FH-Hof Polygone

7 FH-Hof Pfade aus geraden und gekrümmten Linien

8 FH-Hof Kommandos für einen Pfad MStift positionieren ohne Zeichnen LLinie zur angegebenen Positions HHorizontale Linie VVertikale Linie CStark gekrümmte kubische Bezierkurve SSchwach gekrümmte kubische Bezierkurve QStark gekrümmte quadratische Bezierkurve TSchwach gekrümmte quadratische Bezierkurve AElliptischer Bogen ZGeschlossener Pfad (Rücksprung) Großbuchstaben enthalten absolute Positionen Kleinbuchstaben definieren relative Positionen

9 FH-Hof Weitere graphische Elemente line polyline polygon circlerectellipse

10 FH-Hof Darstellungsstil - Attribut Style

11 FH-Hof Darstellungsstil - Stylesheet <![CDATA[ path.special { stroke:red; stroke-width: 4; fill: none } ]]>

12 FH-Hof Texte I Merkwürdiges Polygon

13 FH-Hof Texte II Merkwürdiges Polygon

14 FH-Hof Animation

15 FH-Hof Interaktion function showStatus(evt) { alert( "Merkwürdiges Polygon"); }

16 FH-Hof Attribute für Ereignisse onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup

17 FH-Hof Gruppieren Gruppieren verschiedener Elemente mit dem Element... Gemeinsame Attribute für die Gruppe im Element g Koordinatentransformation mit Attributen: translate(x,y) scale(sx,sy) rotate(angle,x,y) skewX(angle) skewY(angle)