Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
Veröffentlicht von:Renate Geisler Geändert vor über 9 Jahren
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 reimann@inf.fu-berlin.de Muster muster@muster.de
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 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd"> 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) <path id="gras" d="M0 479 L639 479 L633 450 L627 470 L621 450 L615 470 L609 450 L603 470 L597 450 L591 470 L585 450 L579 470 L573 450 L567 470 L561 450 L555 470 L549 450 L543 470... z" style="fill:url(#gradient_2); stroke:rgb(0,0,0); stroke-width:1"/>
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) <path id="gras_1" d="M639 470 L-0.00078 470 L7.17522 409.235 C15.4402 422.176 11.9992 461 11.9992 461 L22.7052 413.941 C17.1462 431.588 23.9992 461 23.9992 461 L29.9992 441 L35.9992 461 C37.2052 443.647 26.7052 391.588 26.7052 391.588 C43.7932 408.941 46.8232 446.882 46.8232 446.882 C46.8232 446.882 51.0282 413.059 59.8812 393.941 C59.8812 393.941 57.6172 441.882 59.9992 461 L65.9992 441 … z/>
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 <use id="palme_2" xlink:href="#palme_1" transform="matrix(-1 0 0 1 949.635 0) translate(-54 5) translate(338.088 464.647) scale(0.89759 0.848374) translate(-338.088 -464.647)"/>
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 <filter id="Glow" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
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 <ellipse id="fleck_rechts" cx="238" cy="355.5" rx="22" ry="17.5" style="fill:rgb(0,0,0); stroke:rgb(0,0,0);stroke-width:1; clip-path:url(#bauch_clip)"/>
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 <path id="daze" d="..." transform="…" style="fill:none; stroke:rgb(255,0,0); stroke-width:2; visibility:hidden">
59
59
60
60 <animateTransform id="cloud_go" attributeName="transform" attributeType="XML" type="translate" dur="5s" fill="freeze" begin="3s" from="0 0" to="650 0"/> …
61
61 <animateMotion path="M0 0 L5 5 L0 -5 L-5 -5 L0 5" dur="4s" begin="1s" repeatCount="2.5" fill="freeze"/>
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 <![CDATA[ function enlarge_circle(evt) { var circle = evt.getTarget(); circle.setAttribute("r", 50); } function shrink_circle(evt) { var circle = evt.getTarget(); circle.setAttribute("r", 25); } // ]]> <circle cx="150" cy="100" r="25" fill="red" onmouseover="enlarge_circle(evt)" onmouseout="shrink_circle(evt)"/>
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 www.w3c.org www.adobe.com/svg xml.apache.org/batik SVG Essentials (O‘Reilly)
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.