Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) Ausarbeitung zum Proseminar XML / World Wide Web bei Dr. Stefan Lüttringhaus-Kappel von Mark Schmatz WS 2000 / 2001

Inhaltsverzeichnis 1 Einführung 1.1 Derzeitiger Status 1.2 Was ist SVG? 1.3 SVG MIME Typ und Dateinamenendung 1.4 Kompatibilität mit anderen Standards 2 Definitionen und Begriffe 2.1 basic shape 2.2 canvas 2.3 container element 2.4 font 2.5 glyph 2.6 fill 2.7 transformation 2.8 transformation matrix 2.9 current transformation matrix (CTM) 2.10 viewport 3 Konzepte 3.1 Was heisst SVG genau? 3.1.1 Scalable 3.1.2 Vector 3.1.3 Graphics 3.2 Grafische Objekte 3.3 Symbole 3.4 Elementare Datentypen 4 Dokumentstruktur 4.1 SVG document fragment - Das <svg> Tag 4.2 Das <g> Tag 4.3 Die <desc> -und <title> Tags 4.4 Das <id> Tag 4.5 Das <defs> Tag 4.6 Das <use> Tag 4.7 Das <image> Tag 4.8 Das <text> Tag 4.9 Das <text> Tag kombiniert mit dem <tspan> Tag 4.10 Das <text> Tag kombiniert mit dem <tspan> Tag 4.11 Das <text> Tag kombiniert mit dem <tref> Tag 5 Die Styling Properties 2

6 Koordinatensysteme 6.1 SVG Canvas 6.2 SVG Viewport 6.3 Translation 6.4 Rotation 6.5 Alle Transformationen auf einen Blick 7 Pfade 7.1 Einführung 7.2 Das d Attribut 7.3 Syntax 7.4 Kommandos 7.5 Beispiel Koordinatentuppel 7.6 Text auf einem Pfad 8 Patterns 3

1 Einführung 1.1 Derzeitiger Status Die SVG Spezifikation 1.0 besagt, dass SVG momentan eine sogenannte Candidate Recommendation ist. Das bedeutet, dass die SVG Working Group es als stabil ansieht. 1.2 Was ist SVG? SVG ist eine Sprache, die es ermöglicht 2D-Grafiken und gemischte Vektor/Raster Grafiken in XML zu beschreiben. Es existieren drei grundlegende Typen von Grafikobjekten: Vector Graphic Shapes (z.b. gerade Linien und Kurven) Images Text Diese Objekte können beliebig gruppiert, verändert, transformiert und in andere Objekte eingebunden werden. SVG Grafiken können dynamisch oder interaktiv sein. Mit dem Document Object Model (DOM) kann man effiziente Vektorgrafik-Animationen erstellen. Ein grosser Satz von verfügbaren Eventhandlern, wie z.b. onmouseover und onclick, kann mit jedem SVG-Grafikobjekt kombiniert werden. 1.3 SVG MIME Typ und Dateinamenendung Der MIME Typ für SVG ist: image/svg-xml. Der W3C wird diesen MIME Typ registrieren lassen. SVG Dateien sollten mit.svg_ enden (alles klein geschrieben, ein Leerzeichen am Ende!). 1.4 Kompatibilität mit anderen Standards SVG ist kompatibel zu anderen W3C Standards und enthält viele bekannte Features. Beispiele SVG ist eine Anwendung von XML SVG ist kompatibel zu den Namespaces in XML SVG benutzt die XML Linking Language (XLink) zur URL-Referenzierung SVG Inhalte können entweder mit CSS Level 2 oder mit XSL Version 1 bearbeitet werden SVG ist kompatibel zu den Internationalisierungsbestrebungen des W3C (Bsp. Unicode) u.v.m. Damit ist SVG ein mächtiges Werkzeug und gleichzeitig sehr leicht zu bedienen. 4

