1 / 33

Scalable Vector Graphics SVG

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

teddy
Download Presentation

Scalable Vector Graphics SVG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

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

  10. 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

  11. 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

  12. 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>

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

  14. 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" />

  15. 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>

  16. 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. 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. 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. Properties (Stroke) • stroke : Zeichnet einen Rahmen um ein grafisches oder textuelles Element • stroke-width : Rahmendicke • stroke-linecap : Form des Rahmens

  20. Gradienten … <linearGradient id="MyGradient"> <stop offset = " 5%" stop-color = " #F60" /> <stop offset = "95%" stop-color = "#FF6" /> </linearGradient> … Tinosch Ganjineh

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

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. Animation

  30. 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>

  31. 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. 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>

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

More Related