tinosch ganjineh, christian v. prollius 1 scalable vector graphics svg
TRANSCRIPT
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/