2 Definitionen und Begriffe 2.1 basic shape Basic Shapes sind Standard-Grafikobjekte, wie rect, circle, ellipse, line, polyline, polygon 2.2 canvas Canvas ist eine Oberfläche, auf der grafische Objekte plaziert werden können. Das kann eine real existierende physikalische Oberfläche sein, wie z.b. ein Display oder ein Blatt Papier; das kann aber auch eine abstrakte Oberfläche sein, wie z.b. ein bestimmter Speicherbereich im RAM 2.3 container element Ein Container Element enthält Grafikelemente und/oder andere container elements 2.4 font Ein Font ist eine organisierte Kollektion von glyphs. Die einzelnen glyphs innerhalb der Kollektion haben ein gemeinsames Thema in Puncto Aussehen 2.5 glyph Ein glyph ist eine einzelne Einheit innerhalb eines fonts (z.b. ein Buchstabe). Es kommt aber auch vor, dass ein (darzustellendes) Zeichen aus mehreren glyphs besteht (z.b. é, â, etc.) 2.6 fill Der Befehl fill füllt das Innere eines shapes oder eines glyphs (in einem Textstring) aus 2.7 transformation Eine transformation ist eine Modifikation der current transformation matrix (CTM) indem eine evtl. aufwendige Transformation eines Grafikobjektes durch eine Menge von simplen Transformationen (z.b. Skalierung, Rotation, Translation) und/oder durch eine oder mehrere transformation matrices erreicht wird 2.8 transformation matrix Transformationsmatrizen definieren eine Abbildung von einem Koordinatensystem in ein anderes indem eine 3x3-Matrix verwendet wird 5

2.9 current transformation matrix (CTM) wie transformation matrix, nur dass die Abbildung vom user coordinate system in das viewport coordinate system geht 2.10 viewport Ein Viewport ist eine rechteckige Region innerhalb des aktuellen canvas, auf dem die Grafikelemente gerendert werden 6

3 Konzepte 3.1 Was heisst SVG genau? 3.1.1 Scalable Skalierbar bedeutet, dass man gleichmässig vergrössern und verkleinern kann. Bezogen auf Grafik heisst das, dass man nicht auf eine einzige, feste Pixelgrösse beschränkt ist (Raster- Only). Im Internet bedeutet skalierbar, dass alles erweitert und angepasst werden kann: die Anzahl der Dateien und der User, die Anwendungen, und, und, und... 3.1.2 Vector SVG ist eine Grafikanwendung für das Internet und ist deshalb skalierbar sowohl im Sinne der Grafikterminologie, als auch im Sinne des Internets. Vektorgrafiken enthalten geometrische Objekte, wie Linien und Kurven. Das bedeutet grössere Flexibilität gegenüber dem sogenannten Raster-Only-Formats, wie JPEG oder GIF, das Informationen zu jedem einzelnen Pixel abspeichern muss. 3.1.2 Graphics Die meisten XML Sprachen repräsentieren textbasierte Informationen. Sie bieten nur primitive grafische Möglichkeiten, wie z.b. das <img> Tag von HTML. SVG hingegen hält eine grosse Menge von Beschreibungsmöglichkeiten bereit, mit denen man Vektorgrafiken bzw. gemischte Vektor-/Rastergrafiken erstellen kann. 3.2 Grafische Objekte Bei jeder XML Sprache wurde überlegt, was genau eigentlich modelliert werden soll. Bei textbasierten Formaten findet Modellierung typischerweise auf der Ebene von Seiten, Absätzen, Sätzen, etc. statt und nicht bei jedem einzelnen Wort. Bei SVG ist das nicht anders: hier findet Modellierung auf der Ebene von Grafischen Objekten statt und nicht bei jedem einzelnen Punkt bzw. Pixel. Logisch Zusammengehöriges wird zusammengefasst. 7

3.3 Symbole Man könnte einige Standardsymbole definieren, die SVG unterstützt. Welche sollten das sein? Es gibt immer Bereiche, in denen man weitere Symbole brauchen könnte: Elektronik Chemie Musik etc. Anstatt immer auf die nächste Version zu warten, ist es dem User möglich eigene Symbole zu kreieren, die er frei zur Verfügung stellen kann. 3.4 Elementare Datentypen <angle> Winkel (deg, rad, grad) <color> Farbe (Bsp.: lightpink = rgb(255, 182, 193)) <coordinate> Koordinaten <integer> Ganze Zahlen: von -2147483648 bis 2147483647 <number> <length> <uri> Gleitpunktzahlen: von -3,4e+38 bis 3,4e+38 siehe <number> Webadresse u.v.m. 8

