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

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: http://www.w3.org/2000/svg http://www.w3.org/2000/svg System Identifier: www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd Document Type Definition für ein SVG Dokument <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">...

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 <parent xmlns="http://example.org xmlns:svg="http://www.w3.org/2000/svg">

10 Tinosch Ganjineh10 Das `svg` Element <!ELEMENT svg (svg descdesc | title | metadata | defs | path | text | rect | circle | ellipse | line | polyline | polygon | use | image | svg | g | view |switch | a | altGlyphDef | script |style | symbol | marker | clipPath | mask | linearGradient | set | radialGradient | pattern | filter | cursor | font | animate | animateMotion | animateColor| animateTransform | color-profile | font-facetitlemetadatadefspathtextrectcircle ellipselinepolylinepolygonuseimagesvgg viewswitchaaltGlyphDefscriptstylesymbol markerclipPathmasklinearGradientset radialGradientpatternfiltercursorfontanimate animateMotionanimateColoranimateTransform color-profilefont-face %ceExt;%svgExt;)* >

11 Tinosch Ganjineh11 Das `svg` Element <!ATTLIST svgsvg xmlnsxmlns CDATA #FIXED "http://www.w3.org/2000/svg" %stdAttrs; externalResourcesRequired %Boolean; #IMPLIEDexternalResourcesRequired classclass %ClassList; #IMPLIED style %StyleSheet; #IMPLIEDstyle zoomAndPan (disable | magnify) 'magnify' %graphicsElementEvents;zoomAndPan %graphicsElementEvents; %documentEvents; version %Number; #FIXED "1.0"version%Number; xx %Coordinate; #IMPLIED%Coordinate; y %Coordinate; #IMPLIEDy%Coordinate; widthwidth %Length; #IMPLIED%Length; height %Length; #IMPLIEDheight%Length; contentScriptType %ContentType; "text/ecmascript" contentStyleType %ContentType; "text/css" >contentScriptType contentStyleType

12 Christian v. Prollius12 Basic Shapes (1) Rechteck <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" <rect x="1" y="1" width="1198" height="398 fill="none" stroke="blue" stroke-width="2"/> <rect x="400" y="100" width="400" height="200 fill="yellow" stroke="navy" stroke-width="10" />

13 Christian v. Prollius13 Basic Shapes (2) Kreis <circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />

14 Christian v. Prollius14 Basic Shapes (3) Ellipse <ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" />

15 Christian v. Prollius15 Basic Shapes (4) Linie

16 Christian v. Prollius16 Basic Shapes (5) Polyline <polyline fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" />

17 Christian v. Prollius17 Basic Shapes (6) Polygon <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" />

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 <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> 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 <feSpecularLighting in = "blur" surfaceScale = 5" specularConstant = 0.75" specularExponent = "20" lighting-color = "#bbbbbb" result = "specOut"> 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 : http://www.adobe.com/svg/basics/filtereffects2.html

29 Christian v. Prollius29 Animation

30 Christian v. Prollius30 Animation (Rechteck) <rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255,255,0)" > <animate attributeName="x" attributeType="XML begin="0s" dur="9s" fill="freeze" from="300" to="0" /> <animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" /> <animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" /> <animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />

31 Christian v. Prollius31 Animation (Schrift) <text id="TextElement" x="0" y="0 font-family="Verdana" font-size="35.27" visibility="hidden" >It's alive! <set attributeName="visibility" attributeType="CSS" to="visible begin="3s" dur="6s" fill="freeze" /> <animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" /> <animateColor attributeName="fill" attributeType="CSS from="rgb(0,0,255)" to="rgb(128,0,0) begin="3s" dur="6s" fill="freeze" />

32 Christian v. Prollius32 Animation (Schrift) <animateTransform attributeName="transform" attributeType="XML type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum begin="3s" dur="6s" fill="freeze" />

33 Tinosch Ganjineh33 Danke ! Mehr Informationen http://www.w3.org/TR/SVG/