330 likes | 490 Views
Scalable Vector Graphics SVG. Table of Content. Concepts Document Structure Basic Shapes Filling and Stroking Gradients Filter Effects Animation. Scalable Vector Graphics SVG. Auszeichnungssprache zur Beschreibung von zweidimensionalen Vektor Grafiken Scalable
E N D
Scalable Vector Graphics SVG Tinosch Ganjineh, Christian v. Prollius
Table of Content • Concepts • Document Structure • Basic Shapes • Filling and Stroking • Gradients • Filter Effects • Animation Tinosch Ganjineh
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 <img> aus html) Tinosch Ganjineh
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. Tinosch Ganjineh
Wie betrachtet man SVG? • Web Browser : • Einzig Mozilla beinhalten native Unterstüzung • Plugins : • Z.B. SVG Viewer von Adobe • SVG Browser : • SVGView aus dem Apache Batik SVG Project Tinosch Ganjineh
SVG Details • MIME-Typ ist "image/svg+xml" (s. [ RFC3023 ]) • Empfohlende Dateiendungen : • Platform indenpendent : “*.svg“ ; “*.svgz“ • Macintosh : “*.svg “ ; “*.svgz“ • SVG Namespace: http://www.w3.org/2000/svg • System Identifier: www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd • Document Type Definition für ein SVG Dokument Tinosch Ganjineh
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 : <img>, <object>, <applet> • Link mit dem HTML Element ‘a‘ • Unterstützung von • CSS2 (Cascading Style Sheets) • XSL (Extensible Stylesheet Language) • Inline in einer XHTML Seite (SVG Dokumentfragment) Tinosch Ganjineh
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 Tinosch Ganjineh
SVG Dokument Struktur Hier : Eingebettet in ein parent XML Dokument Tinosch Ganjineh
Das `svg` Element <!ENTITY % svgExt "" > <!ELEMENT svg ( desc | 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-face %ceExt;%svgExt;)* > Tinosch Ganjineh
Das `svg` Element <!ATTLIST svg xmlns CDATA #FIXED "http://www.w3.org/2000/svg" %stdAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED zoomAndPan (disable | magnify) 'magnify' %graphicsElementEvents; %documentEvents; version%Number; #FIXED "1.0" x%Coordinate; #IMPLIED y%Coordinate; #IMPLIED width%Length; #IMPLIED height%Length; #IMPLIED contentScriptType %ContentType; "text/ecmascript" contentStyleType %ContentType; "text/css" > Tinosch Ganjineh
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" /> </svg>
Basic Shapes (2) Kreis <circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />
Basic Shapes (3) Ellipse <g transform="translate(300 200)"> <ellipse rx="250" ry="100“ fill="red" /> </g> <ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" />
Basic Shapes (4) Linie <g stroke="green" > <line x1="100" y1="300" x2="300" y2="100“ stroke-width="5" /> <line x1="300" y1="300" x2="500" y2="100“ stroke-width="10" /> <line x1="500" y1="300" x2="700" y2="100" stroke-width="15" /> <line x1="700" y1="300" x2="900" y2="100" stroke-width="20" /> <line x1="900" y1="300" x2="1100" y2="100“ stroke-width="25" /> </g>
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" />
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" />
Properties (Filling) • fill : Füllt grafisches oder textuelles Element mit Farbe • fill-rule : Beschreibt das „Innen“ und das „Außen“ einer Form • evenodd • nonzero
Properties (Stroke) • stroke : Zeichnet einen Rahmen um ein grafisches oder textuelles Element • stroke-width : Rahmendicke • stroke-linecap : Form des Rahmens
Gradienten … <linearGradient id="MyGradient"> <stop offset = " 5%" stop-color = " #F60" /> <stop offset = "95%" stop-color = "#FF6" /> </linearGradient> … Tinosch Ganjineh
Filter Effekte • Vorteile : • Variable (ein Bild - verschiedene Filter) • Ursprungsgrafik bleibt unverändert • Clientseitige Anwendung von Filtern kurze Übertragungsraten Tinosch Ganjineh
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 : QuellgrafikZielgrafik Dazu sind sechs Filter (Schritte) notwendig … Tinosch Ganjineh
Step 1 : “Gaussian Blur“ <filter id="MyFilter" x="0" y="0" width="200" height="120"> <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“ Tinosch Ganjineh
Step 2 : “Offset“ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> Erläuterung : Die Eingabe (“blur“) wird lediglich um 4 Schritte in positiver x- und y-Richtung verschoben. Tinosch Ganjineh
Step 3 : “Specular Lighting“ <feSpecularLighting in = "blur" surfaceScale = “5" specularConstant = „0.75" specularExponent = "20" lighting-color = "#bbbbbb" result = "specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> 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. Tinosch Ganjineh
Step 4 : “Composite“ <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> 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“. Tinosch Ganjineh
Step 5 : “Composite“ <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> Erläuterung : Hier bildet das Filterprimitiv Composite die Überlagerung der Eingangsgrafik mit dem Resultat des 3. Filters, und speichert das Resultat in “litPaint“. Tinosch Ganjineh
Step 6 : “Merge“ <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter> 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 Tinosch Ganjineh
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" /> </rect>
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" />
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" /> </text>
Danke ! Mehr Informationen http://www.w3.org/TR/SVG/ Tinosch Ganjineh