4 Dokumentstruktur 4.1 SVG document fragment - Das <svg> Tag Ein SVG document fragment besteht aus sämtlichen SVG Elementen innerhalb eines <svg> Tags. Ein SVG document fragment kann: leer sein (also kein Inhalt innerhalb des <svg> Tags) ein einzelnes Grafikelement enthalten (z.b. rect) eine komplexe, tief verschachtelte Kollektion von Container- und Grafikelementen sein Ein SVG document fragment kann entweder: Beispiel für sich alleine stehen (z.b. als eigenständige Datei) => heisst dann SVG document oder in ein XML Document eingebettet sein <svg width= 5cm height= 4cm > <desc>four separate rectangles</desc> <rect x= 0.5cm y= 0.5cm width= 2cm height= 1cm /> <rect x= 0.5cm y= 2cm width= 1cm height= 1.5cm /> <rect x= 3cm y= 0.5cm width= 1.5cm height= 2cm /> <rect x= 0.5cm y= 0.5cm width= 1cm height= 0.5cm /> 4.2 Das <g> Tag Das <g> Tag dient der Gruppierung von Grafikelementen, wenn z.b. mehrere Grafikelemente die gleichen Attribute verwenden. Beispiel 1 <svg width= 5cm height= 5cm > <desc>two Groups, each of two rectangles</desc> <g style= fill:red > <rect x= 1cm y= 1cm width= 1cm height= 1cm /> <rect x= 3cm y= 1cm width= 1cm height= 1cm /> 9

(Fortsetzung) <g style= fill:blue > <rect x= 1cm y= 3cm width= 1cm height= 1cm /> <rect x= 3cm y= 3cm width= 1cm height= 1cm /> Das <g> Tag kann verschachtelt werden. Beispiel 2 <svg width= 4in height= 3in > <desc>groups can nest</desc> <g> <g> <g> 4.3 Die <desc> -und <title> Tags Jedes Container- und Grafikelement kann mit einem <desc> und/oder <title> Tag versehen werden. Innerhalb dieser Tags steht ein String, der das Element beschreibt. Diese Beschreibungen sind nur-text. Sie werden also nicht mit dem betreffenden Element gerendert. Die Darstellung der Beschreibungen kann variieren. Möglich ist z.b. eine Darstellung, die der Form der klassischen Tool-Tips nahe kommt. Beispiel 1 Eine Ellipse 10

Beispiel 2 Der Text innerhalb der <desc> -und <title> Tags wird nicht gerendert. Der Rest, der innerhalb des <g> Tags steht, wird aber gerendert. <svg width= 4in height= 3in > <g> <title> Company sales by region </title> <desc> Company sales by region </desc> <!-- Bar chart defined as vector data --> 4.4 Das <id> Tag Das <id> Tag ist für alle SVG Elemente verfügbar. Es weist einem Element einen eindeutigen Namen zu. Beispiel <svg width= 4in height= 3in > <rect id= MyRect x=0 y=0 width= 6cm height= 1cm /> 4.5 Das <defs> Tag Das <defs> Tag ist - ähnlich, wie das <g> Tag - ein Container für weitere Elemente. Der Aufbau ist der gleiche, wie beim <g> Tag. Unterschied: die in einem <defs> Tag angegebenen Elemente werden (noch) nicht angezeigt. Beispiel 11

(Fortsetzung) <svg width= 10cm height= 3cm > <defs> <rect id= MyRect width= 6cm height= 1cm /> </defs> 4.6 Das <use> Tag Jedes Grafik- und Containerelement (und noch einige andere) ist ein sogenanntes Template Object, das im SVG Document wiederverwendet werden kann. Realisiert wird das mittels dem <use> Tag. Es referenziert auf ein anderes Element und fügt den grafischen Inhalt des betreffenden Elements an der angegebenen Stelle in das Dokument. Beispiel 1 <svg width= 10cm height= 3cm > <desc>simple case of use on a rect </desc> <defs> <rect id= MyRect width= 6cm height= 1cm /> </defs> <!-- Bla Bla --> <use x= 2cm y= 1cm xlink:href= #MyRect /> Beispiel 2 <svg width= 10cm height= 3cm > <desc>simple case of use on a rect </desc> <defs> <rect id= MyRect x=0 y=0 width= 6cm height= 1cm /> </defs> <!-- Bla Bla --> <use xlink:href= #MyRect transform= translate(2cm, 0.25cm); rotate(10) /> 12

(Fortsetzung) 4.7 Das <image> Tag Das <image> Tag wird benutzt, um den Inhalt einer ganzen Datei in das gegebene user coordinate system zu rendern. Das <image> Tag kann entweder auf Raster-Image-Dateien (z.b. PNG oder JPEG) referenzieren, oder auf Dateien, die dem MIME Typ image/svg-xml entsprechen. Wenn auf eine Raster-Image-Datei verwiesen wird, dann wird das entsprechende Bild genau in die durch die Attribute x, y, width und height spezifizierte Region gerendert. Wenn auf eine SVG Datei verwiesen wird, dann legt das <image> Tag ein neues Viewport für diese Datei an. Beispiel <svg width= 20cm height= 20cm > <desc>this graphic links to an external image</desc> <image x= 200 y= 200 width= 100px height= 100px xlink:href= myimage.jpg > <title>my Image</title> </image> 4.8 Das <text> Tag Die in einem <text> Tag stehenden Zeichen, werden gerendert. Beispiel 13

