Studium, Ausbildung und Beruf

web uni-protokolle.de
 powered by
NachrichtenLexikonProtokolleBücherForenSonntag, 20. Oktober 2019 

Scalable Vector Graphics


Dieser Artikel von Wikipedia ist u.U. veraltet. Die neue Version gibt es hier.
Scalable Vector Graphics ( SVG ) ist eine Sprache zur Beschreibung zweidimensionaler Vektorgrafiken in XML . SVG untersützt mittels SMIL Animationen . Manipulation des SVG- DOM sind mit Hilfe eingebetteter Funktionen (Beispielsweise ECMAScript oder Tcl ) möglich.

SVG wurde im September 2001 zur W3C -Empfehlung erhoben. Man kann erwarten dass es der nächsten Generation der Webbrowser nativ unterstützt wird. Zur Zeit ist ein Plugin notwendig wie z.B. der SVG Viewer Adobe . SVG-Dateien können auch mittels einem eigenständigen SVG-Viewer betrachtet werden. Man kann SVG-Dateien bereits einem einfachen Texteditor erstellen und verändern.

Es gibt eine Variante von Mozilla die eine Teilmenge von SVG direkt unterstützt also ohne man dazu ein Plugin benötigt ( [1] ).

Das Photoshop -ähnliche OpenSource Vektorgrafik-Programm Sodipodi ( [2] ) verwendet ebenfalls SVG als natives Datenformat.

Eine SVG-Datei besitzt die Dateiendung *.svg. Ist diese nochmals gepackt z.B. Gzip so lautet die Endung *.svgz.

Inhaltsverzeichnis

SVG Grundstrukturen

Grundgerüst

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

 <?xml version="1.0" encoding="iso-8859-1" standalone="yes"?> <!DOCTYPE svg "-//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>  

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

Graphische Primitiven

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

Pfad

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

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

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

Beispiel: Der absolut beschriebene Pfad...

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

ist identisch mit dem relativen

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

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

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

Kreis

Der Kreis wird mindestens durch den Radius (r) definiert. Optional kann die Position Mittelpunktes durch die Atribute cx und cy 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 und ry). Alle anderen Attribute sind die wie beim Kreis.

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

Rechteck

Ein Rechteck kann auf zwei Arten definiert werden. einen indem man die obere linke Ecke die Koordinaten (x1 und y1) und ebenso die rechte Ecke durch die Koordinanten (x2 und definiert. Die andere Möglichkeit ist die Beschreibung die obere linke Ecke mit den Koordinaten und y) und die Breite (width) und (height).

 <rect x1="100" y1="100" x2="200" y2="200" /> x="100" y="100" width="100" height="200" />  

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

Linie

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

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

Polyline

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

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

Polygon

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

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

Text

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

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

SVG-Viewer

SVG-Editoren

Freie Software

  • Sodipodi ( www.sodipodi.com ) Linux und Windows unterstützt noch keine (englisch)
  • Inkscape ( Webseite ) ein Fork von Sodipodi mit dem Ziel eine Benutzeroberfläche zu entwickeln.

Kommerzielle Software

Programme die SVG unterstützen

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

Konferenzen

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

Literatur

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

Weblinks




Bücher zum Thema Scalable Vector Graphics

Dieser Artikel von Wikipedia unterliegt der GNU FDL.

ImpressumLesezeichen setzenSeite versendenSeite drucken

HTML-Code zum Verweis auf diese Seite:
<a href="http://www.uni-protokolle.de/Lexikon/Scalable_Vector_Graphics.html">Scalable Vector Graphics </a>