|
|
|
|
|
|
|
|
|
|
Vorstellung |
|
|
|
Einleitung - SVG |
|
|
|
2. Einsatzmöglichkeiten und
Anwendungsbereiche |
|
|
|
SVG – Praxisbeispiel |
|
|
|
6. Tools |
|
|
|
7. Links und Literatur |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1980 – 1987 Studium Lehramt Sek II (1 Jahr Studienaufenthalt in Italien 1983
–1984) |
|
|
|
1987 – 1996 Lernsystementwickler/Dozent für
Informatik an der Wirtschaftsakademie Schleswig Holstein |
|
|
|
1995 – 1997 berufsbegleitende Ausbildung zum
Verlagsfachwirt/ IHK |
|
|
|
1996 Gründung „Alber-Verlag für Lernsysteme“: |
|
|
|
Entwicklung Lernsysteme |
|
„Trainer Euro Praxis“ (1997/1998) |
|
„HygieneButler“ (1999-2001) |
|
|
|
Technische Dokumentation |
|
Handbuch für Logistiksoftware Preussag/VTG
(1996) |
|
Dräger – Engineering Data Base (EDB) (1997) |
|
|
|
Lehre |
|
Seit 1999 Berufsakademie Schleswig-Holstein,
Informatik |
|
Seit 2000 Fachhochschule Kiel, Fachbereich
Multimedia Production, Fach: „Autorensysteme“ |
|
(Authorware, Director) |
|
|
|
2001 – 2002 Studium Multimediamanagement
(Master), Universität Kiel |
|
|
|
|
|
|
|
|
Scalable Vector Graphics (SVG) Ende 2001 vom
W3C (World Wide Web Consortium) in der Version 1.0 als Standard
verabschiedet. |
|
|
|
Der Standard stellt für die Visualisierung
von Daten eine interessante Alternative zum verbreiteten
Vektor-Grafikformat im Internet: Macromedia „Flash“ oder „Director“ dar. |
|
|
|
Bei Scalable Vector Graphics handelt es sich
um ein XML-Format, das für die Darstellung |
|
|
|
vektororientierter, zweidimensionaler Grafiken |
|
|
|
eingeführt wurde. |
|
|
|
Vektorgrafiken beschreiben im Gegensatz zu
Rastergrafiken nicht die einzelnen Farbwerte aller Bildpunkte, sondern
Linien, Polygone, Kurven und Text als Funktionen. Dadurch ist eine
beliebige, verlustfreie Vergrößerung oder auch Animation möglich. |
|
|
|
|
|
Quelle: |
|
Jochen Schäfer und Olaf Maaß, München,
Siteforce AG, http://www.computerwoche.de/index.cfm?pageid=255&artid=46221&category=73# |
|
|
|
|
|
|
|
|
1998 W3C |
|
eXtensible Markup Language = erweiterbare
Auszeichnungssprache, |
|
Dokumentbeschreibungssprache |
|
|
|
XML = Struktursprache, die keinerlei
Layouteigenschaften transportiert |
|
XML speichert nur die Daten und die Struktur
eines Dokumentes. |
|
|
|
Selbstdefinierte Tags und Attribute für Tags |
|
Regelsätze beschreiben Tags und Attribute:
Document Type Definition (DTD) auch „Schema“ |
|
|
|
Struktur und Layout sind streng getrennt |
|
|
|
Lizenzfrei |
|
textbasiert |
|
|
|
|
|
|
Die folgende XML-Datei speichert Struktur und
Inhalt einer Adresse: |
|
|
|
<?xml version= “ 1.0“ encoding= “iso-8859-1“
?> Prolog |
|
<dokument> Wurzelelement |
|
<adressen> selbstdef. Tags |
|
<Nachname>Maier</Nachname> Inhalt 1 |
|
<Vorname>Franz</Vorname> Inhalt 2 <Ort>Kiel</Ort> Inhalt
3 |
|
</adressen> abschl. Tag |
|
</dokument> schließ.
Tag |
|
|
|
|
|
|
|
|
Darstellung der Datei “Adresse.xml“ im Browser (ab IE 5.0/5.5) |
|
|
|
|
|
|
Die folgende SVG-Datei definiert ein Rechteck
mit einer Füllfarbe: |
|
|
|
|
|
|
Darstellung der Datei “Rechteck.svg“ im IE 5.0 |
|
(Adobe Plugin SVG Viewer 3 installiert) |
|
|
|
|
|
|
|
|
|
|
Indem Descartes jedem Punkt der Ebene |
|
zwei Koordinaten zuordnet, kann er |
|
geometrische Figuren als Lösungsmengen |
|
von Gleichungen algebraisch darstellen. |
|
|
|
Seine Idee: er führte einen Bezugspunkt und zwei
Koordinatenachsen ein: |
|
das cartesische Koordinatensystem. |
|
|
|
Zur Darstellung räumlicher Sachverhalte ist die
analytische Geometrie ein unentbehrliches
Hilfsmittel, insbesondere bei der elektronischen Verarbeitung
grafischer Daten |
|
|
|
|
|
Quelle:Elisabeth Barth, Anschauliche Analytische
Geometrie, 1995 |
|
|
|
|
|
|
|
|
Vektoraddition F3 = F1 + F2 |
|
|
|
|
Die Koordinatenschreibweise erleichtert das
Rechnen mit Vektoren und ermöglicht das Beschreiben grafischer Elemente mit
Funktionen in Textdateien. |
|
|
|
|
|
|
SVG dient der Beschreibung einer Grafik, die aus
verschiedenen Vektoren besteht. Ein Vektor ist dabei eine Linie zwischen
zwei Punkten. |
|
|
|
|
|
Der Vorteil gegenüber Bitmap-Grafikformaten wie
GIF, JPEG ist, dass die Vektoren in der Grafikdatei mittes Funktionen
gespeichert werden, nicht die Pixel, aus denen sich Vektoren
zusammensetzen. Diese Daten benötigen dementsprechend viel weniger Platz zur
Speicherung als die einzelnen Bildpunkte. |
|
|
|
|
|
Hinzu kommt, dass die Informationen über die
Vektoren nicht binär, sondern |
|
als Text – in XML-Code – gespeichert werden.
SVG-Dateien können so in einem gewöhnlichen Editor geändert, gelesen und
geschrieben werden. |
|
|
|
Quelle: |
|
Spona, Helma: SVG Webgrafiken mit XML, Bonn,
2003, S. 11 |
|
|
|
|
|
|
|
|
Pixelgrafik: |
|
|
|
Pixelgrafiken bestehen aus den individuellen |
|
Bildpunkten, d. h. Rasterpositionen und
Farbzuweisung |
|
(bei True Color 3x8 = 24 Bit (3 Bytes) |
|
|
|
Beispiel: |
|
ein Kreis mit Durchmesser = 80 Pixel ergibt 2102
Pixel |
|
(A = r2 p >> A = 402 x 3,141 >> 2102,4 Pixel) |
|
|
|
Kreisfläche als Bmp 2102 x 3 = 6306 Bytes |
|
|
|
|
|
|
|
|
|
|
In einem SVG-Dokument belegt dieser Kreis 50
Bytes: |
|
|
|
<circle cx= “40“ cy= “40“ r= “40“ style=
“fill:green“/> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Vektorgrafiken beschreiben also nicht einzelne
Pixel, sondern geometrische Elementarobjekte. Daraus ergibt sich eine
beliebige und verlustfreie Skalierung |
|
|
|
|
|
|
|
|
|
|
|
|
Text, Bild und Animation aus einer Quelle |
|
|
|
|
|
Für die Technische Kommunikation bieten
Animationen erhebliche Vorteile. |
|
Denn damit lassen sich Arbeitsabläufe
eindrücklich wiedergeben. |
|
|
|
Da SVG ein XML-Standard ist, birgt es Vorteile
in Bezug auf die Datenablage. SVG kann als Datenbank für Grafiken
verstanden werden. |
|
|
|
Sehen Sie dazu die folgenden Beispiele. |
|
|
|
Beispiele: Animation Zahnräder, CD-ROM,
Defragmentieren |
|
|
|
|
|
|
|
|
|
|
Anfahrt Kiel – Aalen |
|
|
|
Erzeugt mit |
|
Jasc WebDraw |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
JASC WebDraw |
|
|
|
VectorEye |
|
|
|
SVGMaker |
|
|
|
RapidSVGMaker |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
WORD Drucken mit SVGMaker SVG_Datei |
|
|
|
|
XStream Software Announces Upcoming Release of
RapidSVG™ v1.0 |
|
In Q 2/2003 |
|
„Using nothing more complicated than
drag-and-drop actions and property settings, developers working in RapidSVG
may build professional-level SVG content with high levels of interactivity
and animations. There is absolutely no programming involved. Developers may
easily create ready-made interactive content using the extensive set of
interactive components provided in RapidSVG’s drag-and-drop object palette.
These interactive objects include Hyperlink (to create different types of
interactive links, including links between SVG pages, links to pop-up
text/images, and links to external SVG files and web pages), Check Box (to
add Windows-style check boxes), Radio Button (to add Windows-style radio
buttons), Combo Box (to add Windows-style combo boxes), Text Field and Instruction
Box (to add text directly to an SVG page), and Validation Field (to add
active validation text fields for entering text). RapidSVG also includes a
palette of drag-and-drop draw objects and draw tools, which are used to
visually enhance SVG pages with lines, shapes, colors, and custom art.“ |
|
http://www.xstreamsoftware.com/news_rapidsvg.htm |
|
|
|
|
|
|
Links: |
|
|
|
www.scale-a-vector.de |
|
www.helma-spona.de |
|
www.w3.org/Graphics/SVG/Overview.htm8 |
|
|
|
Literatur: |
|
|
|
XML: |
|
Hanke, Johann-Christian: XML für
Einsteiger,“knowWare“, 80 S. |
|
Young Michel J.: XML Schritt für
Schritt,“Microsoft Press“, 486 S. |
|
|
|
SVG: |
|
Spona, Helma: SVG Webgrafiken mit XML, bhv,
384 S. |
|
Fininger, Iris SVG-Scalable Vector
Graphics, 468 S. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Vielen Dank für Ihre Aufmerksamkeit! |
|
Notizen