(Fortsetzung) <svg width= 10cm height= 3cm > <desc>a text sample</desc> <text x= 2cm y= 1cm style= font-size:20; font-family:times New Roman > This text will be rendert. </text> This text will be rendert. 4.9 Das <text> Tag kombiniert mit dem <tspan> Tag Mit <tspan> kann man einzelne Worte verschieden formatieren. Beispiel <svg width= 10cm height= 3cm > <g style= font-size:20; font-family:times New Roman > <text x= 2cm y= 1.5cm style= fill:blue > You are <tspan style= font-weight:bold; fill:red >not</tspan> a banana. </text> You are not a banana. 14

4.10 Das <text> Tag kombiniert mit dem <tspan> Tag Mit <tspan> kann man auch einzelne Glyphs individuell positionieren. Beispiel <svg width= 10cm height= 3cm > <g style= font-size:20; font-family:comic Sans MS > <text style= fill:rgb(20, 160, 200) > <tspan x= 3.0cm 3.5cm 4.0cm 4.5cm 5.0cm 5.5cm 6.0cm 6.5cm y= 1cm > Cute and </tspan> <tspan x= 3.75cm 4.25cm 4.75cm 5.25cm 5.75cm y= 2.00cm 2.00cm 2.50cm 2.50cm 2.00cm > fuzzy </tspan> </text> C u t e a n d f u z z y z z 4.11 Das <text> Tag kombiniert mit dem <tref> Tag Das <tref> Tag dient dem Einfügen von referenziertem Text. Beispiel <svg width= 10cm height= 3cm > <defs><text id= ReferencedText >Referenced character data</text></defs> <text x= 2cm y= 1cm style= fill:blue > Inline character data </text> <text x= 2cm y= 2cm style= fill:red > <tref xlink:href= #ReferencedText /> </text> 15

(Fortsetzung) Inline character data Referenced character data 16

5 Die Styling Properties Mit Styling Properties spezifiziert man, wie Beispiel grafische Objekte gemalt werden sollen (Füllung, Linienbreite, etc.) Text aussehen soll (Font, Fontgrösse, etc.) grafische Elemente gerendert werden sollen (Clipping Paths, Masken, Filtereffekte, etc.) u.v.m. <svg width= 4in height= 3in > <rect x= 2cm y= 1cm width= 6cm height= 1cm fill= red stroke= blue /> 6 Koordinatensysteme 6.1 SVG Canvas beschreibt (abstrakt), wo SVG Elemente hin- gerendert werden sollen erstreckt sich unendlich in alle Dimensionen 6.2 SVG Viewport Bezugssystem eine endliche rechteckige Region hierhin werden alle SVG Elemente (tatsächlich) gerendert 17

(Fortsetzung) Canvas Viewport 6.3 Translation Beispiel <svg width= 20cm height= 10cm > <!-- Original Coordsystem --> <g style= fill:none; stroke:black; stroke-width:3 > <line x1= 0cm y1= 0cm x2= 10cm y2= 0cm /> <line x1= 0cm y1= 0cm x2= 0cm y2= 5cm /> <!-- New Coordsystem --> <g transform= translate( 3cm, 2cm ) > <g style= fill:none; stroke:red; stroke-width:3 > <line x1= 0cm y1= 0cm x2= 10cm y2= 0cm /> <line x1= 0cm y1= 0cm x2= 0cm y2= 5cm /> 18

6.4 Rotation Beispiel <svg width= 20cm height= 10cm > <!-- Original Coordsystem --> <g style= fill:none; stroke:black; stroke-width:3 > <line x1= 0cm y1= 0cm x2= 10cm y2= 0cm /> <line x1= 0cm y1= 0cm x2= 0cm y2= 5cm /> <!-- New Coordsystem --> <g transform= translate( 3cm, 2cm ) > <g transform= rotate(30) > <g style= fill:none; stroke:red; stroke-width:3 > <line x1= 0cm y1= 0cm x2= 10cm y2= 0cm /> <line x1= 0cm y1= 0cm x2= 0cm y2= 5cm /> 6.5 Alle Transformationen auf einen Blick Verschieben Rotieren Skalieren Neigen (X-Richtung) Neigen (Y-Richtung) translate(dx, dy) rotate(degree) skale(skalefactor) skewx(degree) skewy(degree) Alle Transformationen können als 3x3 Transformations-Matrix repräsentiert werden (siehe LA I+II). A d g b e h c f i 19

