Scalable Vector Graphics

Dieser Artikel sollte überarbeitet werden.
Die Regeln für GlossarWiki-Artikel sollten beachten werden.

Definition

Scalable Vector Graphics (SVG) ist eine XML-basierte, textorientierte Auszeichnungssprache. Mit ihr lassen sich zweidimensionale skalierbare Grafiken beschreiben. Erlaubt sind innerhalb von SVG-Dateien auch Bilder und Text als grafische Objekte. SVG wurde im September 2001 vom W3C als Standard veröffentlicht. Auch unterstützen die meisten Webbrowser, die sich an den W3C-Standard halten dieses Format. Eine Ausnahme bildet jedoch der Internet Explorer. In ihm lassen sich SVG-Inhalte jedoch mittels eines Plugins von Adobe darstellen. Ebenso unterstützen etablierte Vektorgrafikprogramme wie Adobe Illustrator dieses Format.

Merkmale

SVG ist eine auf XML basierte Auszeichnungssprache. Sie ist ein offizieller Standard des W3C. SVG Grafiken besehen aus ASCII-Code und können somit mit jedem beliebigen Texteditor erstellt werden. Wie alle Vektorgrafikformate sind auch SVG-Grafiken ohne Qualitätsverlust skalierbar. SVG unterstützt Stylesprachen wie CSS und Scriptsprachen wie JavaScript.

Struktur

SVG erfüllt den XML-Standard und nutzt deshalb die selbe Syntax. Somit ist die Grafik in einer Baumstruktur definiert, die aus einzelnen Elementen besteht, welchen Attribute zugewiesen werden.

Jede Datei beginnt mit der XML-Deklaration und der Dokumenttyp-Deklaration, wie auch bei anderen XML-basierten Sprachen üblich. Das Wurzelelement einer SVG-Datei ist <svg>.

  <?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
      version="1.1" baseProfile="full"
      width="800mm" height="600mm">
  </svg>

Elemente

Pfad

Der Pfad ist das Basis-Element für SVG. Aus ihm leiten sich alle anderen Grundformen ab.

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 bilden die Anweisungen, 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)

Z/z – Pfad schließen

H/h – horizontal line = horizontale Linie zeichnen (X-Wert)

V/v – vertical line = vertikale Linie zeichnen (Y-Wert)

A/a – elliptical arc = Bogenkurve

Absoluter Pfad:

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

Identischer relativer Pfad:

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

Kreis

Ein Kreis wird durch (die x- und y-Position seines Mittelpunktes und) den Radius beschrieben:

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

Ellipse

Eine Ellipse wird durch ihre beiden Halbachsenradien beschrieben:

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

Rechteck

Ein Rechteck kann durch seine Postion, Höhe und Breite beschrieben werden:

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

Linie

SVG beschreibt eine Linie durch die x- und y-Positionen ihres Anfangs- und Startpunktes:

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

Polylinie

Eine Polylinie ist eine Reihung meherer aufeinander folgender Linien. Ihre Koordinatenpaare werden dabei einfach fortlaufend hinter einander geschrieben:

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

Polygon

Ein Polygon (oder Vieleck) wird durch seine Punkte geschrieben. Auch hier werden die Koordinatenpaare einfach hinter einander geschrieben:

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

Text

Ein Text wird durch seine Position und seinen Inhalt beschrieben:

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

Quellen & Links

• [W3C:SVG]
• [SVG Tutorial]
• [SVG-FAQ]