Wikipedia

Scalable Vector Graphics

Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken
Dies ist eine alte Version dieser Seite, zuletzt bearbeitet am 18. März 2005 um 09:34 Uhr durch Elvis untot (Diskussion | Beiträge) (→Konferenzen: diesjaehrige SVG Open). Sie kann sich erheblich von der aktuellen Version unterscheiden.

Scalable Vector Graphics (SVG) ist eine Sprache zur Beschreibung zweidimensionaler Vektorgrafiken in XML. SVG unterstützt mittels SMIL Animationen. Manipulation des SVG-DOM sind mit Hilfe eingebetteter Funktionen (Beispielsweise via ECMAScript (JavaScript) oder Tcl) möglich.

SVG wurde im September 2001 zur W3C-Empfehlung erhoben. Man kann erwarten, dass es von der nächsten Generation der Webbrowser nativ unterstützt wird. Zur Zeit ist dazu ein Plugin notwendig, wie z.B. der SVG Viewer von Adobe. SVG-Dateien können auch mittels eines eigenständigen SVG-Anzeigeprogrammes betrachtet werden. SVG-Dateien können mit einem normalen Texteditor erstellt und bearbeitet werden.

Es gibt eine Variante von Mozilla die eine Teilmenge von SVG direkt unterstützt, sodass kein Plugin benötigt wird ([1]).

Die freien Vektorgrafik-Programme Sodipodi und Inkscape verwenden SVG als ihr natives Datenformat.

Eine SVG-Datei besitzt die Dateiendung *.svg. Wenn diese mit gzip gepackt ist, lautet die Endung *.svgz.

SVG Grundstrukturen

Grundgerüst

Jede SVG-Datei beginnt, wie es bei XML-basierten Sprachen üblich ist, mit der XML-Deklaration und der Dokumenttypdeklaration, die den benutzten Namensraum beschreibt. Dazu wird bei letzterem ein Verweis auf die entsprechende DTD-Datei eingefügt. Danach kann schon das Starttag <svg> kommen. Die SVG-Datei wird durch das abschließende Endtag </svg> abgeschlossen. 

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="300">	 


</svg>

Beim SVG-Starttag (<svg>) wird auch gleich die Breite und Höhe des Ausgabebildschirms definiert.

Graphische Primitiven

Alle graphischen Objekte in SVG bauen auf einfachen graphischen Grundelement auf. Komplexere Objekte sind dabei aus mehreren einfachen Objekten zusammengesetzt.

Pfad

Der Pfad ist das eigentliche Grundelement in SVG. Aus ihm können alle anderen Objekte (Kreise, Rechtecke, Polygone etc.) aufgebaut werden. Da das aber teilweise sehr umständlich ist, hat man diese häufigen Formen extra mit eigenen Beschreibungen versehen, die im Anschluss aufgeführt werden.

Der Pfad wird im Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren geben die Anweisung wie der Pfad gezeichnet werden soll.

  • M/m - moveto = Stift dorthin bewegen
  • L/l - lineto = mit Stift dorthin zeichnen
  • Q/q - quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)
  • C/c - kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)


Beispiel: Der absolut beschriebene Pfad... 

<path d="M 10 10 L 20 20 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />

ist identisch mit dem relativen 

<path d="M 10 10 l 10 10 -2  2 c  6  6 -4  3 -8 18 q 10  5  5.33 20" />

Für horizontale und vertikale Linien existiert eine entsprechend vereinfachte Notation, für Ellipsen und Kreise ist eine spezielle Notation mit sieben Werten erforderlich.

  • H/h - horizontal line = horizontale Linie zeichnen (X-Wert)
  • V/v - vertical line = vertikale Linie zeichnen (Y-Wert)
  • A - elliptical arc = Bogenkurve

Kreis

Der Kreis wird mindestens durch den Radius (r) definiert. Optional kann die Position des Mittelpunktes durch die Atribute cx und cy festgelegt werden. Füllung, Art der Umrisslinie oder Transparenz werden durch das Attribut style definiert. 

<circle cx="100" cy="100" r="50" />

Ellipse

Die Ellipse wird durch die zwei Halbachsenradien definiert (rx und ry). Alle anderen Attribute sind die gleichen wie beim Kreis. 

<ellipse cx="100" cy="100" rx="50" ry="20" />

Rechteck

Ein Rechteck kann auf nur eine konforme Art definiert werden. Diese Möglichkeit ist die Beschreibung durch die obere linke Ecke mit den Koordinaten (x und y) und die Breite (width) und Höhe (height). 

<rect x="100" y="100" width="100" height="200" />

Möchte man die Ecken des Rechtecks abrunden, kann man das mit Hilfe der Attribute (rx und ry) bewerkstelligen.

Linie

Eine einfache gerade Linie wird durch die beiden Endpunkte in SVG beschrieben. 

<line x1="100" y1="100" x2="200" y2="200" />

Polyline

Um eine Linie über mehrere Stützpunkte zu definieren, benutzt man die Beschreibung als Polylinie. Dabei werden die einzelnen Koordinatenpaare der Stützpunkte einfach fortlaufend hintereinander geschrieben. Die Linie wird von ersten Punkt aus zum zweiten gezogen und von dort weiter zum dritten Stützpunkt und so weiter. 

<polyline points="100 100 200 200 300 40" />

Polygon

Ein Polygon (Vieleck) wird durch seine Eckpunkte beschrieben. Wie bei der Polyline werden auch hier alle Koordinatenpaare einfach hintereinander geschrieben. 

<polygon points="100 100 100 200 150 200" />

Text

Zeichen, Text können mit Hilfe des Elements <text> definiert werden. 

<text x="100" y="100" style="font-size:40">Hallo Welt!</text>

SVG-Viewer


SVG-Editoren

Freie Software

Konvertierung SVG -> Bitmap

Proprietäre Software

Programme, die SVG unterstützen

Das Vektorprogramm Freehand unterstützt SVG nicht, vermutlich weil es von der Firma Macromedia kommt, das Flash (ein Macromedia-Produkt) vorzieht.

Konferenzen

SVG Open organisierte schon dreimal eine internationale Konferenz, die sich mit allem rund um das Thema SVG beschäftigte.

Nächste SVG Open ist vom 15.-18. August 2005 in Enschede in den Niederlanden.

Varianten

  • Eine Variante von SVG ist das NEVA-Dateiformat (.nva), welches vor Allem bei Sharp-Handys eingesetzt wird. Dieses Format ist noch platzsparender als SVG und unterstützt Animationen.

Literatur

Siehe auch

Abgerufen von „https://de.wikipedia.org/w/index.php?title=Scalable_Vector_Graphics&oldid=4966803“