Tinosch Ganjineh, Christian v. Prollius 1

Scalable Vector Graphics SVG

Tinosch Ganjineh 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

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">...

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

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

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

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

<svg:svg width="4cm" height="8cm">

<svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />

</svg:svg>

</parent>

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

04/11/23 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>

04/11/23 Tinosch Ganjineh 13

Basic Shapes (2) Kreis

<circle cx="600" cy="200" r="100"fill="red" stroke="blue" stroke-width="10" />

04/11/23 Tinosch Ganjineh 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" />

04/11/23 Tinosch Ganjineh 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>

04/11/23 Tinosch Ganjineh 16

Basic Shapes (5) Polyline

<polyline fill="none" stroke="blue" stroke-width="10" points="50,375150,375 150,325 250,325 250,375350,375 350,250 450,250 450,375550,375 550,175 650,175 650,375750,375 750,100 850,100 850,375950,375 950,25 1050,25 1050,3751150,375" />

04/11/23 Tinosch Ganjineh 17

Basic Shapes (6) Polygon

<polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215423,301 350,250 277,301 303,215231,161 321,161" />

<polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5850,325 742,262.6 742,137.5" />

04/11/23 Tinosch Ganjineh 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

04/11/23 Tinosch Ganjineh 19

Properties (Stroke)

stroke : Zeichnet einen Rahmen um ein grafisches oder textuelles Element

stroke-width : Rahmendicke stroke-linecap : Form des Rahmens

Tinosch Ganjineh 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 :

Quellgrafik Zielgrafik

Dazu sind sechs Filter (Schritte) notwendig …

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

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

04/11/23 Tinosch Ganjineh 29

Animation

04/11/23 Tinosch Ganjineh 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>

04/11/23 Tinosch Ganjineh 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" />

04/11/23 Tinosch Ganjineh 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>

Tinosch Ganjineh 33

Danke !

Mehr Informationen http://www.w3.org/TR/SVG/