Multimediatechnologie

Transkript

1 Einführung in die XML-Sprache Scalable Vector Graphics /1

2 SVG woher und wohin /2

3 /3

4 /4

5 SVG Open 2010, Paris /5

6 /6

7 RaphaëlJS Die Idee von RaphaëlJS ist es, mit JavaScript eine Bibliothek aufzubauen, die bei Animationen nach dem Trickfilmprinzip 25 Grafiken pro Sekunde generiert und über eine Browserweiche SVG und VML als Vektorgrafiken ausgibt /7

8 d3.js d3.js ist eine mächtige Bibliothek zur Datenvisualisierung in dynamischer Anpassung an Veränderungen der Daten im Hintergrund der Darstellung. Für die Datendarstellung werden umfangreiche Grafik-Widgets bereitgestellt. (s /8

9 SVG-Modul von jquery jquery SVG ist ein Plug-In für das JavaScript- Framework jquery von Keith Wood. Es wird periodisch angepasst, zuletzt am an jquery 1.5 und 1.6. Der Abdeckungsgrad von SVG ist schon recht gut, es wird von der Community angenommen. Animationen werden aber nur mit SMIL-Philosophie angeboten, im Widerspruch zum Charakter als Plug-In in eine JS-Welt. ( /9

10 Ample SDK Ample SDK soll komplexe grafische Interaktionsoberflächen aus einer Quellcodequelle heraus erzeugbar werden lassen. Für die Zeitorganisation und Zeitsynchronisation werden entsprechende Module aus SMIL 3.0 genutzt. An grafischen Oberflächensprachen werden SVG 1.1, XUL, XHTML 1.1 mit HTML5, SMIL Animationen, Google Maps über AML und ggf. andere unterstützt und eingebunden /10

11 SVGweb von Google u.a. SVG Web ist eine JavaScript-Bibliothek die SVG in vielen Standardbrowsern unterstützt (u.a. Internet Explorer, Firefox, Safari). Damit werden zusammen mit Original-SVG 95% des Webs erreicht. ( JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript and uses SVG and VML. ( /11

12 dōjō gfx / dōjōx In dōjō 1.8 werden Vektorgrafikfunktionalitäten bereitgestellt für: SVG (Firefox , Safari (Webkit) 3+, Opera 9+, Chrome 1.0+, iphone Safari 2.1+) VML (IE 6-8) Silverlight (wherever it is supported by Microsoft) Canvas (Firefox 3.0+, Safari 3.0+ including ios Safari 1.0+, Opera 9+, Chrome, IE9+) ( - bis 2009, /12

13 Scalable Vector Graphis SVG ist ein XML-Standard des W3C, d.h. es ist strukturiertes Textformat Ziel ist die Erstellung komplexer zweidimensionaler Vektorgrafiken zur Darstellung mit SVG-Applikationen oder in Webbrowsern (per plug-in Animation bzw. Interaktivität sind zusätzliche Features von SVG Single Sourcing Text, Bild und Animation können aus einer Quelldatei kommen /13

14 Geschichtliches Erste Konzepte entstanden 1998: Adobe, IBM, Netscape und Sun reichten beim W3C eine Note über die Precision Graphics ML ein, die an PostScript angelehnt entwickelt worden war. (April 1998) Gleichzeitig reichten Hewlett Packard, Microsoft, Macromedia und Visio ihren Vorschlag der Vector ML beim W3C ein. (Mai 1998 bis heute) Vorschlag von PRP und Orange PCSL: HGML. Zusammenfassung der Konzepte zu SVG erfolgte im Oktober /14

15 Geschichtliches Die unterschiedlichen Wurzeln von SVG hatten vor allem unterschiedliche Ansätze zur Schaffung von Grafik-Elementen in Websites. Dadurch gab/gibt es auch Vor- und Nachteile der Vorgänger von SVG, bzw. nicht inbegriffene Features und Anwendungsgebiete. Trotzdem gibt es auch weiterhin parallele Vorstöße zu Neuentwicklungen im Grafikbereich z.b. DrawML ( /15

16 Geschichtliches W3C SVG Working Group Adobe, Apple, Autodesk, Canon, Corel, HP, IBM, Kodak, Macromedia, Microsoft, Netscape/AOL, Quark, Sun, Xerox, u.a. SVG 1.0 wurde offiziell am zur Recommendation des W3C (rund 600 DIN-A4-Seiten) technische Angaben zum Aufbau von SVG, die DTD und DOM-Interfaces zu SVG. SVG 1.1 ist Recommendation seit SVG 1.2 Tiny ist Recommendation seit /16

17 Die Konkurrenz Die Konkurrenz zu SVG ist im Bereich proprietärer Datenformate doch recht beeindruckend - siehe Vector_formats. Im Bereich der im Internet häufig genutzten Formate ist sie jedoch überschaubar /17

18 Die Konkurrenz: VML Seit 1998 ist VML von Microsoft stetig weiterentwickelt und u.a. in den Office-2000/2007/2010- Paketen durchgängig für Grafikelemente implementiert worden. Auch der IE kann per plugin VML-teilfähig gemacht werden, außer auf Mac. VML ist eher auf einfache Grafiken ausgerichtet, die keine besonderen künstlerischen Gestaltungsmerkmale aufweisen. Sie kennen das aus MS Word bzw. MS PowerPoint. Beispiel Ansicht: MS Word, Datei Datei/Als Webseite speichern /18

19 Die Konkurrenz: SWF (Flash) Gegen einen Umstieg von Flash auf SVG können Anwendungsziele, aber auch Arbeitsgewohnheiten sprechen. Es gibt z.b. noch kein vergleichbares SVG- Animationstool wie Adobe Flash für Flash. Auch Adobe hat SVG dort noch nicht integriert. Es gibt jedoch strategische Vorteile von SVG, wie etwa die Durchsuch- und Indexierbarkeit des Dateiinhalts (für DBs) oder /19

20 Die Konkurrenz: SWF (Flash) SVG braucht nur Text-Editoren und SVG-Viewer (als plug-in) im Webbrowser, bei Flash sind alle auf (kostenpflichtige) Tools angewiesen. Flash liegt im verkapselten Binärformat vor, SVG ist XML also offener, strukturierter Quellcode. Hier ist abzuwägen, ob der mögliche Zugriff in der Anwendung erwünscht ist. SVG soll Verschlüsselungsalgorithmen erhalten. SVG-Grafiken lassen sich mit Hilfe vieler Scriptsprachen generieren, Flash hat eine intern /20

21 Die Konkurrenz: SWF (Flash) In Flash kann ActionScript eingebunden werden. SVG unterstützt ECMAScript und JavaScript. Bilder werden in Flash i.d.r. eingebettet, erst neuerdings auch referenziert. Damit werden nachträgliche Änderungen an Bildern mitunter problematisch. In SVG kann man Bilder mit <image> referenzieren, aber auch mit base64 in CDATA einbetten. Farben werden in Flash in einem eigenen RGB- Farbraum dargestellt, SVG unterstützt srgb /21

22 Die Konkurrenz: SWF (Flash) Farben: Außerdem können in SVG ICC-Profile referenziert werden, die Unterstützung von CMYK und PANTONE ist angedacht. Animationen werden in Flash über Frames erzeugt. SVG kann das auch, zusätzlich gibt es aber die Möglichkeit der Interpolation von Veränderungen an/mit Grafiken. broadway.cs.nott.ac.uk/projects/svg/flash2svg/ /22

23 Vorteil von SVG Ein entscheidender Vorteil von SVG tritt beim Einsatz mehrerer Spezialapplikationen im Fertigungsprozess zu Tage: Die SVG-Datei kann ohne Probleme in jeder Applikation geöffnet und weiterbearbeitet werden. Dort können dann deren Stärken gezielt genutzt werden... Bei Flash stört das Binärformat mitunter die korrekte Rekonstruktion der Quelle. SVG ist ein ideales Austauschformat! /23

24 2D und 3D? SVG ist grundsätzlich für 2D-Vektorgrafiken konzipiert. 3D-Grafiken werden mit VR(Virtual Reality)-Sprachen beschrieben, die u.a. auch dynamisches Navigieren in der Grafik unterstützen. Das wären z.b. VRML bzw. X3D, Collada. Das W3C wird hauspolitisch die Feature beider Sphären (2D und 3D) immer getrennt halten. Gleichzeitig könnte beides immer in einer Applikation zugleich verwendet werden /24

25 Die Werkzeuge Editoren: Es ist jeder Text-Editor prinzipiell geeignet, so z.b. NotePad, TextPad, WordPad,... Des Weiteren sind XML-Editoren zu empfehlen, so z.b. XMLspy, XMetal, Eclipse++, u.a.. Adobe Illustrator kann Grafiken als SVG in zwei Varianten importieren und exportieren (MM-Pool) Corel DESIGNER unterstützt seit Technical Suite X4 SVG ( /25

26 Die Werkzeuge Im MM-Pool kann man mit dem SVG-Editor Inkscape arbeiten, der die Zeichnungen dann in SVG exportiert. ( II /26

27 Die Werkzeuge AKs SVG Editor, leistungsstark in Grafiken ( Zahlreiche weitere SVG- Editoren /27

28 Die Werkzeuge Wandler von Rastergrafiken in SVG-Grafiken online: /28

29 Viewer: Die Werkzeuge SVG-Viewer von Adobe (plug-in im IE6-8, für OS Windows, MacOS, Solaris, RedHat-Linux; für Netscape, IE, RealPlayer, Opera,... Batik SVG-Browser von Apache (standalone), entwickelt zusammen mit Sun, IBM, ILOG. xml.apache.org/batik/, v. 1.7 Es gibt sicher weitere Werkzeuge /29

30 Erste Schritte /30

31 Vektorgrafik im Detail Die Beschreibung von Details von Vektorgrafiken bezieht sich grundsätzlich auf folgende Fakten: Lage charakteristischer Punkte Richtung der Pfade Verlauf der Pfadsegmente (Kurven, Strecken) Zusammenschluss von Pfaden zu Flächen Ebenenreihenfolge der Elemente (vorn, hinten) Formatierungen /31

32 Zusammensetzung Vektorgrafiken werden grundsätzlich in SVG aus einfachen Elementen zusammengesetzt. Besonders zu beachten ist die Ebenenreihenfolge, da die Elemente zum Teil übereinander bzw. überlappend angeordnet werden. Als Beispiel nehmen wir Abb. 3.3, S. 70, aus [Fibinger] /32

33 Zusammensetzung [aus Fibinger] /33

34 Zusammensetzung Flächenfarben und Linienstärken sind Formatierungen, die nachträglich den eigentlichen Vektoren bzw. Pfaden zugewiesen wurden. Das Zeichen steht für Schrift im allgemeinen. TrueType- und PostScript-Zeichensätze sind Vektorgrafiken mit zusätzlichen typografischen Informationen. Ohne mit Vektoren unbedingt rechnen zu wollen, sollte die Darstellung P1=(2,3), P2=(4,2) präsent sein /34

35 Vektordarstellung [aus Fibinger] /35

36 Punktpositionen Die Positionen von Punkten können in SVG absolut (d.h. bezogen auf den Nullvektor (0,0)) und relativ (d.h. bezogen auf ein zuvor benanntes Objekt) angegeben werden. Beide Positionsangaben sind in der Vektorgrafik möglich und sollen nun am SVG-Beispiel gezeigt werden: Man beschreibe den im Bild mit Koordinaten bezeichneten Pfad in SVG /36

37 Punktpositionen [aus Fibinger] /37

38 SVG-Pfadbeschreibung Absolute Positionen = große Buchstaben Relative Positionen = kleine Buchstaben <path d="m0,0 L200,200 L300,200" /> <path d="m0,0 l200,200 l100,0" /> Erklärung: Der Weg wird in Reihenfolge von drei Punkten aufgebaut. Im ersten Fall sind deren Koordinaten benannt, im zweiten Fall sind die Koordinaten der Verschiebungsrichtung relativ zum Vorgänger benannt! /38

39 Behauptung: Frage Diese SVG-Syntax beschreibt nur den gedachten Streckenzug und würde im SVG-Viewer ein leeres Bild ergeben. Warum? Weil keine Formatierungen angegeben sind /39

40 SVG-Beschreibung Ob Sie das begriffen haben, zeigt sich nun in den absoluten und relativen Beschreibungen des exakt inversen Weges: <path d="m300,200 L200,200 L0,0" /> <path d="m300,200 l-100,0 l-200,-200" /> Die Richtung des Pfades ist von Bedeutung bei Pfeilspitzen zu einem Knoten des Pfades, bei Linienmustern von einem Knoten weg, und bei Pfaden mit Fehlstücken bzw. sich überlappenden Flächen /40

41 Pfadbeschreibungen Zwei Punkte sind über unendlich viele Pfade miteinander verbindbar, der kürzeste ist in 2D die gerade Linie. Beispiel: Man verbinde drei Punkte, die ersten zwei mit einer Strecke, den zweiten mit dem dritten mit einer (nicht-geraden) Kurve /41

42 Pfadbeschreibungen [aus Fibinger] /42

43 Warnung Die Zeichnung zeigt die Formatierungen der Vektorgrafik, aber nicht die Vektorgrafik selbst! Die Vektorgrafik ist ohne Formatierungen unsichtbar und reiner Quellcode. Dadurch kommt die XML-typische Trennung von Struktur und Formatierung zum Ausdruck. Die Pfade sind das mathematisch ausgedrückte Grundgerüst, das mit sichtbaren Eigenschaften wie Farbe, Linienstärke etc. belegt wird /43

44 Add-on Für die Beschreibung der Kurve wurden zwei weitere Punkte angefügt die sogenannten Kontroll- oder Anfasserpunkte. (In Zeichnungen werden Anfasserpunkte mit der Maus gefasst und vom Knotenpunkt weggezogen. Vgl. Beispiel unter Sie bilden eine Tangente zu einem am Beginn und am Ende der Kurve gedachten Kreissegment gleicher lokaler Krümmung ( Schmiegekurve ) /44

45 Add-on Eine dritte Tangente wird dadurch beschrieben, dass die beiden (in die gleiche Richtung wegwärts von der Kurve) zeigenden Anfasserpunkte verbunden werden. Die Neigung dieser dritten Tangente entspricht der Neigung der Tangente am zur Verbindung nächsten Punkt der Kurve (Parallelverschiebung erforderlich). In den anderen Fällen schneidet die Verbindungslinie die Kurve, ohne Bezug zu ihr /45

46 Pfadbeschreibungen [aus Fibinger] /46

47 Bézier-Kurven Bézier-Kurven sind spezielle Verbindungslinien zwischen zwei Punkten, die als Vektorgleichung für die Menge ihrer Punkte beschrieben werden. In SVG werden (wie üblich) quadratische und kubische Bézier-Kurven unterstützt und genutzt. Grob gesagt, haben quadratische BK einen Anfasserpunkt, und kubische BK zwei Anfasserpunkte. Das muss aber noch genauer werden... [vgl /47

48 Bézier-Kurven Sie wurde Anfang der 1960er Jahre unabhängig voneinander von Pièrre Etienne Bézier bei Renault und Paul de Faget de Casteljau bei Citroën für Computer-Aided Design (computerunterstützte Konstruktion) entwickelt. Paul de Casteljau gelang zwar die Entdeckung früher, Citroën hielt seine Forschungen jedoch bis zum Ende der 1960er Jahre als Betriebsgeheimnis zurück /48

49 Bézier-Kurven Die Funktionen für kubische Bézier-Kurven in der Form einer einparametriger Vektorgleichung lauten: P(t) = P 0 (1-t) P 1 (1-t) 2 t+3. P 2 (1-t)t 2 +P 3 t 3, t in [0,1] Damit wird eine Kurve zwischen den mit den Vektoren P 0 und P 3 bezeichneten Punkten beschrieben. Die zwei Anfasserpunkte werden durch die Vektoren P 1 und P 2 bezeichnet /49

50 Bézier-Kurven [aus Fibinger] /50

51 Bézier-Kurven Die quadratischen Bézier-Kurven werden durch die Funktionen P(t) = P 0 (1-t) P 1 (1-t)t+P 2 t 2, t in [0,1] beschrieben. Die Vektoren P 0 und P 2 beschreiben die zu verbindenden Punkte, P 1 beschreibt den Anfasserpunkt /51

52 Bézier-Kurven [aus Fibinger] /52

53 Syntax Eine einfache kubische Bézierkurve kann man in SVG wie folgt erzeugen: <?xml version=v 1.0?> <!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.0//EN > <!-- --> <svg width= 400 height= 300 > <path d= M100,200 C100, , ,200 stroke= black /> </svg> Dabei wird mit moveto, d.h. M, der Anfangspunkt vorgegeben, der curveto -Befehl C besteht aus zwei Anfasserpunkten und dem Endpunkt. Die Kurve wird nicht geschlossen. II /53

54 Syntax Eine einfache quadratische Bézierkurve kann man in SVG wie folgt erzeugen: <?xml version= v1.0?> <!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.0//EN > <!-- --> <svg width= 400 height= 300 > <path d= M100,200 Q100, ,200 stroke= black /> </svg> Dabei wird mit MoveTo, d.h. M, der Anfangspunkt vorgegeben, der quadratic Bézier CurveTo -Befehl Q besteht aus einem Anfasserpunkt und dem Endpunkt. Die Kurve wird nicht geschlossen. II /54

55 Geometrische Erläuterung /55

56 Bézier-Oberflächen Um sich Bézier-Oberflächen in 3D anzusehen siehe /56

57 Wichtige Bemerkung Der Koordinatenursprung ist in SVG immer links oben, wobei die positive y-achse nach unten zeigt! Das entspricht dem Standard in mehreren Grafik- und DTP-Programmen, jedoch nicht in PostScript. x y /57

58 Orientierung von Flächen Cartesisches System SVG-System /58

59 Demo Die Datei bustrack.svg zeigt die Animation einer Buslinie durch einen der Gebäudekomplexe der ETH Zürich. Die Datei ist in SVG geschrieben Sie finden die Datei auf der Website MMT2 gleich neben dem Link zu dieser Vorlesung. In einem Editor können Sie sich den Quelltext ansehen und den Arbeitsaufwand bei händischer Kodierung abschätzen. (Also SVG-Editoren!) Zum IE zwecks Betrachtung /59

60 Quellen Iris Fibinger, SVG Scalable Vector Graphics. Praxiswegweiser und Referenz für den neuen Vektorgrafikstandard., Markt+Technik Verlag, München, 2002.( Alexander Adam, SVG Scalable Vector Graphics. Das Praxisbuch., Franzi Verlag GmbH, Poing, ( Andrew Watt et al., SVG unleashed, Sams Publishing, Indianapolis, USA, ( Suche: ) Multimedia!!! Beispiele: Michael Frank II /60

61 II /61

62 Vielen Dank für Ihre Aufmerksamkeit bis demnächst /62

63 Strukturen und erste Inhalte von SVG- Dokumenten SVG: Struktur und erste Inhalte /63

64 SVG-Dokumente SVG ist ein Grafikformat, dass u.a. zur Darstellung in Internetbrowsern mit passendem Plug-In vorgesehen ist (oder in Firefox bzw. Opera direkt). Deshalb kann man SVG-Quellcode auf zwei Arten nutzen: Als eingebundenen Dateiabschnitt in einem übergeordneten HTML-Dokument Als eigenständige Datei, die wie eine HTML-Seite adressiert und verlinkt werden kann Der Suffix ist generell *.svg, bzw. *.svgz für GZIPkomprimierte Dateien. SVG: Struktur und erste Inhalte /64

65 SVG-Grundstrukturen Beispiele SVG: Struktur und erste Inhalte /65

66 5 Elementtypen in SVG 1 Server-Elemente (server elements) dienen als einzige zur Auszeichnung grafischer Effekte wie Verläufe, Füllmuster, Filter etc. Alle anderen grafischen und textlichen Formatierungen werden den SVG-Elementen über Attribute bzw. über CSS-Stylesheets beigefügt. Bsp.: <lineargradient>, <radialgradient>,... SVG: Struktur und erste Inhalte /66

67 5 Elementtypen in SVG 2 Grafikelemente (graphics elements) darunter sind SVG-Elemente zu verstehen, die zeichnen, d.h. die (vorerst unsichtbare) grafische Formen vorherbestimmen, die später gestaltet werden können Die eigentliche Formenbeschreibung erfolgt über Attribute zu diesen Elementen, wie auch die grafische Gestaltung. Bsp.: <path>, <text>, <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>,... SVG: Struktur und erste Inhalte /67

68 5 Elementtypen in SVG 3 Containerelemente (container elements) enthalten Grafik- und weitere Containerelemente Bsp.: <svg>, <g>, <defs>, <symbol>, <clippath>, <mask>, <pattern>, <marker>, <a>, <switch>,... 4 Referenzelemente für Grafiken (graphics referencing elements) referenzieren auf Grafiken und Bilder, mitunter über xlink:... Bsp.: <image>, <use> SVG: Struktur und erste Inhalte /68

69 5 Elementtypen in SVG 5 Elemente für die Textauszeichnung (text content elements) zeichnen zu rendernde Texte in SVG-Dokumenten aus Bsp.: <text>, <tspan>, <tref>, <textpath>, <altglyph>,... Strategie des Lernens: An Beispielen SVG-Dokumentaufbau und SVG- Elemente mit ihren Attributen kennen lernen. Eigene Versuche der Nutzung machen. SVG: Struktur und erste Inhalte /69

70 Der Kopf von SVG-Dokumenten Der Anfang eines SVG-Dokuments sollte so aussehen (optionaler Anteil kursiv): <?xml version="1.0" encoding="iso " standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " /DTD/svg10.dtd"> <svg width="200" height="100" xmlns=" xmlns:xlink=" > </svg> SVG: Struktur und erste Inhalte /70

71 Der Kopf von SVG-Dokumenten <!-- Alternative Empfehlung für SVG > <!-- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " dtd"> --><!-- Es wird empfohlen, den Kopf oben wegzulassen. --> <svg version="1.1" baseprofile="full" xmlns=" xmlns:xlink=" xmlns:ev=" width="800" height="600"> </svg> SVG: Struktur und erste Inhalte /71

72 Variationen Opera und das Adobe-Plugin für den IE öffnen SVG-Dateien auch dann korrekt, wenn nur der vom Wurzelelement <svg> umschlossene Anteil in der Datei steht. Firefox braucht entweder unbedingt die DOCTYPE- Deklaration, sonst zeigt er den Quelltext an (bei nur <svg>) oder verweigert gar ganz die Anzeige (<?xml...?> ohne DOCTYPE). Alternativ funktioniert die zweite Variante ohne <?xml...?>. SVG: Struktur und erste Inhalte /72

73 Erläuterungen Theoretisch könnte man bei der Angabe der DTD des W3C den konkreten URI der SVG-DTD auch weglassen. Praktisch könnte das die Anzeige der Dateien in einzelnen SVG-Tools beeinträchtigen. Das svg-element selbst besitzt Angaben zur Größe der Fläche, die die SVG-Grafik füllen soll. Default ist "100%" in beiden Richtungen, von links oben aus gerechnet. Standard ist die relative Maßeinheit px (Pixel), die sich der Bildschirmauflösung und dem Koordinatensystem des Nutzers anpasst. (= ohne Angabe) SVG: Struktur und erste Inhalte /73

74 Erläuterungen Die Wirkung der Angabe des sichtbaren Bereichs ist, dass darüber hinausgehende Objekte nur ausmaskiert werden, aber mit der Verschiebehand in dieses Sichtfenster verschoben werden könnten (je nach SVG-Player). Die Namensräume können, müssen aber nicht angegeben werden. Der xlink-namensraum ist mit den für SVG wichtigen Funktionen in der SVG-DTD implementiert. Wir brauchen ihn vorerst nicht. SVG: Struktur und erste Inhalte /74

75 SVG in HTML <html> <head> <title>embedded SVG</title> <script type="text/javascript" src="script.js"/> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body style="bgcolor:#ffffff">... <embed src= mysvgpiece.svg" name="svgembed" id="svgembed" height="700" width="700" type="image/svg-xml"> <noembed><img src="gleichegrafik.gif"/></noembed> </body> </html> SVG: Struktur und erste Inhalte /75

76 <html> SVG in HTML <!-- im Firefox, aber nicht im IE8 --> <head></head> <body style="bgcolor:#ffffff"> <object type="image/svg+xml" data="einegrafik.svg" width="280" height="280"> <img src="diegleichegrafik.gif"/> </object> </body> </html> SVG: Struktur und erste Inhalte /76

77 SVG in HTML IE-Lösung von <!--[if IE]> <object src="../svg-files/photos.svg" classid="image/svg+xml" width="1250" height="750"> <![endif]--> <!--[if!ie]>--> <object data="../svg-files/photos.svg" type="image/svg+xml" width="1250" height="750"> <!--<![endif]--> </object> SVG: Struktur und erste Inhalte /77

78 SVG in HTML Es soll weitere Möglichkeiten geben. Detaillierte Beschreibungen sind z.b. unter &kname=darstellung%20von%20svg-grafiken &uknr=2.1&ukname=svg- Grafiken%20in%20Webdokumenten zusammengestellt. Die anklickbaren Beispiele dazu funktionieren aber in Standardbrowsern oft nicht. Opera ist am besten. SVG: Struktur und erste Inhalte /78

79 HTML5 und SVG Die Beta-Version des Firefox 3.7 beherrschte schon SVG in HTML5 und in XHTML als natürlichen Bestandteil! Minefield Version 4.x konnte dann keine Animationen mehr, danach wurde das wieder eingebaut. Anbei zwei Beispiele /79

80 <!DOCTYPE html> <head> <title>svg</title> HTML5 und HTML5 SVGund SVG <meta charset="utf-8" /> <script> // set element onclick event handler window.onload=function () { var circle = document.getelementbyid('redcircle'); // onclick event handler, change circle radius circle.onclick = function() { var r = parseint(this.getattributens(null,"r")); r-=10; circle.setattributens(null,"r",r); var dc = document.getelementsbytagnamens(" for (var i = 0; i < dc.length; i++) { var str = dc.item(i).namespaceuri + " " + dc.item(i).prefix + " " + dc.item(i).localname + " " + dc.item(i).textcontent; alert(str); }}} </script> </head> <body> <h1>svg</h1> <p>this is <code>text/html</code>!</p> <h2>svg</h2> <svg id="svgelem" height="800" xmlns=" </svg> </body> <circle id="redcircle" cx="300" cy="300" r="300" fill="red" /> /80

81 <!DOCTYPE html> <html xmlns=" lang="en" xml:lang="en"> <head> XHTML und XHTML SVGund SVG <title>svg</title> <meta charset="utf-8" /> <script> //<![CDATA[ // set element onclick event handler window.onload=function () { var circle = document.getelementbyid('redcircle'); // onclick event handler, change circle radius circle.onclick = function() { var r = parseint(this.getattributens("","r")); r-=10; circle.setattributens("","r",r); var dc = document.getelementsbytagnamens(" for (var i = 0; i < dc.length; i++) { var str = dc.item(i).namespaceuri + " " + dc.item(i).prefix + " " + dc.item(i).localname + " " + dc.item(i).textcontent; alert(str); } } } //]]> </script> </head> <body> <h1>svg</h1> <p>this is <code>text/html</code>!</p> <h2>svg</h2> <svg id="svgelem" height="800" xmlns=" </svg> </body> </html> <circle id="redcircle" cx="300" cy="300" r="300" fill="red" /> /81

82 Inkredenzen von SVG-Dateien SVG: Struktur und erste Inhalte /82

83 Der Definitionsabschnitt Der Definitionsabschnitt folgt dem Kopf des SVG-Dokuments, er ist optional aber oft wichtig. Dort sind alle Elemente enthalten, die selbst nicht sichtbar sind, aber im Dokument anhand ihrer Namen aufgerufen und zur Anzeige gebracht werden können. Dies sind oft Elemente vom Typ Server-Element. Der Start-Tag dieses Abschnitts ist <defs>... SVG: Struktur und erste Inhalte /83

84 Beispiel <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <!-- A. Adam, listing 03.1, S > <svg width="400" height="300"> <defs> <lineargradient id="verlauf"> <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/> </lineargradient> </defs> <!-- zu zeichnende Elemente --> <rect x="10" y="10" width="200" height="100" style="fill:url(#verlauf)"/> </svg> SVG: Struktur und erste Inhalte /84

85 Erläuterung zu Bsp Es wird ein Rechteck mit dem SVG-Element <rect> konstruiert. Die Koordinaten der linken oberen Ecke dienen als Referenzpunkt, sie sind in px relativ zur linken oberen Ecke des Bildschirms angegeben. Bei uns ist es x="10" y="10". Die Größe des Rechtecks wird durch Breite und Höhe bestimmt: width="200" height="100". Man beachte die Sichtbarkeit des Rechtecks relativ zum Fenster für das SVG-Dokument!!! SVG: Struktur und erste Inhalte /85

86 Erläuterung zu Bsp Der style wird hier über dieses Attribut und durch Verweis auf einen SVG-Stil realisiert. Erst dadurch wird das konstruierte Rechteck sichtbar! (Außer Sie setzen zwei Mal stop-opacity:0 dann sehen Sie auch nichts. Warum?) Der Farbverlauf wird in Form der Angabe der Anfangs-/Endpositionen in % mit Farbe und Undurchsichtigkeitsgrad angegeben. Die Farben werden linear interpoliert. SVG: Struktur und erste Inhalte /86

87 Probleme der Darstellung Probleme kann es durch die Palette der im Internetbrowser zulässigen Farben bzw. durch die Anzahl der Farben generell geben. (Farbraum des Internets mit seinen diskreten Abstufungen, kleine und große Webpalette.) Probieren Sie es durch Aufruf der Datei im IE aus, ggf. auch durch Verstellung der Farbendichte der Bildschirmeinstellungen! SVG: Struktur und erste Inhalte /87

88 Beispiel 5.2 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <svg width="250" height="100" xmlns=" xmlns:xlink=" <!-- Fibinger, Kap. 5, listing 5.2, S > <rect x="0" y="0" width="250" height="100" fill="yellow" /> <text x="125" y="50" style="font-family:verdana; font-weight:bold; font-size:16; fill:blue; text-anchor:middle"> Schreiben in SVG! </text> <!-- Der Text liegt ueber (!) dem Rechteck. --> </svg> SVG: Struktur und erste Inhalte /88

89 Erläuterung Es fällt auf, dass in der DTD-Anweisung der Name des Verweises auf die SVG-DTD anders angegeben wird. So funktioniert es auch. Es werden in svg zwei Namensräume angegeben, was man in diesem Beispiel nicht müsste. Die Sprachraum-Anweisung für das XML-Dokument fehlt hingegen. Das kann Probleme mit Umlauten in den text-abschnitten verursachen. Für deren Kodierung gelten somit die XML- Regeln! SVG: Struktur und erste Inhalte /89

90 Erläuterung Die Reihenfolge der Darstellung entspricht der des Zeichnens: Zuerst beschriebene Elemente werden zuerst gezeichnet, danach beschriebene Elemente überdecken bereits Gezeichnetes, es sei denn, es gibt Transparenz-Anweisungen zu ihnen! Sehen Sie sich die modifizierte Beispieldatei an. Im zweiten Fall wird die Schrift überdeckt. (Painter s Algorithm / Rule als Stichwort.) SVG: Struktur und erste Inhalte /90

91 Erläuterung Das Rechteck wird hier durch ein einfaches fill-attribut mit Angabe einer Standardfarbe gestaltet. Es hat keinen Rand! Die Schrift hingegen wird wieder über das style-attribut sichtbar gemacht. Diesmal werden CSS-Befehle für Schrift direkt als Attributwert aufgezählt. Die Schrift ist einzufärben. (Denken Sie an die einzuhaltende Reihenfolge solcher Befehle laut CSS-Spezifikation.) SVG: Struktur und erste Inhalte /91

92 Maßeinheiten Es gelten die Maßeinheiten nach CSS2. Es gibt relative und absolute Angaben. Default ist px, also Pixel in relativer Angabe. Absolute Einheiten in für inch (d.h. für Englischen Zoll) cm mm pt pc für Zentimeter für Millimeter für points (etwa 72. Teil eines inch) für picas (1 pica entspricht etwa 12 points) SVG: Struktur und erste Inhalte /92

93 Relative Einheiten px em ex Maßeinheiten pixel relativ zur Bildschirmauflösung und zum benutzerdefinierten Koordinatensystem relativ zur Größe eines verwendeten Fonts von Schriftzeichen, Höhe des großen M relativ zur Höhe des Buchstaben x des verwendeten Fonts (auch wenn es ihn nicht gibt) % Prozentwert relativ zum benutzerdefinierten Koordinatensystem SVG: Struktur und erste Inhalte /93

94 Break! Weitere Strukturelemente von SVG, wie z.b. das benutzerdefinierte Koordinatensystem und Einflussgrößen (in Form von SVG-Elementen) darauf, werden später erläutert. Stichwort: Gesteuerte Ansichten. Auch Struktur- und Referenzelemente sollen nicht gleich hier in epischer Breite erläutert werden. Bei Interesse: Fibinger, Kapitel ansehen. SVG: Struktur und erste Inhalte /94

95 Geometrische Grundelemente SVG: Struktur und erste Inhalte /95

96 Vordefinierte Formen (1.0) Seit SVG 1.0 stehen folgende vordefinierte Formen zur Verfügung: Rechteck Kreis Ellipse Linie und Polylinie Polygon Pfad <rect> <circle> <ellipse> <line>, <polyline> <polygon> <path> SVG: Struktur und erste Inhalte /96

97 Vordefinierte Formen (2.0) Es sind weitere vordefinierte Formen für SVG 1.1 bzw. 1.2 / 2.0 angedacht (2002 und nach 2009): Bögen für Kreissektoren, Spiralen, Sterne, gleichseitige Polygone (2.0) Bessere Zusammenarbeit mit XForms, dem XML- Standard für Formulare, z.b. durch Beschreibung vordefinierter Formularfelder (1.1) SVG: Struktur und erste Inhalte /97

98 Rechtecke zeichnen SVG: Struktur und erste Inhalte /98

99 Rechtecke zeichnen Die Attribute width und height sind laut DTD Pflichtangaben für das Element <rect>. Sie geben Breite und Höhe des Rechtecks an. Die Positionsangaben x und y legen die Koordinaten der linken oberen Ecke des Rechtecks fest. Default ist 0. Die Angaben rx und ry legen den x-radius und den y-radius der abgerundeten Ecken des Rechtecks fest. Default ist 0. (Aufpassen!) SVG: Struktur und erste Inhalte /99

100 Beispiel 6.1 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <!-- Fibinger, Kap. 6, listing 6.1, S > <svg width="800" height="600"> <title>rechtecke zeichnen mit rect</title> <g id="bsp_rect" stroke="black" stroke-width="1pt"> <!-- Es folgt ein einfaches gelbes Rechteck: --> <rect x="6cm" y="1cm" width="8cm" height="12cm" fill="yellow" /> <!-- Darin liegt ein blaues Rechteck mit abgerundeten Ecken: --> <rect x="6cm" y="1cm" width="2cm" height="3cm" rx="1cm" ry="1cm" fill="blue" /> </g> </svg> SVG: Struktur und erste Inhalte /100

101 Erläuterung Das Element <g> führt eine Gruppierung durch. Sein Attribut id gibt der Gruppierung eine Erkennungsmarke. Die weiteren Attribute von <g> gelten dann für alle Unterelemente der Gruppe sie müssen nicht ständig neu geschrieben werden. Das Element <title> wird mitunter nicht darstellungswirksam. Es kann Tooltipp oder Browserkopfzeile werden. Es kann (fast) überall im Quelltext stehen. SVG: Struktur und erste Inhalte /101

102 Kreise zeichnen SVG: Struktur und erste Inhalte /102

103 Kreise zeichnen Das Attribut r ist laut DTD Pflichtattribut des Elements <circle>. Die Attribute cx und cy sind die Koordinaten des Kreismittelpunkts. Default ist 0, so dass default nur der rechte untere Viertelkreis ins Bild kommt. Mehr ist nicht zu beachten, außer künstlerischgestalterischen Maßnahmen... SVG: Struktur und erste Inhalte /103

104 Beispiel 6.2 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <!-- Fibinger, Kap. 6, listing 6.2, S > <svg width="800" height="600"> <title>kreise zeichnen mit circle</title> <g id="bsp_circle"> <!-- Es wird ein gelber Kreis gezeichnet: --> <circle cx="400" cy="200" r="150" fill="yellow" /> <!-- Darueber liegt ein roter Kreis: --> <circle cx="400" cy="200" r="50" fill="red" /> </g> </svg> SVG: Struktur und erste Inhalte /104

105 Ellipsen zeichnen SVG: Struktur und erste Inhalte /105

106 Ellipsen zeichnen Die Attribute rx und ry sind laut DTD Pflichtattribute des Elements <ellipse>. Sie bezeichnen die Länge der beiden Halbachsen einer Ellipse. Die Attribute cx und cy legen den Ort des Mittelpunkts der Ellipse fest. Default ist 0. Mehr ist kaum zu beachten, außer künstlerischgestalterische Maßnahmen... Frage: Wie zeichne ich schiefliegende Ellipsen? SVG: Struktur und erste Inhalte /106

107 Beispiel 6.3 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <!-- Fibinger, Kap. 6, listing 6.3, S > <svg width="800" height="600"> <title>ellipsen zeichnen mit ellipse</title> <g id="bsp_ellipse"> <!-- Es folgt eine rote Ellipse --> <ellipse cx="400" cy="200" rx="150" ry="75" fill="red" /> <!-- Darueber liegt eine blaue, 30 Prozent opake Ellipse --> <ellipse cx="400" cy="200" rx="75" ry="150" fill="blue" fill-opacity=".3" /> </g> </svg> SVG: Struktur und erste Inhalte /107

108 Einfache Linien zeichnen Das Element <line> hat keine Pflichtattribute. Die Attribute x1 und y1 legen den Anfangspunkt, die Attribute x2 und y2 legen den Endpunkt der Linie fest. Defaultwert ist immer 0. Mehr ist kaum zu beachten, außer künstlerischgestalterische Maßnahmen... SVG: Struktur und erste Inhalte /108

109 Beispiel 6.4 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <!-- Fibinger, Kap. 6, listing 6.4, S > <svg width="800" height="600"> <title>linien zeichnen mit line</title> <g id="bsp_line" stroke-width="3"> <!-- Es wird eine rote Linie gezeichnet --> <line x1="5cm" y1="10cm" x2="20cm" y2="10cm" stroke="red"/> <!-- Darueber liegen zwei Linien, gelb und gruen--> <line x1="5cm" y1="10cm" x2="12.5cm" y2="5cm" stroke="yellow"/> <line x1= 6cm" y1="10cm" x2="12.5cm" y2="5cm" stroke= green"/> </g> </svg> SVG: Struktur und erste Inhalte /109

110 Polylinien zeichnen Das Element <polyline> enthält das Attribut points als Pflichtattribut laut DTD. Das Attribut points enthält eine Liste von Punkten mit absoluten Koordinaten. Die Maßeinheit der Punktkoordinaten wird aus der des benutzerdefinierten Koordinatensystems automatisch abgeleitet (default: px). Die erneute Angabe von Maßeinheiten führt zum Abbruch des Parse-Vorgangs. Gleitkommazahlen sind möglich, der Trenner ist ein Dezimal-Punkt. SVG: Struktur und erste Inhalte /110

111 Punkt-Listen gestalten Jeder Entwickler sollte sich einen Stil angewöhnen, lange Punktlisten im Quellcode zu schreiben. Empfohlen sei es, immer 2-4 Punktepaare in eine Zeile zu schreiben und die x- und y- Koordinaten durch ein Komma zu trennen. Punktepaare sind durch Leerschritte bzw. Wagenrücklauf zu trennen. SVG: Struktur und erste Inhalte /111

112 Beispiel 6.5 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <!-- Fibinger, Kap. 6, listing 6.5, S > <svg width="800" height="600"> <title>polylinien zeichnen mit polyline</title> <g id="koordinaten"> <desc> Koordinatensystem </desc> <polyline stroke="black" fill="none" stroke-width="2" points="0,300 0,0 300,0" /> <circle id="ursprung" cx="0" cy="0" r="7" fill="red" /> <circle id="0,100" cx="0" cy="100" r="3" fill="black" /> <circle id="0,200" cx="0" cy="200" r="3" fill="black" /> <circle id="100,0" cx="100" cy="0" r="3" fill="black" /> <circle id="200,0" cx="200" cy="0" r="3" fill="black" /> </g>... II SVG: Struktur und erste Inhalte /112

113 Beispiel 6.5 <g id="bsp_polyline"> <!-- Es folgt eine blaue Polylinie. Die Komponenten der Punktliste koennen dabei beliebig durch Komma und Leerraum separiert sein. --> <polyline stroke="blue" fill="none" points=" 50, , , , , , , , 50" /> </g> </svg> SVG: Struktur und erste Inhalte /113

114 Polygone zeichnen Das Element <polygone> enthält das Attribut points als Pflichtattribut laut DTD. Das Attribut points enthält eine Liste von Punkten mit absoluten Koordinaten. Die Maßeinheit der Punktkoordinaten wird aus der des benutzerdefinierten Koordinatensystems automatisch abgeleitet (default: px). Die erneute Angabe von Maßeinheiten führt zum Abbruch des Parse-Vorgangs. Im Gegensatz zu <polyline> wird der Linienzug automatisch geschlossen. SVG: Struktur und erste Inhalte /114

115 Beispiel <!-- Inhalt wie Beispiel 6.5 bis polyline --> <g id="bsp_polygon"> <!-- Es folgt ein schwarzes Polygon mit gelber Fuellung --> <polygon stroke="black" fill="yellow" points="150, , , , , , , , , ,195 79, ,169 50, ,131 79, ,105" /> </g> </svg> SVG: Struktur und erste Inhalte /115

116 Sehr interessante Beispiele SVG: Struktur und erste Inhalte /116

117 Quellen Iris Fibinger, SVG Scalable Vector Graphics. Praxiswegweiser und Referenz für den neuen Vektorgrafikstandard., Markt+Technik Verlag, München, 2002.( Alexander Adam, SVG Scalable Vector Graphics. Das Praxisbuch., Franzi Verlag GmbH, Poing, ( Andrew Watt et al., SVG unleashed, Sams Publishing, Indianapolis, USA, ( Suche: ) Multimedia!!! Beispiele: Michael Frank II /117 SVG: Struktur und erste Inhalte

118 Vielen Dank für Ihre Aufmerksamkeit bis demnächst. SVG: Struktur und erste Inhalte /118