7 Pfade 7.1 Einführung Pfade beschreiben das Aussehen eines Grafikobjektes. Eine Grafik, die durch einen Pfad erstellt wurde, besitzt die gleichen Eigenschaften, wie Standard - Grafikobjekte (z.b. rect) auch. Ein Pfad wird definiert, indem man das <path> Tag einfügt. Analogie: Turtle-Grafik 7.2 Das d Attribut Innerhalb des <path> Tags steht das sogenannte d (= Path data ) Attribut. Das d Attribut enthält Anweisungen für: moveto lineto curveto arc closepath setzt einen neuen Anfangspunkt zeichnet eine gerade Linie zeichnet eine Kurve (verwendet cubic Bézier) zeichnet einen elliptischen oder kreisförmigen Bogen schliesst die aktuelle Form, indem eine Linie zum letzten moveto- Punkt gezeichnet wird 7.3 Syntax Es gibt weitere Kommandos M/m... Grossbuchstabe = abs. Koordinaten Kleinbuchstabe = rel. Koordinaten d= L/l Z/z Coord = Closepath (zurück zum Ursprung) 20

Beispiel 1 d= M 100 100 L 300 100 L 200 300 z moveto(100, 100) lineto(200, 300) lineto(300, 100) lineto(100, 100) Beispiel 2 <svg width= 4cm height= 4cm > <path d= M 100 100 L 300 100 L 200 300 z style= fill:red; stroke:blue; stroke-width:3 /> 21

7.4 Kommandos Koordinatentuppel sind möglich Kommando Name Parameter Beschreibung M (abs.) Beginnt einen neuen Pfad an der moveto (x y)+ angegebenen Position. Wenn m das erste m (rel.) Kommando ist, dann wird es als M Z / z closepath - Schliesst interpretiert. den aktuellen Pfad, indem eine gerade Linie von der aktuellen Position zum Startpunkt gezeichnet wird. L (abs.) Zeichnet eine Line vom aktuellen Punkt zur lineto (x y)+ l (rel.) angegebenen (x, y)-koordinate. H (abs.) h (rel.) V (abs.) v (rel.) C (abs.) c (rel.) S (abs.) s (rel.) Q (abs.) q (rel.) T (abs.) t (rel.) A (abs.) a (rel.) horizontal lineto vertical lineto curveto shorthand / smooth curveto quadratic Bézier curveto shorthand / smooth quadratic Bézier x+ y+ (x1 y1 x2 y2 x y)+ (x2 y2 x y)+ Zeichnet eine horizontale Line vom aktuellen Punkt zur angegebenen x-koordinate. Zeichnet eine vertikale Line vom aktuellen Punkt zur angegebenen y-koordinate. Zeichnet eine Bézier-Kurve vom aktuellen Punkt (x y). (x1 y1) ist der Kontrollpunkt zu Beginn der Kurve. andere Bézierkurve... (x1 y1 x y)+ andere Bézierkurve... (x y)+ andere Bézierkurve... elliptical arc (rx ry x-axis-rotation laf sf x y)+ Zeichnet eine Ellipse... 7.5 Beispiel Koordinatentuppel <svg width= 4cm height= 4cm > <path d= M 100 100 L 300 100 200 300 100 100 style= fill:red; stroke:blue; stroke-width:3 /> 22

7.6 Text auf einem Pfad Mit dem <path> Tag kann man Text frei positionieren. <svg width= 10cm height= 3cm viewbox= 0 0 1000 300 > <defs> <path id= MyPath d= M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100 /> </defs> <use xlink:href= #MyPath style= fill:none; stroke:red /> <text style= font-family:verdana; font-size:42.3333; fill:blue > <textpath xlink:href= #MyPath > We go up, then we go down, then up again </textpath> </text> 8 Patterns Mit dem <pattern> Tag kann man die Füllung für ein Grafikobjekt selbst definieren. <svg width= 8cm height= 4cm > <defs> <pattern id= TrianglePattern x= 0 y= 0 width= 1cm height= 1cm viewbox= 0 0 10 10 > <path d= M 0 0 L 7 0 L 3.5 7 z style= fill:red; stroke:blue /> </pattern> </defs> <!-- Ellipse is filled using a triangle pattern paint server --> <ellipse style= fill:url(#trianglepattern); stroke:black cx= 4cm cy= 2cm rx= 3.5cm ry= 1.5cm /> 23

24