Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material.

Ähnliche Präsentationen


Präsentation zum Thema: "Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material."—  Präsentation transkript:

1 Thomas Reimann1 SVGSVG Scalable Vector Graphics

2 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material

3 3 XML (eXtensible Markup Language) Eigentlich nichts Neues Möglichkeit Daten zu strukturieren Regeln (DTD) erstellen Basiswerkzeuge für Auslesen, Durchsuchen und Sortieren Auf Inhalte mittels DOM zugreifen

4 4 XML Beispiel Reimann Thomas Muster

5 5 DTD (Document Type Definition) ?Einmal oder keinmal +Einmal oder öfter *Keinmal, einmal oder öfter,Sequenz (gefolgt von) |Alternative

6 6 DOM (Document Object Model) Sprachunabhängiges Interfacemodell Einzelne Objekte eines XML- Dokumentes in einem Baum abbilden Über ein API den Zugriff auf diese Objekte ermöglichen

7 7 Raster Grafik Bild wird repräsentiert durch ein Pixelarray Pixel setzt sich aus Farbe und Helligkeit zusammen Keine Möglichkeit einzelne Objekte nach-/ zu bearbeiten Feste Dimension

8 8 Wann wird Raster Grafik benutzt? Fotos Fax Gescannte Bilder

9 9 Vektor Grafik Bild wird durch geometrische Formen beschrieben Bild kann ohne Verluste vergrößert oder verkleinert werden Bild sehr klein Keine feste Dimension

10 10 Wo wird Vektor Grafik benutzt? Computer Assisted Drafting (CAD) Adobe PostScript Macromedia Flash SVG

11 11 Warum nun SVG JPEG/GIF/PNG Pixel basiert Quicktime/Flash Vektor basiert (Lizenz)

12 12 Vor-/Nachteile Vorteile Freies Format (W3C) XML-basiert Klein Nachteile User Agent wird benötigt

13 13 Geschichte von SVG Precision Graphics Markup Language (PGML) im April 1998 Vector Markup Language (VML) im Mai 1998 SVG Entwurf im Oktober 1998 SVG 1.0 im September 2001 verabschiedet

14 14 Wie erkenne ich SVG MIME Type image/svg+xml Dateiendung svg oder svgz

15 15 Größe einer SVG Die „Welt“ einer SVG ist unendlich groß Definieren einen Ausschnitt (Viewport) der SVG für den wir uns interessieren

16 16 Default Koordinaten Richtung der x-Achse von links nach rechts Richtung der y-Achse von oben nach unten Ursprung oben links (0,0)

17 17 Beispiel (step by step) Grundaufbau einer SVG Basic Shapes Transformationen Patterns und Gradients Effekte Animationen

18 18 Grundaufbau einer SVG Beispiel Eine Kuh in der Sonne

19 19 Definitionen

20 20 1. Schritt: Hintergrund Rechteck von der Größe des gesamten Bildes Rechteck mit einem Farbverlauf gefüllt

21 21 Linear Gradient

22 22 Basic Shapes Lines Rectangle Circles und Ellipses Polygon Polyline

23 23 Basic Shape (Rectangle)

24 24

25 25 Rahmen Einen schwarzen Rahmen im Bild einfügen

26 26

27 27 2. Schritt: Wiese Grasfläche mittels eines Path darstellen Ebenfalls mit einem Farbverlauf (Gradient) füllen

28 28 Path BefehlArgumenteEffekt M,mx,ymove L,lx,yline H,hxhorizontal line V,vyvertical line Z,zclose

29 29 Path (move, line, close)

30 30

31 31 Unregelmäßige Wiese Gras mittels cubic Bézier curves darstellen Zweite Grasfläche versetzt zeichnen

32 32 Path BefehlArgumenteEffekt A,arx, ry, x-axis-rotation large- arc sweep x y elliptical arc Q,qx1, y1, x, yquadratic Bézier curve T,tx, yquadratic Bézier curve C,cx1, y1, x2, y2, x, ycubic Bézier curve S,sx2, y2, x, ycubic Bézier curve

33 33 Path (curves)

34 34

35 35 3. Schritt: Palmen Palme an falscher Position platzieren Einzelne Elemente der Palme in einer Gruppe zusammenfassen Palme transformieren Palme duplizieren Zweite Palme transformieren

36 36 Translation … BefehlArgumenteEffekt translatex, yVerschieben des Koordinatensystems

37 37 Weitere Transformationen TransformationArgumenteEffekt scalexfactor, yfactor Koordinatensystem skalieren scalefactorKoordinatensystem skalieren rotateangleKoordinatensystem rotieren Rotateangle, centerX, centerY Koordinatensystem um (centerX, centerY) rotieren skewXangleVerschiebt x-Koordinaten um Winkel skewYangleVerschiebt y-Koordinaten um Winkel

38 38 Vor der Translation

39 39 Nach der Translation

40 40 Zweite Palme

41 41

42 42 4. Schritt: Zaun Einen Zaun mit einer Texture zeichnen Texture mittels und erstellen

43 43 und

44 44

45 45 5. Schritt: Sonne Einen Glow Effekt definieren Sonne mit diesem Effekt versehen

46 46 Glow Effekt

47 47 Sonne mit Effekt versehen …

48 48

49 49 6. Schritt: Kuh Eine Kuh mit Flecken erstellen Von einem Fleck wird mittels Clipping Path nur ein Teil gezeichnet (nur auf dem Körper der Kuh)

50 50 Clipping

51 51

52 52 7. Schritt: Schild Ein Schild mit Text auf einem Text Path Text mittels True Type Font

53 53 … Informatik

54 54

55 55 8. Schritt: Animationen SMIL 2 JavaScript

56 56 SMIL 2 Animationen in XML formulieren Einfacher für den Benutzer zu lesen Einfacher für XML-Parser zu verarbeiten

57 57 SMIL 2

58 58

59 59

60 60

61 61

62 62 JavaScript/ECMA-Script (European Computer Manufacturer‘s Association) Interaktion mit Benutzer Einige Animationen nur mit Scripting möglich (z.B. path-data ändern)

63 63

64 64

65 65 Tools Adobe SVG Viewer 3.0 (Win/Mac/Linux/Solaris) Jasc WebDraw 1.0 (Win) Apache Batik 1.5 (Java) Gnome Nautilus

66 66 Weiterführendes Material xml.apache.org/batik SVG Essentials (O‘Reilly)


Herunterladen ppt "Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material."

Ähnliche Präsentationen


Google-Anzeigen