Scalable Vector Graphics SVG

(1)

Scalable Vector Graphics SVG

(2)

Table of Content

 Concepts

 Document Structure

 Basic Shapes

 Filling and Stroking

 Gradients

 Filter Effects

 Animation

(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)

(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,

(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

(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

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

(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)

(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

(9)

SVG Dokument Struktur

Hier : Eingebettet in ein parent XML Dokument

<?xml version="1.0" standalone="yes"?>

<parent xmlns="http://example.org„

xmlns:svg="http://www.w3.org/2000/svg">

</svg:svg>

</parent>

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

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

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

<ellipse transform="translate(900 200) rotate(-30)"

rx="250" ry="100"

fill="none" stroke="blue" stroke-width="20" />

(15)

Basic Shapes (4) Linie

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

…

(21)

Filter Effekte

 Vorteile :



Variable (ein Bild - verschiedene Filter)



Ursprungsgrafik bleibt unverändert



Clientseitige Anwendung von Filtern

 kurze Übertragungsraten

(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 :

Quellgrafik Zielgrafik



(23)

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

Step 1 : “Gaussian Blur“

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

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

(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

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

(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 :

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

<animate attributeName="width" attributeType="XML"

<animate attributeName="height" attributeType="XML"

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

<animateColor attributeName="fill" attributeType="CSS“

from="rgb(0,0,255)" to="rgb(128,0,0)“

(32)

Animation (Schrift)

<animateTransform attributeName="transform" attributeType="XML“

type="rotate" from="-30" to="0"

<animateTransform attributeName="transform" attributeType="XML"

type="scale" from="1" to="3" additive="sum“

</text>

(33)