Gliederung. Grundlagen für SVG SVG. Scable Vector Graphics. grafische Datenverarbeitung XML

Transkript

1 Gliederung Grundlagen für SVG grafische Datenverarbeitung XML SVG Einführung Grundgerüst Basics Grundformen Pfade Transformationen Animationen Interaktivität Anwendungen Fazit Ausblick WYSIWYG Editoren 1

2 Grafische DV Was sind Grafiken visuell strukturierte Informationsträger Mensch nimmt seine Umwelt zu ca. 80% visuell wahr Ein Bild sagt mehr als tausend Worte zwei verschiedene Ansätze der Modellierung - Rastergrafiken - Vektorgrafiken 2

3 Grafische DV Rastergrafiken mosaikartiger Aufbau bestehend aus einzelnen Bildpunkten (Pixel) durch Aneinanderreihung dieser ensteht ein Bild Beispiele: JPG, GIF, PNG etc. Gesamteindruck zählt 3

4 Grafische DV Vektorgrafiken basieren auf Vektoren Grafik wird zunächst durch Punkte im Koordinatensystem beschrieben durch mathematische Funktionen können dann Formen erzeugt werden (z.b. Linien, Rechtecke etc.) Beispiele: Corel Draw, Flash unanfällig gegen alle Arten von Transformationen 4

5 Grafische DV direkter Vergleich Speicherbedarf Rastergrafiken benötigen immer mehr Speicher längere Ladezeiten bei Vektorgrafiken Einsatzgebiete Raster eignen sich für Bilder mit vielen Farben (Fotos) Vektoren eigenen sich für detailärmere Bilder, die ohne Verluste zoombar sein sollen 2D / 3D Raster nur für 2D geeignet Vektoren können mit Einführung der dritten Dimension zur Darstellung von 3D-Grafiken genutzt werden 5

6 XML Einstieg vom W3C vorgeschlagener Dokumentationsstandard Benutzer kann seine Texte durch eigen gewählte tags strukturieren für ein valides XML-Dokument sind folgende Dateien wichtig : xy.xml (extensible Markup Language eigentlicher Inhalt der Datei) xy.dtd (Dokument Type Definition enthält Strukturbeschreibungen) xy.xsd (alternative Strukturbeschreibung im XML-Stil) xy.xsl (Stylessheet welches die Darstellungsweise der tags regelt) 6

7 XML buch.dtd <xml version= 1.0 encoding= ISO ?> <!ELEMENT buch (Titel, Autor*, Verlag)> <!ATTLIST buch Jahr CDATA #REQUIRED> <!ELEMENT Titel <!ELEMENT Autor <!ELEMENT Verlag (#PCDATA)> (#PCDATA)> (#PCDATA)> 7

8 XML buch.xml <xml version= 1.0 encoding= ISO ?> <!DOCTYPE buch SYSTEM buch.dtd > <buch Jahr= 2002 > <Titel>Computerdenken</Titel> <Autor>Roger Penrose</Autor> <Verlag>Spektrum</Verlag> </buch> 8

9 XML Syntaxregeln es existiert genau ein Wurzelelement alle Elemente müssen mit entsprechenden Anfangs- und Endtags deklariert werden innere Schachtelung muss korrekt eingehalten werden (<x><y>...</y></x>) Attributwerte werden in Anführungszeichen geschrieben Kommentare müssen der Form <! > entsprechen wohlgeformtes (noch nicht valides) XML-Dokument 9

10 SVG Einführung ürsprünglich von Adobe als Gegenentwurf von Flash und VML entwickelt(1998), später als W3C-Standard verabschiedet Revision 1.0 September 2001, Revision 1.1 Januar 2003 Sprache zur Beschreibung von Vektorgrafiken in XML-Vokabular möglich sind Grundformen wie Rechtecke, Linien, Polygone, Kreise etc. aber auch komplexere Formen wie Pfade sind möglich SVG-Inhaltsformatierungen sind mit CSS möglich SVG-Inhalte lassen sich leicht mit JS, Perl, PHP usw. dynamisch erzeugen und verändern Techniken wie Transformationen, Animationen, Filtereffekte und Interaktivität ermöglichen komplexe Strukturen 10

11 Basics Grundgerüst <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="1024" height="768"> </svg> 11

12 Basics Grundgerüst -optinale Erweiterungen 1 ECMAScript <defs> <script type=text/javascript > <![CDATA[ function bsp() { } ]]> </script> </defs> 12

13 Basics Grundgerüst -optinale Erweiterungen 2 CSS-Formatierungen <defs> <style type=text/css > <![CDATA[.bsp { fill: green; stroke: blue; stroke-width: 2px; } ]]> </style> </defs> 13

