Wikipedia

Scalable Vector Graphics

Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken
Dies ist eine alte Version dieser Seite, zuletzt bearbeitet am 22. Januar 2004 um 16:40 Uhr durch Stefan Kühn (Diskussion | Beiträge). Sie kann sich erheblich von der aktuellen Version unterscheiden.

Scalable Vector Graphics (SVG) ist eine Sprache zur Beschreibung zweidimensionaler Vektorgrafiken in XML. Drüberhinaus unterstützt SVG Animationen mittels SMIL oder der Manipulation des SVG-DOM mit Hilfe eingebetteter Funktionen (Beispielsweise via ECMA-Script oder TCL).

SVG wurde im September 2001 eine W3C-Empfehlung. Man kann also erwarten, dass die nächste Generation der Webbrowser es von sich aus unterstützen. Zur Zeit ist dazu ein Plugin notwendig, wie z.B. der SVG Viewer von Adobe. SVG-Dateien können auch in externen Editoren und Viewern betrachtet werden.

Eine Variante von Mozilla unterstützt eine Teilmenge von SVG ohne dass ein Plugin nötig ist (http://www.mozilla.org/projects/svg/ ).

Eine SVG-Datei besitzt die Endung *.svg oder in gepackter Form *.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 abschliessende Endtag </svg> abgeschlossen. 

<?xml version="1.0" encoding="iso-8859-1" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="300" height="300">
   .... Inhalt der SVG-Datei
</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. 

<path d="M 100 100 L 200 200" />

Der Pfad wird im Attribut (d) durch meist Koordinatenpaare beschrieben. Die Buchstaben vor den Koordinaten geben die Anweisung wie der Pfad dorthingezeichnet werden soll.

  • M - moveto = Stift dorthin bewegen
  • L - linto = mit Stift dorthin zeichnen
  • H - horizontal line = horizontale Linie zeichnen
  • V - vertical line = vertikale Linie zeichnen
  • Q - quadratische Bézierkurve
  • C - kubische Bézierkurve
  • 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 kann wird durch die zwei Halbachsenradien definiert (rx und ry). Alle anderen Attribute sind die selben wie beim Kreis. 

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

Rechteck

Ein Rechteck kann auf zwei Arten definiert werden. Zum einen indem man die obere linke Ecke durch die Koordinaten (x1 und y1) und ebenso die untere rechte Ecke durch die Koordinanten (x2 und y2) definiert. Die andere 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 x1="100" y1="100" x2="200" y2="200" />
<rect x="100" y="100" width="100" height="200" />

Möchte man die Ecken des Rechteckes 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 benutz 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. 

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

Text

Zeichen, Text können durch mit Hilfe des Befehles <Text> definiert werden. 

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


SVG-Viewer


SVG-Editoren

Freie Software

  • Sodipodi (www.sodipodi.com), Linux und Windows, unterstützt noch keine Animationen (englisch)

Kommerzielle Software

Programme die SVG unterstützen

Das Vektorprogramm Freehand unterstützt SVG nicht, da es von der Firma Macromedia kommt, die Flash vorzieht.

Konferenzen

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

Literatur

  • Marcel Salathé, SVG Scalable Vector Graphics, ...für professionelle Einsteiger, Verlag Markt+Technik, ISBN 3827261880


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