Sie befinden sich hier: Home » Seminare » XML » SVGINTRO

Scalable Vector Graphics (SVG) und SMIL

Kursziele

Zur Beschreibung zweidimensionaler Vektorgrafiken definiert das W3C die Scalable Vector Graphics. Der freie SVG-Standard basiert auf XML und wird bereits von vielen namhaften Vektorgrafik-Programmen und Browsern unterstützt. SVG-Vektorgrafiken bestechen durch geringe Dateigröße, unbeschränkten Zugriff auf Textinhalte, sehr gute Animationsmöglichkeiten und beliebige Skalierbarkeit. Somit lässt sich SVG gut für CAD, Kartografie, DTP, mobile Displays oder hochauflösende Drucker nutzen. Ein besonderer Vorteil liegt in der Erzeugung dynamischer SVG-Grafiken mit Datenbankinhalten, die zunehmend in Report-Generatoren verwendet werden. Die Teilnehmer erlernen die XML-Syntax und wie sie vordefinierte Grundformen sowie Pfade, Farbsysteme und Formateigenschaften oder das Einbinden von Text gewinnbringend einsetzen können. Des Weiteren behandelt das Seminar die Mulitmedia-Sprache SMIL mit der sich SVGs animieren lassen. Das Training von zeitsparenden Entwicklungstechniken rundet das Seminar ab.

Zielgruppe

  

Empfohlene Dauer

Anwendungsentwickler, Web-Entwickler  2 Tage, insgesamt 12 Zeitstunden

Inhalte

  • Einstieg in SVG
    • Vektorgrafiken und Rastergrafiken (Bitmaps)
    • ›World Wide Web Consortium‹ (W3C) und die SVG-Standardisierung
    • SVG und XML, Transformation
    • Erstes SVG-Dokument, Dokumentstruktur
    • Rendering Model, Reihenfolge beim Zeichnen
    • SVG-Software: SVG-Editoren und SVG-Viewer
    • SVG-Unterstützung in Browsern, SVGs einbetten
    • SVG vs. Adobe Flash
  • Grundlegende Formen
    • Grafische Primitive von SVG
    • Linien
    • Rechtecke
    • Kreise, Ellipsen
    • Polygone, Polyline
  • Transformationen
    • Koordinatensystem, Viewport
    • Einheiten
    • Darstellungsverhältnis
    • Verschiebung/Translation, Skalierung, Rotation
    • Kartesisches Koordinatensystem und Alternativen
  • Stiftattribute, Farben, Muster, Verläufe
    • Sichtbarkeit
    • Farben, Transparenz, Farbprofile
    • Strokes, Line Caps, Joins
    • Füllungen, Muster (Pattern)
    • Lineare und Radiale Gradienten
  • Pfade
    • Pfade definieren
    • Relative und absolute Bezüge
    • Elliptische Bögen
    • Quadratische und kubische Bézier-Kurven
  • Textdarstellung
    • Einfachern Text setzen, Baseline
    • Darstellungsattribute
    • Textausrichtung/Text-Layout
    • Internationalisierung
    • Weißraum
    • Dekoration
    • Text an Pfad ausrichten
    • Selektion und Zwischenablage (Clipboard)
    • Mehrsprachigkeit
    • SVG-Fonts, Font-Beschreibungen
  • Grafische Effekte und SVG-Filter
    • Matrizen zur Beschreibungen von Grafikfiltern
    • Schattierungen
    • Lichtquellen
    • Filter-Primitive
    • Matrix Transformation mit feColorMatrix
    • Verwischungen mit feGaussianBlur
    • Verrechnung von Bildern mit feDisplacement
    • Zufällige Texturen mit feTurbulence
  • Clipping und Masking
    • Beschrittrechteck
    • SVG-Filter ClipPath
    • Schnitt an Pfaden
    • Masken
  • Interaktivität, Animationen und Skripting
    • Benutzerereignisse, Mausklicks
    • JavaScript
    • ›Document Object Model‹ (DOM), Document Object Model Events
    • Zeitmessung, Wiederholungen, zeitgesteuerte Abläufe
    • SVG und ›Synchronized Multimedia Integration Language‹ (SMIL)
  • Gruppen und Links
    • Gruppierungen und Referenzierungen
    • Links definieren
    • SVG-Fragmente
    • Externe Dokumente einbinden
    • Hyperlink- und XLink-Modul
  • SVG in der Praxis
    • Abwärtskompatibilität
    • SVG über Web-Server anbieten
    • SVG-Grafiken in Office-Dokumente einbetten
    • SVG-Profile, SVG in mobilen Endgeräten
  • Bibliotheken zum Generieren von SVG
    • Dynamisches Generieren von SVG-Charts
    • Programmier-API in Java, PHP, C#, VB.NET
    • Batik SVG Toolkit
    • XSL-Transformationen
    • Konvertieren von SVG-Bildern in GIF, PNG, JPG, TIFF und ähnliche Formate

Voraussetzungen

Der Kurs ›XML Grundlagen‹ oder vergleichbare Kenntnisse.

Seminarunterlagen

Unterlagen (Kopien der Folien), Zertifikat.

Schlagwörter