14 Basics Koordinatensystem (0,0) width/height x ViewBox viewbox= x y width height y 14

15 Basics Ausrichtung von Elementen width, height : Breite und Höhe der Grafik viewbox x,y, width, height (internes Koordinatensystem) preserveaspectratio = none meet slice (Steuerung des Seitenverhältnisses) none : komplette Ausfüllung des Sichtbereichs meet : zu große Grafiken werden proportional zum Sichtbereich verkleinert slice : Sichtbereich wird komplett ausgefüllt, Teile von Grafiken ggf. Abgeschnitten 15

16 Basics Gruppieren <g fill= none stroke="blue" stroke-width="1" > <rect x="6cm" y="1cm" width="8cm" height="12cm" fill="yellow" /> <circle cx= 4cm cy= 2cm r= 3.5cm /> </g> Rechteck und Kreis erhalten beide die gleichen Eigenschaften, da beide in Gruppe g enthalten sind 16

17 Basics Hyperlinks in Grafikobjekten <a xlink:href=" <circle cx="100" cy="100" r="75" fill="green"/> </a> Texte <a xlink:href=... > <text x=... y=... < Hier der Text für den link </text> </a> Bsp link.svg 17

18 Basics externe Grafiken <image xlink:href="../pics/pixelgrafik.gif" x="100" y="100" width="300" height="200" /> unterstütze Bildformate : GIF JPG PNG SVG Bsp image_ex.svg 18

19 Basics Sound <a:audio xlink:href="1.mp3" volume="100" begin="1s"> </a:audio> optinale Attribute : end=... repeatdur=... unterstützte Formate : WAV, MP3 19

20 Grundformen Teil 1 Linie: <line x1= 100 y1= 50 x2= 200 y2= 150 /> Rechteck <rect x= 200 y= 100 width= 50 height= 50 rx= 25 ry= 25 /> Kreis <circle cx= 100 cy= 150 r= 75 /> Ellipse <ellipse cx= 100 cy= 75 rx= 200 ry= 250 /> BSP grund.svg 20

21 Grundformen Teil 2 Polygon: <polygon stroke="black" fill="pink" points="150, , , , , , , , , ,195 79, , , ,131 79,76 131,105" /> Polyline: <polyline stroke="black" fill="none" stroke-width="2" points="500, , ,190" /> Bsp grund2.svg 21

22 Pfade Teil 1 Pfad: <path d= M40,40 L50,70 H90 V120 L180,185 /> d= Pfaddaten mit folgenden Parametern: [M,m] x,y [L,l] x,y [H,h] x [V,v] y [C,c] x1, y1, x2, y2, x, y [Q,q] x1, y1, x, y [Z,z] Moveto Lineto Horizontal line Vertical line Cubic Bezier-curveto Quadratic Bezier-curveto Closepath absolut relativ 22

23 Pfade quadratische Bezierkurven mathematische Funktion P(t) = P 0 (1-t) 2 +2P 1 (1-t)t+P 2 t 2 beschreibt eine Kurve zwischen P 0 und P 2 über einen Anfasser P 1 t ist eine Laufvariable zwischen 0 und 1 Beispiel... <path d="m60,40 Q20, ,120" fill="blue"/>... Bsp path2.svg 23

24 Pfade kubische Bezierkurven mathematische Funktion P(t) = P 0 (1-t) 3 +3P 1 (1-t) 2 +3P 2 (1-t)t 2 +P 3 t 3 beschreibt eine Kurve zwischen P 0 und P 3 über die beiden Anfasser P 1 und P 2 t ist eine Laufvariable zwischen 0 und 1 Beispiel... <path d="m60,40 C20, ,30 100,120" fill="blue"/>... Bsp path3.svg 24

25 Transformationen Einleitung transformiert wird das Koordinatensystem, nicht die Objekte noch unterstützt SVG nur affine Transformationen mathematisch gesehen : lineare Abbildungen + Translation Matrix-Vektor-Produkt : A * x + t Kolliniarität und Abstandverhältnisse bleiben erhalten 25

26 Transformationen Grundformen Grundtransformationen: Skalierung (Acheneinheiten werden verändert) Rotation (Drehung um Ursprung Drehpunkt) Translation (Verschiebung der Ursprungskoodinaten) Neigung (Winkeländerung zwischen Koordinatenachsen) beliebige affine Transformationen über matrix() 26

