svg scalable vector graphics praktikumsarbeit an der tu chemnitz von rené bergelt und felix schmitt

24
SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

Upload: liutpold-ziegenbein

Post on 05-Apr-2015

106 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

SVG Scalable Vector Graphics

Praktikumsarbeit an der TU Chemnitz

von René Bergelt und Felix Schmitt

Page 2: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

SVG 1. Einleitung

Praktikumsarbeit an der TU Chemnitz

von René Bergelt und Felix Schmitt

Page 3: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

1.1. Vorstellung

Einleitung Vorstellung Geschichte Zusammenhang mit W3C

Hauptteil Skriptsprache SVG und XML Nutzung von SVG

Das WWR-Projekt Arbeit mit SVG

Statische Grafiken (Grundformen) Animationen (der „animate“ Tag) Komplexe Grafiken Filter und Effekte

Tools WebDraw Corel Draw (Exportfunktionen) Eigenentwicklung

Schluss Komplexe Animationen\ WWR Ausblicke auf die Zukunft und W3C

SVG - Einleitung

Page 4: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

1.1. Vorstellung

SVG - Einleitung

Copyright © 2002 Petra Kukofka

http://www.scale-a-vector.de

Page 5: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

1.2. Geschichte

Erste Konzepte bereits 1998 erarbeitet April: Einreichung einer Note über PGML bei W3C durch Adobe, Sun, IBM, u.a. Mai: Vorschlag von hp, MS, Macromedia u. Visio für VML Entwurf von HGML durch PRP und Orange

Oktober: Entstehung von SVG durch Zusammenfassung, Optimierung und Ergänzung der verschiedenen Konzepte

SVG - Einleitung

Page 6: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

1.3. Zusammenhang mit W3C

W3C: Interessenverband zahlreicher Einrichtungen um die Anzahl an

www-Standards zu reduzieren Gründung einer SVG-Working Group (Adobe, hp, Apple, Canon, Corel, MS,...) 4. September 2001: offizielle SVG-Recommendation (

http://www.w3.org/TR/SVG/) Aufbau von SVG Strukturen DTD (Dokumenttypdefinition) SVG-DOM Interfaces (Document Object Model)

SVG - Einleitung

Page 7: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

SVG 2. Praktikumsarbeit

Praktikumsarbeit an der TU Chemnitz

von René Bergelt und Felix Schmitt

Page 8: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.1. SVG - Skriptsprache

Programmiersprachen, die die Ausführung des Programmcodes ohne getrennte Übersetzungsphase ermöglichen.

3 Arten Abgeleitet von Kommandozeileninterpretern Teil eines Anwenderprogramms (z. B. Makros) Vollwertige Programmiersprache

Kein Unterschied zwischen Code und Daten (manche) Meist mit wenig Quelltext viel erreichen Merkmale

Interpretierend Automatische Typenkonversion und Speichermanagement Implizit deklarierte Variablen Dynamische Funktionsnamen Späte syntaktische Fehlererkennung

SVG - Praktikumsarbeit

Page 9: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.2. SVG und XML

SVG basiert auf der Metasprache XML Baumstruktur Tags, Attribute, leere Tags Root-Elemente Verschachtelungen Entity-Referenzen

SVG - Praktikumsarbeit

Page 10: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

SVG 2.3. Das WWR Projekt

Praktikumsarbeit an der TU Chemnitz

von René Bergelt und Felix Schmitt

Page 11: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.3. Nutzung von SVG

Verbundprojekt im Rahmen bmb+f Programms

„Neue Medien in der Hochschullehre“

Kleine Module, die im Hinblick auf konkrete Lernziele kombinierbar sind http://www.wwr-project.de SVG zur Animation von e-Learning Inhalten

SVG - Das WWR Projekt

Page 12: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

SVG 2.4. Arbeit mit SVG

Praktikumsarbeit an der TU Chemnitz

von René Bergelt und Felix Schmitt

Page 13: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.4.1. Statische Grafiken

Grundformen-Tags (Rechteck, Kreise, Linien, Ellipsen)

besitzen Attribute wie Füllung, Linienstärke, Deckkraft, Dimensionen

Komplexe Formen (Polygone, Kurven, Pfade)

SVG - Arbeit mit SVG

Page 14: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.4.2. Animationen

Werden durch animate-Tag definiert <animate>, <animateColor>, <animateMotion>, <animateTransform>, <set>

SVG - Arbeit mit SVG

Page 15: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.4.3. Komplexe Grafiken

SVG - Arbeit mit SVG

© www.isodraw.com

Page 16: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.4.4. Filter und Effekte

Werden innerhalb eines filter-Tags definiert

SVG - Arbeit mit SVG

Page 17: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

SVG 2.5. Tools

Praktikumsarbeit an der TU Chemnitz

von René Bergelt und Felix Schmitt

Page 18: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.5.1. WebDraw

SVG - Tools

Von Jasc Software Speziell auf SVG ausgelegter Editor WYSIWYG-Tool Code-Validierung Zahlreiche Zeichentools Timeline, DOM-Tree, vorgefertigte Filter

www.jasc.com

Page 19: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.5.2. Corel Draw 11

Von Corel WYSIWYG-Tool Exportfunktion für statische SVG Grafiken Grundformen bleiben erhalten (keine Umwandlung in Polygone)

SVG - Tools

Page 20: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

2.5.3. SVG Builder

Auf Grund unverständlicher Kompatibilitätsprobleme zwischen Jasc WebDraw und Corel Draw 11 auch sich selbst gegenüber

Bei Beherrschen der Sprache sind keine komplizierten Menü- und Toolstrukturen zu bewältigen

Features: Syntax-Highlighting DOM Codevervollständigung (automatische

In-Tag-Erkennung) Dateikomprimierung (gzip-Einbindung) und

Releasefunktion Live-Vorschau Befehlsreferenz kostenlos

SVG - Tools

Page 21: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

SVG 3. Ergebnisse

Praktikumsarbeit an der TU Chemnitz

von René Bergelt und Felix Schmitt

Page 22: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

3.1. Komplexe Anim.\ WWR

SVG - Ergebnisse

Page 23: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

3.2. Ausblicke für SVG

Fertigstellung von SVG 2.0 Schutz des Sourcecodes Scriptingmöglichkeiten Soll von allen Browser, grafischen Programmen, Autoren-Tools und

Konvertierungsprogrammen für PCs, Handhelds sowie Drucker unterstützt werden

Viewer Programm Unterstützung aller bzw. der meisten SVG Standards

SVG - Ergebnisse

Page 24: SVG Scalable Vector Graphics Praktikumsarbeit an der TU Chemnitz von René Bergelt und Felix Schmitt

3.3. Quellen

Iris Fibinger: SVG-Scalable Vector Graphics, M+T Verlag 2002 Helmut Herold: Linux-Unix Systemprogrammierung, Addison Wesley 1999 David A. Solomon: Inside Windows NT, Microsoft Press 1998 www.Scale-A-Vector.de www.isodraw.com Robert Baumgartl: Übung Betriebssysteme, TU Chemnitz 2003

SVG - Ergebnisse