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

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

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)

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.

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

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 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "

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)

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

Tinosch Ganjineh9 SVG Dokument Struktur Hier : Eingebettet in ein parent XML Dokument <parent xmlns=" xmlns:svg="

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;)* >

Tinosch Ganjineh11 Das `svg` Element <!ATTLIST svgsvg xmlnsxmlns CDATA #FIXED " %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

Christian v. Prollius12 Basic Shapes (1) Rechteck <svg width="12cm" height="4cm" viewBox=" " xmlns=" <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" />

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

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

Christian v. Prollius15 Basic Shapes (4) Linie

Christian v. Prollius16 Basic Shapes (5) Polyline <polyline fill="none" stroke="blue" stroke-width="10" points="50, , , , , , , , , , , , , , , , , , , , , ,375" />

Christian v. Prollius17 Basic Shapes (6) Polygon <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379, , , , , , , , ,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958, , , , ,137.5" />

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

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

Tinosch Ganjineh20 Gradienten … …

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

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 …

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

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

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.

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.

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.

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

Christian v. Prollius29 Animation

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

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

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

Tinosch Ganjineh33 Danke ! Mehr Informationen