27 Transformationen Skalierung... <g stroke="black" stroke-width="4pt" transform="scale(0.25)"> <rect x="6cm" y="1cm" width="8cm" height="12cm" fill="yellow" /> <rect x="7cm" y="4cm" width="2cm" height="3cm" fill="blue" /> </g> <g stroke="black" stroke-width="4pt" transform="scale(2, 0.5)"> <rect x="6cm" y="1cm" width="8cm" height="12cm" fill="yellow" /> <rect x="7cm" y="4cm" width="2cm" height="3cm" fill="blue" /> </g>... 27

28 Transformationen Rotation... <g stroke="black" stroke-width="4pt" transform="rotate(40, 200, 200)"> <rect x="6cm" y="1cm" width="8cm" height="12cm" fill="yellow" /> <rect x="7cm" y="4cm" width="2cm" height="3cm" fill="blue" /> </g> <g stroke="black" stroke-width="4pt" transform="rotate(75)"> <rect x="6cm" y="1cm" width="8cm" height="12cm" fill="yellow" /> <rect x="7cm" y="4cm" width="2cm" height="3cm" fill="blue" /> </g>... 28

29 Transformationen Translation... <g stroke="black" stroke-width="4pt" transform="translate(320,25)"> <rect x="6cm" y="1cm" width="8cm" height="12cm" fill="yellow" /> <rect x="7cm" y="4cm" width="2cm" height="3cm" fill="blue" /> </g>... 29

30 Transformationen Neigung... <g stroke="black" stroke-width="4pt" transform="skewx(60), skewy(20)"> <rect x="6cm" y="1cm" width="8cm" height="12cm" fill="yellow" /> <rect x="7cm" y="4cm" width="2cm" height="3cm" fill="blue" /> </g>... Bsp.: trans.svg Winkeldrehung: bei positiven Werten im Uhrzeigersinn bei negativen Werten gegen Uhrzeigersinn 30

31 Transformationen Matrizen Transformationen mittels Matrizen : transform = matrix(a,b,c,d,e,f) a c e b d f x3 Matrix mit 6 wesentlichen Parametern 31

32 Transformationen Grundformsmatrizen Transformationen der Grundformen mittels Matrizen : cos(a) -sin(a) 0 sin(a) cos(a) sx sy tx 0 1 ty rotate scale translate tan(a) tan(a) skewy skewx 32

33 Transformationen Mehrfachtransformationen Bsp.: transform= translate(150,-62.15), rotate(45), translate(-212.1,0) Matrizenmultiplikation in der Regel nicht kommutativ Reihenfolge der Transformationen ist ebenfalls nicht kommutativ Bsp test1.svg test2.svg 33

34 Animationen Tags Tags aus SMIL (Synchronized Multimedia Integration Language) <animate> Animation numerischer Werte <set> Animation nicht numerischer Werte <animatemotion> Animation entlang von Pfaden <animatecolor> speziell zur Animation von Farbveränderungen 34

35 Animationen Tags SVG Erweiterungen von SMIL <animatetransform> Animation von Transformationen <mpath> Referenz auf einen Bewegungspfad von <animatemotion> 35

36 Animationen Grundlegendes Eigenschaft des Darstellers festlegen attributename = bsp Name des Attributs attributetype = auto XML CSS auto := automatische Feststellung der Sprache (default) XML := XML-Attribut CSS := CSS-Attribut 36

37 Animationen Grundlegendes Zeitrahmen festlegen Start / Ende einer Animation begin end Dauer einer Animation dur 37

38 Animationen Grundlegendes Zustände während der Animation Start / Ende einer Animation from := Anfangszustand to := Endzustand by := Zustandsänderung 38

39 Animationen Grundlegendes Zustände nach Ende der Animation Start / Ende einer Animation fill = freeze remove freeze := behält Endzustand bei remove := wird in ursprünglichen Zustand gesetzt (default) 39

40 Animationen Grundlegendes Neustart einer Animation restart = always whennotactice never always := neustarten immer möglich remove := Neustart erst bei Inaktivität möglich never := Neustart unmöglich 40

41 Animationen Grundlegendes Wiederholungen einer Animation Anzahl der Wiederholungen reapeatcount = <Anzahl> indefinite <Anzahl> := Anzahl der Wiederholungen (z.b. 5) indefinite := Anzahl unbestimmt Zeitspezifizierung einschließlich Wiederholungen repeatdur = <Zeitwert indefinite <Zeitwert> := Angabe der Zeit (z.b. 10s) indefinite := Dauer unbestimmt 41

42 Animationen animate ani2.svg <g id="bsp_animation"> <circle cx="150" cy="200" r="10" style="fill:green"> <animate attributename="r" begin="0s" dur="6s" from="10" to="200" fill="freeze" /> <animate attributename="r" begin="6s" dur="6s" from="200" to="10" fill="freeze" /> </circle> </g>

