thomas reimann1 svgsvg scalable vector graphics. 2 themenüberblick xml grafiksysteme svg Überblick...
TRANSCRIPT
![Page 1: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/1.jpg)
Thomas Reimann 1
SVGSVGScalable Vector GraphicsScalable Vector Graphics
![Page 2: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/2.jpg)
2
Themenüberblick• XML• Grafiksysteme• SVG Überblick• Beispiel (step by step)• Tools• Weiterführendes Material
![Page 3: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/3.jpg)
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
![Page 4: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/4.jpg)
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> <email>[email protected]</email> </eintrag> <eintrag> <name>Muster</name> <email>[email protected]</email> </eintrag></adressen>
![Page 5: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/5.jpg)
5
DTD(Document Type Definition)
<!ELEMENT adressen ((eintrag)+)><!ELEMENT eintrag ((name)+,(vorname)?,(email)+)><!ELEMENT name (#PCDATA)><!ELEMENT vorname (#PCDATA)><!ELEMENT email (#PCDATA)>
? Einmal oder keinmal+ Einmal oder öfter* Keinmal, einmal oder öfter, Sequenz (gefolgt von)| Alternative
![Page 6: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/6.jpg)
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
![Page 7: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/7.jpg)
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
![Page 8: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/8.jpg)
8
Wann wird Raster Grafik benutzt?
• Fotos• Fax• Gescannte Bilder
![Page 9: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/9.jpg)
9
Vektor Grafik• Bild wird durch geometrische
Formen beschrieben• Bild kann ohne Verluste vergrößert
oder verkleinert werden• Bild sehr klein• Keine feste Dimension
![Page 10: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/10.jpg)
10
Wo wird Vektor Grafik benutzt?
• Computer Assisted Drafting (CAD)• Adobe PostScript• Macromedia Flash• SVG
![Page 11: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/11.jpg)
11
Warum nun SVG• JPEG/GIF/PNG Pixel basiert• Quicktime/Flash Vektor basiert
(Lizenz)
![Page 12: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/12.jpg)
12
Vor-/NachteileVorteile• Freies Format (W3C)• XML-basiert• Klein
Nachteile• User Agent wird benötigt
![Page 13: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/13.jpg)
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
![Page 14: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/14.jpg)
14
Wie erkenne ich SVG• MIME Type image/svg+xml• Dateiendung svg oder svgz
![Page 15: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/15.jpg)
15
Größe einer SVG• Die „Welt“ einer SVG ist unendlich
groß• Definieren einen Ausschnitt
(Viewport) der SVG für den wir uns interessieren
![Page 16: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/16.jpg)
16
Default Koordinaten• Richtung der x-Achse von links
nach rechts• Richtung der y-Achse von oben
nach unten• Ursprung oben links (0,0)
![Page 17: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/17.jpg)
17
Beispiel (step by step)• Grundaufbau einer SVG• Basic Shapes• Transformationen• Patterns und Gradients• Effekte• Animationen
![Page 18: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/18.jpg)
18
Grundaufbau einer SVG<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="640" height="480"><title>Beispiel</title><desc>Eine Kuh in der Sonne</desc><!-- Definitionen und Zeichnungen --></svg>
![Page 19: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/19.jpg)
19
Definitionen<svg width="640" height="480"><defs><!-- Definitionen --></defs><!-- Zeichnungen --></svg>
![Page 20: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/20.jpg)
20
1. Schritt: Hintergrund• Rechteck von der Größe des
gesamten Bildes• Rechteck mit einem Farbverlauf
gefüllt
![Page 21: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/21.jpg)
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>
![Page 22: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/22.jpg)
22
Basic Shapes• Lines• Rectangle• Circles und Ellipses• Polygon• Polyline
![Page 23: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/23.jpg)
23
Basic Shape (Rectangle)
</defs><rect id="hintergrund" x="0" y="0" width="639"
height="479" style="fill:url(#gradient_1); stroke:none"/>
</svg>
![Page 24: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/24.jpg)
24
![Page 25: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/25.jpg)
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>
![Page 26: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/26.jpg)
26
![Page 27: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/27.jpg)
27
2. Schritt: Wiese• Grasfläche mittels eines Path
darstellen• Ebenfalls mit einem Farbverlauf
(Gradient) füllen
![Page 28: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/28.jpg)
28
PathBefehl
Argumente Effekt
M,m x,y moveL,l x,y lineH,h x horizontal lineV,v y vertical lineZ,z close
![Page 29: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/29.jpg)
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 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"/>
<rect id="rahmen" x="0" y="0" width="639" height="479" style="stroke:rgb(0,0,0);stroke-width:1;fill:none"/>
![Page 30: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/30.jpg)
30
![Page 31: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/31.jpg)
31
Unregelmäßige Wiese• Gras mittels cubic Bézier curves
darstellen• Zweite Grasfläche versetzt
zeichnen
![Page 32: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/32.jpg)
32
PathBefehl Argumente EffektA,a rx, ry, x-axis-rotation large-
arc sweep x yelliptical arc
Q,q x1, y1, x, y quadratic Bézier curve
T,t x, y quadratic Bézier curve
C,c x1, y1, x2, y2, x, y cubic Bézier curveS,s x2, y2, x, y cubic Bézier curve
![Page 33: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/33.jpg)
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.9992461 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/>
![Page 34: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/34.jpg)
34
![Page 35: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/35.jpg)
35
3. Schritt: Palmen• Palme an falscher Position platzieren• Einzelne Elemente der Palme in einer
Gruppe zusammenfassen• Palme transformieren• Palme duplizieren• Zweite Palme transformieren
![Page 36: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/36.jpg)
36
Translation
<g id="palmen" transform="translate(333 114)">…</g>
Befehl Argumente Effekttranslate x, y Verschieben des
Koordinatensystems
![Page 37: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/37.jpg)
37
Weitere Transformationen
Transformation
Argumente Effekt
scale xfactor, yfactor
Koordinatensystem skalieren
scale factor Koordinatensystem skalierenrotate angle Koordinatensystem rotierenRotate angle,
centerX, centerY
Koordinatensystem um (centerX, centerY) rotieren
skewX angle Verschiebt x-Koordinaten um Winkel
skewY angle Verschiebt y-Koordinaten um Winkel
![Page 38: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/38.jpg)
38
Vor der Translation
![Page 39: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/39.jpg)
39
Nach der Translation
![Page 40: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/40.jpg)
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)"/>
![Page 41: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/41.jpg)
41
![Page 42: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/42.jpg)
42
4. Schritt: Zaun• Einen Zaun mit einer Texture
zeichnen• Texture mittels <pattern> und
<image> erstellen
![Page 43: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/43.jpg)
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"/><path d="..." style="fill:url(#tile); stroke:rgb(0,0,0);
stroke-width:1"/></g>
![Page 44: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/44.jpg)
44
![Page 45: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/45.jpg)
45
5. Schritt: Sonne• Einen Glow Effekt definieren• Sonne mit diesem Effekt versehen
![Page 46: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/46.jpg)
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>
![Page 47: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/47.jpg)
47
Sonne mit Effekt versehen
<g id="sonne" style="filter:url(#Glow)">
…</g>
![Page 48: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/48.jpg)
48
![Page 49: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/49.jpg)
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)
![Page 50: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/50.jpg)
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)"/>
![Page 51: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/51.jpg)
51
![Page 52: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/52.jpg)
52
7. Schritt: Schild• Ein Schild mit Text auf einem Text
Path• Text mittels True Type Font
![Page 53: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/53.jpg)
53
<defs><path id="path_1" d="M361.5 378 C465.5 364.25
447.5 351.75 502.5 342" 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>
![Page 54: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/54.jpg)
54
![Page 55: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/55.jpg)
55
8. Schritt: Animationen• SMIL 2• JavaScript
![Page 56: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/56.jpg)
56
SMIL 2• Animationen in XML formulieren• Einfacher für den Benutzer zu
lesen• Einfacher für XML-Parser zu
verarbeiten
![Page 57: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/57.jpg)
57
SMIL 2• <animate>• <set>• <animateColor>• <animateTransform>• <animateMotion>
![Page 58: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/58.jpg)
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>
![Page 59: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/59.jpg)
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>
![Page 60: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/60.jpg)
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>
![Page 61: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/61.jpg)
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>
![Page 62: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/62.jpg)
62
JavaScript/ECMA-Script(European Computer Manufacturer‘s Association)
• Interaktion mit Benutzer• Einige Animationen nur mit
Scripting möglich (z.B. path-data ändern)
![Page 63: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/63.jpg)
63
<script type="text/ecmascript"><![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);}// ]]></script> <circle cx="150" cy="100" r="25" fill="red" onmouseover="enlarge_circle(evt)" onmouseout="shrink_circle(evt)"/>
![Page 64: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/64.jpg)
64
![Page 65: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/65.jpg)
65
Tools• Adobe SVG Viewer 3.0
(Win/Mac/Linux/Solaris)• Jasc WebDraw 1.0 (Win)• Apache Batik 1.5 (Java)• Gnome Nautilus
![Page 66: Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material](https://reader035.vdocuments.site/reader035/viewer/2022070507/570491c31a28ab14218d9c60/html5/thumbnails/66.jpg)
66
Weiterführendes Material
• www.w3c.org• www.adobe.com/svg• xml.apache.org/batik• SVG Essentials (O‘Reilly)