Version 1 SVG Scalable Vector Graphics B.Wenk, HTW Chur
SVG SVG - Scalable Vector Graphics
1 Einführung Bilder und Grafiken Mit der Digitalkamera aufgenommene oder mit einem Scanner aufgenommene Bilder bestehen aus vielen einzelnen Bildpunkten (pixels), die in Zeilen und Spalten angeordnet sind. Inhalt Bilder und Grafiken Vektorgrafiken Abbildung 1: Mit einem Scanner erfasste Fotografie (stark vergrössert) Die bei der Aufnahme erfassten Bildpunkte pro cm (bzw. pro inch = 2.54 cm) bestimmt die Qualität des Bildes bei der Wiedergabe. Wenn die Aufnahme beispielsweise mit 300 dpi (dots per inch, Bildpunkte pro inch) erfolgt, das Bild aber anschliessend auf einem Drucker mit 600 dpi ausgegeben wird, ist das Bild auf Papier nur noch halb so breit und halb so hoch 2
wie das Original. Falls es in gleicher Grösse auf Papier gedruckt werden soll, muss das dafür verwendete Programm die Anzahl der aufgenommenen Bildpunkte vervielfachen, was zu der in Abbildung 1 sichtbaren Verpixelung führt. Bei grafischen Darstellungen führt die übermässige Vergrösserung zu besonders störenden Effekten. Vektorgrafiken Vektorgrafiken (vector graphics) setzen sich aus geometrischen Elementen (gerade Linien, Kurven, Kreise, Rechtecke, und so weiter) zusammen. Die Elemente sind in Textform beschrieben (Art, Grösse, Position, und so weiter), vergleichbar mit der Beschreibung einer Webseite in der Hypertext Markup Language (HTML). Für die Beschreibung von Vektorgrafiken eignet sich die XML-basierte Sprache SVG (Scalable Vector Graphics). Die neusten Versionen aller Browser unterstützen heute SVG. SVG ist auch Bestandteil des Standards EPUB für E-Books, aber bei weitem nicht alle E-Book Reader und E-Book Reader-Programme unterstützen SVG. Weil eine Vektorgrafik nur eine Beschreibung darstellt, wird sie erst bei der Darstellung auf dem Bildschirm oder auf dem Drucker gezeichnet. Die Darstellung kann deshalb gut skaliert werden, ohne dass die Qualität der Darstellung leidet. Abbildung 2: Stark vergrösserte Grafik Grafische Darstellungen werden deshalb besser nicht als Pixelbilder publiziert, sondern als Vektorgrafiken. Abbildung 3: Vektorgrafik, unterschiedlich skaliert dargestellt 3
2 Scalable Vector Graphics Eine Beispielgrafik Die Konzepte von Scalable Vector Graphics sind vielleicht leichter verständlich, wenn wir sie anhand einer Beispielgrafik diskutieren: Inhalt Eine Beispielgrafik Struktur der Beschreibung einer Grafik Elemente einer Grafik Grafiken mit SVG-edit erstellen Interaktive Grafiken Beispiele von Seiten mit SVG im Web Abbildung 4: Eine SVG-Grafik, welche die Umrisse und die Lage einiger Städte von Österreich darstellt (Landkarte_Austria_Interaktiv.svg) Die Grafik ist interaktiv: Mit dem Anklicken der beiden Kreise mit den Texten Beschriftungen einblenden beziehungsweise Gewässer einblenden können die Namen der Städte beziehungsweise die Flüsse und Seen Österreichs angezeigt werden. Wie das funktioniert, ist im Abschnitt Interaktive Grafiken beschrieben. 4
Struktur der Beschreibung einer Grafik Ein SVG-Dokument beginnt mit dem Element <svg>. <svg viewbox="-2450 0 4750 2336" width="600" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> Elemente einer Grafik Grundelemente von SVG sind die gerade Linie (<line>), eine aus mindestens drei gleich langen Seiten bestehende geschlossene Figur (<polygon>), das Rechteck (<rect>), der Kreis (<circle>), die Ellipse (<ellipse>), eine aus beliebig vielen graden Linien zusammengesetzte Figur (<polyline>), eine beliebig geformte Linie (<path>) und Text (<text>).! </svg> Die Werte des Attributs viewbox (min x, min y, width, height) definieren die Koordinaten des sichtbaren Ausschnitts der Vektorgrafik. In unserem Beispiel umfasst dieses Fenster die Koordinaten von -2450 bis 2300 in x-richtung und von 0 bis 2336 in y-richtung. Bei der Darstellung von Vektorgrafiken müssen wir beachten, dass auf dem Bildschirm (und auch beim Drucken auf Papier) die x-achse von links nach rechts und die y-achse von oben nach unten orientiert sind! Aus der Geometrie sind wir aber gewohnt, mit einem kartesischen Koordinatensystem zu arbeiten, bei dem die y-achse von unten nach oben gerichtet ist. Die Attribute width und height definieren die Breite und Höhe der Zeichenfläche auf dem Bildschirm (oder Papier). In unserem Beispiel werden also die Koordinaten -2450 bis 2300 in x- Richtung auf 600 Bildpunkte und die Koordinaten 0 bis 2336 in y-richtung auf 400 Punkte auf dem Bildschirm abgebildet. Wenn das Attribut viewbox fehlt, definieren die Attribute width und height den sichtbaren Ausschnitt der Vektorgrafik ( 0 bis width in x-richtung, 0 bis height in y-richtung). Die Attribute xmlns und xml definieren den Namensraum für die Elemente des SVG- Dokuments. <rect x="10" y="10" width="100" height="60" stroke="blue" stroke-width="4" fill="yellow"/> <line x1="55" y1="35" x2="115" y2="120" stroke-width="4"/> <circle cx="160" cy="70" r="30" stroke="none" fill="red"/> <text x="30" y="90">text</text> <path d="m 80,97 C 78,94 72,86 68,84" stroke-width="2"/> Die Attribute x, y, x1, y1, x2, y2, cx, cy beschreiben die x- beziehungsweise die y- Koordinaten der betreffenden Elemente. Die Attribute stroke, stroke-width beschreiben die Farbe und die Dicke der Linien der betreffenden Elemente. Das Attribut fill beschreibt die Füllfarbe der betreffenden Elemente. Ein verständliches, nicht zu ausschweifendes Tutorial mit vielen interaktiven Beispielen und Übungen zum Thema SVG bietet die Website von w3schools.com an. 5
Ausschnitte aus der Beispielgrafik: <g id="staatsgrenze"> <path class="fil0 str0" d="m2196 757c-18,-18-50,-33-57,-56-7,- 19-15,-65-25,-77-22,-9-24,-16-24,-39-17,-24-53,-33-30,-65l0-50c14,-25 29,-48 47,-70 4,-39-15,-75-17,-114-4,-86-48,-25-94,, -31,51-18,8-29,19-49,27-38,-21-71,-29-114,-29-40,0-43,- 17-66,-43 38,-26 8,-33-14,-60-35,-6-44,-25-68,-48-63,-13-27,96-35,132"/> <path class="fil0 str0" d="m288 371c-8,26-3,44-34,50-17,81-55,4-98,-3-20,-4-26,-13-45,-19-29,34-40,8-35,57 3,28-16,37-17,2-33,-3-27,-7-39,21-58,-5 24,-60-5,-15-31,-5-35,13 7,39, 9,67 2,37-111,-2-137,4-32,6-54,3-79,28-25,3-53,-5-81,-2-30,3-58,-16-70,28-5,19 2,31-24,36-40,9-88,-20-94,37 34,25-15,13-29,17-37,10-26,44-68,40 5,-43-5,-30-44,-21"/> <path class="fil0 str0" d="m-724 1717c35,-12 49,-23 78,5-24,15-9,42-45,42-55,0 1,63-7,91 28,23 23,37 59,26 42,42 7,50 21,90 55,12 30,11 48,52 12,26 110,66 134,64 33,-1 57,-9 82,19 41,-31 52,26, 51,19 83,10 42,-11 94,-30 120,18 28,0 36,-3 54,-26-12,-53 45,- 14 59,-54 30,0 50,15 80,-4 5,-3 10,-8 15,-10 34,-15 101,22 122,42 25,23 22,-24 9,-39-36,-38-21,-44-26,-92"/> <path class="fil0 str0" d="m1604 1922l5-17"/> Das Attribut id dient dazu, einem Element einen eindeutigen Namen zuzuordnen. Dieser Name kann in anderen Elementen referenziert werden (zum Beispiel für Interaktionen). <g > <circle class="fil2 str7" cx="-160" cy="1078" r="39"/> <circle class="fil3 str7" cx="-160" cy="1078" r="28"/> <g > <circle class="fil2 str7" cx="1868" cy="1033" r="39"/> <circle class="fil3 str7" cx="1868" cy="1033" r="28"/> Das Element <g> erlaubt die Gruppierung der eingeschlossenen Elemente. Über das Attribut id kann die ganze Gruppe referenziert werden. <g id="beschriftung" visibility="hidden"> <text x="-2222" y="1204" class="fil2 fnt1">bregenz</text> <text x="-1419" y="1702" class="fil2 fnt1">innsbruck</text> <text x="-143" y="1027" class="fil2 fnt1">salzburg</text> <text x="484" y="574" class="fil2 fnt1">linz</text> <text x="361" y="2028" class="fil2 fnt1">klagenfurt</text> <text x="1301" y="1680" class="fil2 fnt1">graz</text> <text x="1020" y="600" class="fil2 fnt1">st. Pölten</text> <text x="1716" y="562" class="fil2 fnt0">wien</text> <text x="1680" y="975" class="fil2 fnt1">eisenstadt</text> Der Wert des Attributs visibility definiert die Sichtbarkeit eines Elements oder einer Gruppe von Elementen. Das Attribut kann die Werte hidden (nicht sichtbar) und visible (sichtbar) annehmen. Das Attribut class erlaubt die Zuweisung von Cascading Style Sheet (CSS) Definitionen. <g id="signaturen"> <g > <circle class="fil2 str7" cx="-2110" cy="1315" r="45"/> <circle class="fil3 str7" cx="-2110" cy="1315" r="32"/> <g > <circle class="fil2 str7" cx="-1142" cy="1537" r="45"/> <circle class="fil3 str7" cx="-1142" cy="1537" r="32"/> Grafiken mit SVG-edit erstellen Die Beschreibung einer SVG-Grafik kann man mit einem einfachen Texteditor erstellen. Man muss dabei achtsam sein, um Tippfehler zu vermeiden. Und man muss die SVG-Elemente und deren zulässigen Attribute kennen. Einfacher und schneller können SVG-Grafiken mit WYSIWYG-Editoren erstellt werden. Ein häufig verwendetes, kostenloses Open Source Programm ist Inkscape. Scalable Vector Graphics können auch online mit ImageBot erstellt und bearbeitet werden. 6
Diese beiden Vektorgrafikeditoren erzeugen zwar standardkonforme SVG-Dokumente, aber die meisten der gezeichneten Figuren werden als Pfade (<path>) beschrieben. Dies erlaubt den Programmen, die Koordinaten einer Figur beizubehalten wenn sie verschoben, verkleinert, vergrössert oder gedreht wird. SVG unterstützt ein Attribut transform, mit dem jede beliebige Koordinatentransformation beschrieben werden kann. Für die Darstellung der Grafik ist dies kein Nachteil. Das darstellende Programm muss einfach die Transformation durchführen, um die korrekten Koordinaten der Figur zu erhalten. Wenn wir aber eine solche Vektorgrafik von Hand verändern müssen (beispielsweise, um die Grafik mit interaktiven Elementen zu ergänzen), ist diese Darstellungsart für uns ungünstig. Einfacher wäre es, wenn im SVG-Dokument die Grundelemente <line>, <rect>, <circle>, und so weiter vorkämen und die absoluten Koordinaten angegeben wären. Interaktive Grafiken Scalable Vector Graphics können interaktive und animierte Elemente enthalten. Sowohl Interaktionen als auch Animationen werden im SVG-Dokument deklarativ beschrieben. Es ist keine Programmierung nötig. Bei Bedarf können die Elemente und deren Attribute aber auch mit JavaScript angesprochen werden. Für Interaktionen und Animationen eignen sich die Elemente <set>, <animate>, <animate- Transform> und <animatecolor>. Interaktionen und Animationen sind ereignisgesteuert. Ein freier online SVG-Editor, der einfache, überschaubare SVG-Dokumente erstellt, ist svgedit. Abbildung 6: Die Städtenamen werden eingeblendet, wenn mit der Maus auf den Kreis mit dem Text Beschriftungen einblenden gezeigt und die Maustaste gedrückt wird. Abbildung 5: Zeichnen mit svg-edit 7
Ausschnitte aus der Beispielgrafik: <circle id="beschriftungen_ein" cx="-1600" cy="110" r="40" stroke="black" stroke-width="6" fill="white"> <set attributename="fill" from="white" to="blue" begin="mousedown" end="mouseup"/> </circle> <text x="-1500" y="140" >Beschriftungen einblenden</text> Der kleine Kreis wird zunächst mit der Füllfarbe Weiss dargestellt. Wenn mit der Maus auf den Kreis gezeigt und die Maustaste gedrückt wird, wird der Wert des Attributs fill auf blue geändert: Die Füllfarbe des Kreises wechselt von Weiss nach Blau. Die Füllfarbe wechselt zurück auf Weiss, wenn die Maustaste losgelassen wird. Abbildung 7: Flüsse und Seen werden eingeblendet, wenn mit der Maus auf den Kreis mit dem Text Gewässer einblenden gezeigt und die Maustaste gedrückt wird. Ereignisse sind beispielsweise das Drücken (mousedown) und das Loslassen der Maustaste (mouseup), das Bewegen des Zeigers über ein Element (mouseover, mouseout) und das Klicken auf ein Element (click). <g id="beschriftung" visibility="hidden"> <text x="-2222" y="1204">bregenz</text> <text x="1716" y="562">wien</text> <text x="1680" y="975">eisenstadt</text> <set attributename="visibility" from="hidden" to="visible" begin="beschriftungen_ein.mousedown" end="beschriftungen_ein.mouseup"/> Gleichzeitig mit dem Wechseln der Füllfarbe des Kreises von Weiss nach Blau werden die Städtenamen eingeblendet. Das Ereignis mousedown muss in der Gruppe der Textelemente mit den Städtenamen mit dem Namen des Elementes qualifiziert werden, dem das Ereignis zugeordnet ist (in diesem Fall beschriftungen_ein ). Animationen können auch zeitgesteuert ablaufen, beispielsweise 2 Sekunden nach dem Aufrufen der Webseite oder 3 Sekunden nach dem Beenden einer anderen Animation. Die verschiedenen Browser (und E-Book-Reader) unterstützen Animationen unterschiedlich gut. Eine Zusammenstellung der SVG-Unterstützung durch die verschiedenen Browser zeigt die Webseite http://caniuse.com/#cats=svg. 8
Beispiele von Seiten mit SVG im Web US Population Map ( http://www.carto.net/papers/svg/us_population/index.html) Open Clipart Library ( http://openclipart.org) SVG Art Gallery ( http://www2.plurib.us/svg_gallery/) SVG Samples ( http://croczilla.com/bits_and_pieces/svg/samples) 9
Wikimedia Commons ( http://commons.wikimedia.org/wiki/category:created_with_inkscape) SVG - Learning by coding( http://svglbc.datenverdrahten.de/) 10