43 Animationen set ani1.svg <g id="bsp_animation"> <circle cx="150" cy="200" r="75" style="fill:green; stoke:blue"> <set attributename="visibility" attributetype="css" begin="3s" from="visible" to="hidden" /> </circle> </g>

44 Animationen animatemotion ani3.svg <path id="schiene" d="m-5,200c0,50,200, ,-5" style="fill:none; stroke:red; stroke-width:50;"/> <g id="bsp_animation"> <rect x="-10" y="-2.5" width="30" height="10"> <animatemotion path="m-5,200c0,50 200, , -5" dur="10s" rotate="auto" /> <set attributename="visibility" to="hidden" begin="10s" /> </rect> </g>

45 Animationen animatecolor ani4.svg <g id="bsp_animatecolor"> <defs> <lineargradient id="idgradient" gradientunits="objectboundingbox"> <stop offset="10%" stop-color="yellow"> <animatecolor attributename="stop-color" dur="3s" values="yellow;red;yellow" repeatcount="indefinite" /> </stop> <stop offset="90%" stop-color="blue"> <animatecolor attributename="stop-color" dur="3s" values="blue;green;blue" repeatcount="indefinite" /> </stop> </lineargradient> </defs> <rect x="50" y="50" width="200" height="100" fill="url(#idgradient)" /> </g>

46 Animationen animatetransform ani5.svg <rect x="50" y="100" width="200" height="100" transform="rotate(30,50,50)"> <animatetransform attributename="transform" type="skewx" begin="0s" dur="5s" from="0" to="45" fill="freeze" additive="sum" /> <animatetransform attributename="transform" type="translate" begin="6s" dur="3s" from="0,0" to="-50,0" fill="freeze" additive="sum" /> </rect>

47 Interaktivität im Online-Sprachgebrauch bedeutet Interaktivität das Auslösen eines Prozesses (z.b. Mausklick) 2 Möglichkeiten Interaktivität in SVG herzustellen 1) duch Hyperlinks 2) durch den Aufruf von Skripten über einen Event SVG besitzt die Möglichkeit Elemete gezielt für Events zugänglich zu machen 47

48 Interaktivität Zielansichten <view> - Tag über Ansichtsattribute viewbox und preserveaspectratio über viewtarget Definition der views: <view id= view1 viewbox= /> <view id= view2 viewtarget= rect /> Aufruf der views: <a xlink:href= view1 > <text x= 70 y= 100 >Verschiebung um 100 Pixel</text> </a> 48

49 Interaktivität Beispiel Quelltext inter1.svg 49

50 Interaktivität Skripte für die Implementieurng von Skripten in SVG bedarf es zweier Komponenten : 1) Skript-Code 2) Event + Event-Handler 50

51 Interaktivität Skripte Beispiel Bsp.: inter2.svg 51

52 Anwendungen Teil 1 SVG-Kreisdiagramm wird dynamisch mit PHP durch ein HTML-Formular erzeugt list3.12.htm list3.12.php 52

53 Anwendungen Teil 2 Computergrafik Praktikum 2004 (Visualisierung von Klimadaten mit SVG) Diplomarbeit Patrik Fox (Interaktive Visualisierung von Zugablaufsplänen in SVG am Beispiel des Bahnhofs Amsterdam-Schiphol) InfoB SS05 53

54 Erfahrungen Positiv : enormer Funktionsumfangs recht intuitive Programmierung gute Dokumentation Negativ : bei Pfaden u.ä. stösst man an seine Grenzen im Vorstellungsvermögen kein einheitlicher SVG-Viewer 54

55 Ausblick SVG 1.2 Fließtext neue Eingabetechniken wie z.b. focusable (true false) soll Navigation zwischen Objekten erleichtern Multimedia-Erweiterungen z.b. <video> Entwurf eigener Komponenten Tool-Tips mit <hint> neue Programmier-Schnittstellen (Interfaces)... SVGTimer (Zeitsteuerung) FileDialog (Zugriff auf Dateien) 55

56 WYSIWYG Editoren Kommerzielle Programme: Adobe Illustrator CS2 (Win,MacOS) Corel Draw Suite 12 (Win) Beatware Mobil Designer (Win) 399US Dollar Free Hand FX (Win,MacOS) Open-Source-Programme : Inkscape (Win, Linux, Solaris) 1 Preise aus c't 28/05 56

57 Tools Sonstige AutoTrace (Win, Linux, Solaris) : Pixelgrafik to SVG Konverter ploticus (Win, Linux) : zur Erstellung von SVG-Diagrammen Map2SVG (Win) : zur Erstellung von Karten... 57