Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Tinosch Ganjineh, Christian v. Prollius 1 Scalable Vector Graphics SVG.

Ähnliche Präsentationen


Präsentation zum Thema: "Tinosch Ganjineh, Christian v. Prollius 1 Scalable Vector Graphics SVG."—  Präsentation transkript:

1 Tinosch Ganjineh, Christian v. Prollius 1 Scalable Vector Graphics SVG

2 Tinosch Ganjineh2 Table of Content Concepts Document Structure Basic Shapes Filling and Stroking Gradients Filter Effects Animation

3 Tinosch Ganjineh3 Scalable Vector Graphics SVG Auszeichnungssprache zur Beschreibung von zweidimensionalen Vektor Grafiken Scalable SVG ist nicht abhängig von festen Bildgrößen Vector Geometrische Objekte (Linien, Kurven) anstatt pixelorientierte Rasterformate Flexibilität Graphics In XML sonst nur rudimentäre Grafikunterstüzung (z.B aus html)

4 Tinosch Ganjineh4 Was kann SVG ? SVG kombiniert verschiedene Grafikobjektarten: Vektorgrafikformen, Bilder und Text (Fonts). Graphische Textelemente von Crawlern erfassbar Zoomen ohne Qualitätsverlust möglich Clientseitige Anwendung von Filtern (Rastereffekte) SVG kann dynamisch sein (Animationen) Als XML Instanz verfügt SVG über ein Document Object Model (DOM) Scriptgesteuerte Interaktionen möglich Grafische Objekte können gruppiert, gestaltet, transformiert und zusammengesetzt werden.

5 Tinosch Ganjineh5 Wie betrachtet man SVG? Web Browser : Einzig Mozilla beinhalten native Unterstüzung Plugins : Z.B. SVG Viewer von AdobeSVG Viewer von Adobe SVG Browser : SVGView aus dem Apache Batik SVG ProjectApache Batik SVG Project

6 Tinosch Ganjineh6 SVG Details MIME-Typ ist "image/svg+xml" (s. [ RFC3023 ])RFC3023 Empfohlende Dateiendungen : Platform indenpendent : *.svg ; *.svgz Macintosh : *.svg ; *.svgz SVG Namespace: System Identifier: Document Type Definition für ein SVG Dokument ...

7 Tinosch Ganjineh7 Wie nutzt man SVG ? Alleinstehende SVG-Web Seite Unter Angabe des MIME Types : image/svg+xml Einbetten durch Verweis auf SVG-Dokument HTML / XHTML Tags :,, Link mit dem HTML Element a Unterstützung von CSS2 (Cascading Style Sheets) XSL (Extensible Stylesheet Language) Inline in einer XHTML Seite (SVG Dokumentfragment)

8 Tinosch Ganjineh8 SVG Dokument Fragment Belibige Anzahl von SVG Elementen innerhalb eines `svg` Elements bilden ein SVG Dokument Fragment Empty : kein Inhalt im `svg` Element Simple : einzelne Grafik Elemente (z.B. rect) Komplex : Verschachtelung von Container/Grafik Elementen als eigenständige Ressource oder Datei, bildet es ein SVG Dokument kann in ein XML Dokument integriert sein

9 Tinosch Ganjineh9 SVG Dokument Struktur Hier : Eingebettet in ein parent XML Dokument

10 Tinosch Ganjineh10 Das `svg` Element

11 Tinosch Ganjineh11 Das `svg` Element contentScriptType contentStyleType

12 Christian v. Prollius12 Basic Shapes (1) Rechteck

13 Christian v. Prollius13 Basic Shapes (2) Kreis

14 Christian v. Prollius14 Basic Shapes (3) Ellipse

15 Christian v. Prollius15 Basic Shapes (4) Linie

16 Christian v. Prollius16 Basic Shapes (5) Polyline

17 Christian v. Prollius17 Basic Shapes (6) Polygon

18 Christian v. Prollius18 Properties (Filling) fill : Füllt grafisches oder textuelles Element mit Farbe fill-rule : Beschreibt das Innen und das Außen einer Form evenodd nonzero

19 Christian v. Prollius19 Properties (Stroke) stroke : Zeichnet einen Rahmen um ein grafisches oder textuelles Element stroke-width : Rahmendicke stroke-linecap : Form des Rahmens

20 Tinosch Ganjineh20 Gradienten … …

21 Tinosch Ganjineh21 Filter Effekte Vorteile : Variable (ein Bild - verschiedene Filter) Ursprungsgrafik bleibt unverändert Clientseitige Anwendung von Filtern kurze Übertragungsraten

22 Tinosch Ganjineh22 Kombination von Filtern Das filter Element, kann eine Menge an Filter Primitiven als Kindelemente besitzen Jedes hat genau eine Funktion damit eine Ausgabe Ausführung einzelner kann hintereinander erfolgen Am Beispiel : Quellgrafik Zielgrafik Dazu sind sechs Filter (Schritte) notwendig …

23 Tinosch Ganjineh23 Erläuterung : Das Filterprimitiv nimmt den alphachannel der Quellgrafik und speichert das Resultat (verwischt) in dem Puffer blur Step 1 : Gaussian Blur

24 Tinosch Ganjineh24 Step 2 : Offset Erläuterung : Die Eingabe (blur) wird lediglich um 4 Schritte in positiver x- und y-Richtung verschoben.

25 Tinosch Ganjineh25 Step 3 : Specular Lighting Erläuterung : Als Eingabe wird der Puffer blur als Hochebene eingesetzt und eine punktförmige Lichtquelle bewirkt einen reflektierenden Schatteneffekt, der in dem Puffer specOut gespeichert wird.

26 Tinosch Ganjineh26 Step 4 : Composite Erläuterung : Das Filterprimitiv Composite verwendet die Ursprungsgrafik als Schablone um die Umrisse des Puffers specOut durch beschneiden denen der Eingangsgrafik anzupassen. Die resultierende Grafik überschreibt anschliessend specOut.

27 Tinosch Ganjineh27 Step 5 : Composite Erläuterung : Hier bildet das Filterprimitiv Composite die Überlagerung der Eingangsgrafik mit dem Resultat des 3. Filters, und speichert das Resultat in litPaint.

28 Tinosch Ganjineh28 Step 6 : Merge Erläuterung : Hier werden die Resultate des 2. und des 5. Schritts zusammengefürt. Übersicht und Einzelheiten der Filterprimitiven :

29 Christian v. Prollius29 Animation

30 Christian v. Prollius30 Animation (Rechteck)

31 Christian v. Prollius31 Animation (Schrift) It's alive!

32 Christian v. Prollius32 Animation (Schrift)

33 Tinosch Ganjineh33 Danke ! Mehr Informationen


Herunterladen ppt "Tinosch Ganjineh, Christian v. Prollius 1 Scalable Vector Graphics SVG."

Ähnliche Präsentationen


Google-Anzeigen