Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Scalable Vector Graphics
SVG Scalable Vector Graphics Thomas Reimann
2
Themenüberblick XML Grafiksysteme SVG Überblick
Beispiel (step by step) Tools Weiterführendes Material
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
XML Beispiel <?xml version="1.0" standalone="no" encoding="UTF-8"?> <!DOCTYPE adressen SYSTEM "adressen.dtd"> <adressen> <eintrag> <name>Reimann</name> <vorname>Thomas</vorname> </eintrag> <name>Muster</name> </adressen>
5
DTD (Document Type Definition)
<!ELEMENT adressen ((eintrag)+)> <!ELEMENT eintrag ((name)+,(vorname)?,( )+)> <!ELEMENT name (#PCDATA)> <!ELEMENT vorname (#PCDATA)> <!ELEMENT (#PCDATA)> ? Einmal oder keinmal + Einmal oder öfter * Keinmal, einmal oder öfter , Sequenz (gefolgt von) | Alternative
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
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
Wann wird Raster Grafik benutzt?
Fotos Fax Gescannte Bilder
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
Wo wird Vektor Grafik benutzt?
Computer Assisted Drafting (CAD) Adobe PostScript Macromedia Flash SVG
11
Warum nun SVG JPEG/GIF/PNG Pixel basiert
Quicktime/Flash Vektor basiert (Lizenz)
12
Vor-/Nachteile Vorteile Freies Format (W3C) XML-basiert Klein
User Agent wird benötigt
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
Wie erkenne ich SVG MIME Type image/svg+xml Dateiendung svg oder svgz
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
Default Koordinaten Richtung der x-Achse von links nach rechts
Richtung der y-Achse von oben nach unten Ursprung oben links (0,0)
17
Beispiel (step by step)
Grundaufbau einer SVG Basic Shapes Transformationen Patterns und Gradients Effekte Animationen
18
Grundaufbau einer SVG <?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <svg width="640" height="480"> <title>Beispiel</title> <desc>Eine Kuh in der Sonne</desc> <!-- Definitionen und Zeichnungen --> </svg>
19
Definitionen <svg width="640" height="480"> <defs> <!-- Definitionen --> </defs> <!-- Zeichnungen --> </svg>
20
1. Schritt: Hintergrund Rechteck von der Größe des gesamten Bildes
Rechteck mit einem Farbverlauf gefüllt
21
Linear Gradient <defs>
<linearGradient id=„gradient_1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad" gradientUnits="objectBoundingBox"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(192,255,255); stop-opacity:1"/> </linearGradient> </defs>
22
Basic Shapes Lines Rectangle Circles und Ellipses Polygon Polyline
23
Basic Shape (Rectangle)
</defs> <rect id="hintergrund" x="0" y="0" width="639" height="479" style="fill:url(#gradient_1); stroke:none"/> </svg>
25
Rahmen Einen schwarzen Rahmen im Bild einfügen
<rect id="hintergrund" x="0" y="0" width="639" height="479" style="fill:url(#gradient_1)"/> <rect id="rahmen" x="0" y="0" width="639„ height="479" style="stroke:rgb(0,0,0);stroke-width:1;fill:none"/> </svg>
27
2. Schritt: Wiese Grasfläche mittels eines Path darstellen
Ebenfalls mit einem Farbverlauf (Gradient) füllen
28
Path Befehl Argumente Effekt M,m x,y move L,l line H,h x
horizontal line V,v y vertical line Z,z close
29
Path (move, line, close) <rect id="hintergrund" x="0" y="0" width="639" height="479" style="fill:url(#gradient_1)"/> <path id="gras" d="M0 479 L L L L L L L L L L L L L L L L L z" style="fill:url(#gradient_2); stroke:rgb(0,0,0); stroke-width:1"/> <rect id="rahmen" x="0" y="0" width="639" height="479" style="stroke:rgb(0,0,0);stroke-width:1;fill:none"/>
31
Unregelmäßige Wiese Gras mittels cubic Bézier curves darstellen
Zweite Grasfläche versetzt zeichnen
32
Path Befehl Argumente Effekt A,a
rx, ry, x-axis-rotation large-arc sweep x y elliptical arc Q,q x1, y1, x, y quadratic Bézier curve T,t x, y C,c x1, y1, x2, y2, x, y cubic Bézier curve S,s x2, y2, x, y
33
Path (curves) <path id="gras_1" d="M L L C L C L L 461 C C C C L … z/>
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
Translation Befehl Argumente Effekt translate x, y
Verschieben des Koordinatensystems <g id="palmen" transform="translate( )"> … </g>
37
Weitere Transformationen
Argumente Effekt scale xfactor, yfactor Koordinatensystem skalieren factor rotate angle Koordinatensystem rotieren Rotate angle, centerX, centerY Koordinatensystem um (centerX, centerY) rotieren skewX Verschiebt x-Koordinaten um Winkel skewY Verschiebt y-Koordinaten um Winkel
38
Vor der Translation
39
Nach der Translation
40
Zweite Palme <use id="palme_2" xlink:href="#palme_1"
transform="matrix( ) translate(-54 5) translate( ) scale( ) translate( )"/>
42
4. Schritt: Zaun Einen Zaun mit einer Texture zeichnen
Texture mittels <pattern> und <image> erstellen
43
<pattern> und <image>
<defs> <pattern id="tile" width="50" height="49" patternUnits="userSpaceOnUse"> <image width="50" height="49" xlink:href="holz.png"/> </pattern> </defs> <g id="zaun"> <path d="..." style="fill:url(#tile); stroke:rgb(0,0,0); stroke-width:1"/> </g>
45
5. Schritt: Sonne Einen Glow Effekt definieren
Sonne mit diesem Effekt versehen
46
Glow Effekt <filter id="Glow" filterUnits="objectBoundingBox"
x="-10%" y="-10%" width="150%" height="150%"> <feMorphology in="SourceAlpha" result="morphedAlpha" radius="3" operator="dilate"/> <feGaussianBlur in="morphedAlpha" result="blurredAlpha" stdDeviation="3"/> <feFlood result="flooded" style="flood- color:rgb(255,255,128);flood-opacity:1"/> <feComposite operator="in" in="flooded" in2="blurredAlpha" result="coloredShadow"/> <feComposite in="SourceGraphic" in2="coloredShadow" operator="over"/> </filter>
47
Sonne mit Effekt versehen
<g id="sonne" style="filter:url(#Glow)"> … </g>
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
Clipping <clipPath id="bauch_clip">
<ellipse id="bauch" cx="202" cy="324" rx="62" ry="58"/> </clipPath> <use xlink:href="#bauch" style="fill:url(#kuh-gradient);stroke:rgb(0,0,0);stroke-width:1"/> <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)"/>
52
7. Schritt: Schild Ein Schild mit Text auf einem Text Path
Text mittels True Type Font
53
<defs> <path id="path_1" d="M C " style="fill:none; stroke:rgb(0,0,0);stroke-width:1"/> … </defs> <text x="70" y="240" style="font-size:26;font-family:Comic Sans MS;text-anchor:start"> <textPath xlink:href="#path_1"> Informatik </textPath> </text>
55
8. Schritt: Animationen SMIL 2 JavaScript
56
SMIL 2 Animationen in XML formulieren
Einfacher für den Benutzer zu lesen Einfacher für XML-Parser zu verarbeiten
57
SMIL 2 <animate> <set> <animateColor>
<animateTransform> <animateMotion>
58
<set> <path id="daze"
d="..." transform="…" style="fill:none; stroke:rgb(255,0,0); stroke-width:2; visibility:hidden"> <set attributeName="visibility" attributeType="CSS" begin="11.5s" dur="1s" fill="freeze" to="visible"/> </path>
59
<animateColor>
<rect id="hintergrung_1" x="0" y="0" width="639" height="479" style="fill:rgb(255,255,255); stroke:rgb(0,0,0);stroke-width:1"> <animateColor id="weiss_nach_schwarz" begin="3s" attributeName="fill" dur="5s" fill="freeze" from="rgb(255,255,255)" to="rgb(0,0,0)"/> </rect>
60
<animateTransform>
<g id="wolke"> <animateTransform id="cloud_go" attributeName="transform" attributeType="XML" type="translate" dur="5s" fill="freeze" begin="3s" from="0 0" to="650 0"/> … </g>
61
<animateMotion>
<path id="futter" d="…" style="fill:url(#palme-fade_1); stroke:rgb(0,0,0);stroke-width:1"> <animateMotion path="M0 0 L5 5 L0 -5 L-5 -5 L0 5" dur="4s" begin="1s" repeatCount="2.5" fill="freeze"/> </path>
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
<script type="text/ecmascript">
<![CDATA[ function enlarge_circle(evt) { var circle = evt.getTarget(); circle.setAttribute("r", 50); } function shrink_circle(evt) circle.setAttribute("r", 25); // ]]> </script> <circle cx="150" cy="100" r="25" fill="red" onmouseover="enlarge_circle(evt)" onmouseout="shrink_circle(evt)"/>
65
Tools Adobe SVG Viewer 3.0 (Win/Mac/Linux/Solaris)
Jasc WebDraw 1.0 (Win) Apache Batik 1.5 (Java) Gnome Nautilus
66
Weiterführendes Material
xml.apache.org/batik SVG Essentials (O‘Reilly)
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.