Scalable Vector Graphics

Die Flagge Deutschlands als SVG
Der komplette Quelltext:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg>
 <svg xmlns="http://www.w3.org/2000/svg"
      width="1000"
      height="600"
      viewBox="0 0 5 3">
    <rect id="black_stripe"
          fill="#000"
          width="5"
          height="3"/>
    <rect id="red_stripe"
          fill="#D00"
          width="5"
          height="2" y="1"/>
    <rect id="gold_stripe"
          fill="#FFCE00"
          width="5"
          height="1" y="2"/>
 </svg>

Scalable Vector Graphics (SVG, deutsch Skalierbare Vektorgrafiken) ist ein Standard zur Beschreibung zweidimensionaler Vektorgrafiken in der XML-Syntax. SVG wurde im September 2001 vom W3C als Empfehlung veröffentlicht und viele aktuelle Webbrowser können von Haus aus einen Großteil des Sprachumfangs darstellen, wie z. B. Mozilla Firefox oder Opera. Der verbreitete Internet Explorer benötigt zur Darstellung jedoch noch ein Plug-In, wie z. B. den SVG-Viewer von Adobe.

SVG unterstützt mittels SMIL Animationen. Manipulationen des SVG-DOM sind mit Hilfe eingebetteter Funktionen via Skriptsprachen möglich. Zurzeit wird die Kombination und Integration von Standards des W3C untereinander in der Arbeitsgruppe Compound Document Formats erarbeitet.

Da SVG ein XML-basiertes Dateiformat ist, können SVG-Dateien mit Hilfe eines Texteditors bearbeitet werden. Es gibt jedoch auch spezielle Programme zur Bearbeitung, z. B. die freien Vektorgrafik-Programme Sodipodi und Inkscape. Die empfohlene Dateiendung ist .svg oder, wenn die Datei mit gzip komprimiert ist, .svgz. Der MIME-Typ ist image/svg+xml^[1].

Geschichte

Seit August 1998 arbeitete das World Wide Web Consortium (W3C) an der Spezifikation der Vektorgrafiksprache SVG, von der im September 2001 die erste Empfehlung (engl. recommendation) unter dem Namen Scalable Vector Graphics (SVG) 1.0 Specification veröffentlicht wurde.

Aktuell ist die Spezifikation der Version 1.1, seit dem September 2003 vom W3C empfohlen. Die SVG-Version 1.2 ist zur Zeit in Arbeit (Stand 2005) und steht aktuell als Entwurf zur Verfügung.

Konferenzen

Die SVG Open ist eine internationale Konferenz, die sich mit allem rund um das Thema SVG beschäftigt. Mittlerweile hat sie bereits vier mal stattgefunden.

Zürich, Schweiz, 15.–17. Juli 2002
Vancouver, Kanada, 13.–18. Juli 2003
Tokio, Japan, 7.–10. September 2004
Enschede, Niederlande, 15.–18. August 2005

Im Jahr 2006 fand die SVG Open nicht statt. Die ursprünglich für den Zeitraum vom 16.–19. Oktober in Victoria (Kanada) geplante Konferenz wurde wegen der plötzlichen Erkrankung des Hauptorganisators abgesagt. Eine Konferenz für das Jahr 2007 wird derzeit vorbereitet.

Struktur

SVG nutzt die Syntax der Extensible Markup Language (engl. für „erweiterbare Auszeichnungssprache“), XML. Die definierte Grafik ist somit in einer Baumstruktur aus verschiedenen Elementen und diesen Elementen zugewiesenen Attributen aufgebaut.

Jede SVG-Datei beginnt, wie bei XML-basierten Sprachen üblich, 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. Darauf folgt das Start-Tag <svg>. Die SVG-Datei wird durch das Tag </svg> abgeschlossen.

<?xml version="1.0" encoding="utf-8"?>

<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">

<!--Inhalt der Datei -->

</svg>

Mit den Attributen width (engl.: Breite) und height (engl.: Höhe) des SVG-Starttags <svg> wird die Größe der Grafik definiert.

Elemente

Dieses SVG-Bild besteht aus Vektorgrafiken und einem Text (*SVG*)

SVG unterstützt drei grundauf unterschiedliche Typen von Elementen:

Vektorgrafiken, aufgebaut aus grafischen Primitiven
Rastergrafiken, also gewöhnliche Bitmap-Bilder, die extern eingebunden werden können.
Text in einer bestimmten Schriftart, die dem Render-Programm zur Verfügung stehen muss.

Grafische Primitiven

Alle grafischen Objekte in SVG bauen auf einfachen grafischen Primitiven auf. Komplexere Objekte sind dabei aus mehreren einfachen Objekten zusammengesetzt.

Die grafischen Primitiven von SVG

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 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

Beispiel:

Der absolut beschriebene Pfad


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

ist identisch mit dem relativen


<path d="M 20 20 l -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

ein Kreis in SVG

Kreis: Der Kreis wird mindestens durch den Radius (r) definiert. Optional kann die Position des Mittelpunktes durch die Attribute 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" />

Eine Ellipse in SVG, hier transformiert

Ellipse: Die Ellipse wird durch die zwei Halbachsenradien definiert (rx und ry). Alle anderen Attribute entsprechen denen des Kreises.


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

ein Rechteck in SVG

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, beschreibt man sie als so genannte Polylinie. Dabei werden die einzelnen Koordinatenpaare der Stützpunkte einfach fortlaufend hintereinander geschrieben. Die Linie wird von ersten Punkt zum zweiten Punkt gezogen, 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 und Text können mit Hilfe des Elements <text> definiert werden.


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

Animationen

Die Tags, die für die Auszeichnung von Animationen benutzt werden, stammen aus dem XML-Multimediastandard Synchronized Multimedia Integration Language (SMIL). Zustände, welche animiert werden können, sind Transformation, Position, Sichtbarkeit, Farbe und Größe. Wichtig für das Verständnis von Animationen sind die Begriffe „Darsteller“ (das zu animierende Objekt) und „Drehbuch“ (die Zeitspanne der Animation).

Zeitangaben können von Millisekunden bis Stunden angegeben und verschieden ausgezeichnet werden. Für die meisten Animationstags wird ein Pflichtattribut benötigt, das die Art der Animation festlegt. Weitere grundlegende Komponenten sind, wie schon erwähnt, der Zeitrahmen, Zustände während der Animation (optional), der Zustand nach der Animation, und ob eine Wiederholung gestartet werden soll.

Die Eigenschaften eines Darstellers sind in SVG durch folgende Attribute festgehalten.

attributeName (was wird animiert)
attributeType (XML-Teile oder Formatierungen in CSS)

Für die Zeitangabe werden logische Begriffe wie begin (engl.: Start, Beginn) end (engl.: Ende) und dur (engl. „duration“: Dauer) verwendet. Start, Wiederholungen etc. können auch von Ereignissen wie Mausberührung oder -klick abhängig gemacht werden.

Beispiel einer Animation

Quellcode der Pfadanimation:


<path id="Pfad" d="M50,100 C50,50 125,50 125,100 S200,150 200,100" fill="orange" stroke="black" 
 stroke-width="3px" stroke-linecap="round" />
<circle cx="-10" y="-2.5" r="5" fill="yellow" stroke="white">
<animateMotion id="kreis_ani" dur="5s"  repeatCount="indefinite" begin="play.click" end="stop.click" rotate="auto">
<mpath xlink:href="#Pfad" />
</animateMotion>
</circle>

Quellcode des Play-Buttons:


<polygon id="play" xlink:href="#kreis_ani" points="190,230 190,210 210,220" fill="#ff00" opacity="0.5">
 <set attributeName="opacity" attributeType="XML" to="1.0" begin="mouseover"/>
 <set attributeName="stroke" attributeType="XML" to="#fff" begin="mouseover"/>
 <set attributeName="opacity" attributeType="XML" to="0.5" begin="mouseout"/>
 <set attributeName="stroke" attributeType="XML" to="none" begin="mouseout"/>
</polygon>

Grafische Effekte/Filter

Bekannte Grafikfilter sind aus DTP-Programmen übernommen worden und arbeiten nach dem Matrizen-Prinzip, bei dem Operatoren und Funktionen die Form der Matrix ausdrücken. Es wird jede einzelene Bildposition mit dem definierten Filtereffekt berechnet und auf die Nächste übertragen. Auf diese Weise lassen sich Bilder und Grafiken auf verschiedenste Art und Weise bearbeiten.

Einige der möglichen Filter:

feTurbulence
feDisplacement
feGaussianBlur

Scripting

Scripting ist in SVG mittels ECMAScript (einer standardisierten Variante von JavaScript) möglich. Mit dem Document Object Model von SVG (SVG-DOM) kann man die XML-Struktur einer Grafik manipulieren und so zum Beispiel neue Elemente per Mausklick erschaffen.

Beispiel für Scripting

Quellcode mit implementiertem ECMAScript-Code:


<?xml version="1.0" encoding="utf-8"?> 
<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="400" height="220"> 
 <defs>
  <script type="text/ecmascript">
   <![CDATA[

         function wachsen(evt) {
          var doku = evt.target;
          var owner = doku.ownerDocument;
          var elem = owner.getElementById('jack');
          var breite = elem.getAttributeNS(null, 'width');

          if(breite >= 250) {
           elem.setAttributeNS(null, 'width', 10);
          } else {
           elem.setAttributeNS(null, 'width', breite * 1 + 30);
          }
         }
     ]]>
  </script>
 </defs>
    <rect id="jack" x="50" y="90" width="10" height="80" rx="5" ry="5" stroke="#fff"
     fill="#990000" onclick="wachsen(evt)" cursor="pointer"/>
</svg>

Hier wurde eine Funktion definiert, welche die DOM-Struktur der SVG-Datei hierarchisch durchläuft. Als erstes wird das Dokument aufgerufen. Die Funktion getElementById() ruft nun das Rechteck auf, das den Namen jack trägt. Sobald die Funktion das Element jack gefunden hat, wird darauf zugegriffen und dessen Attribute können verändert werden. In dieser Funktion wird das Attribut width mit der Funktion getAttributeNS() angesteuert und im weiteren mit einer relativ eindeutigen Formel verändert. Nach dem Definitionsbereich ist das Rechteck mit der ID jack aufgeführt; im selben Tag wird der Eventhandler onclick mit der Funktion wachsen(evt) auf das Rechteck definiert.

Beispiel

Ein kleines Beispiel illustriert die Verwendung der einzelnen Elemente gut. Das rechts dargestellte Bild Variable Resistor.svg hat den folgenden kommentierten Quelltext:

 <?xml version="1.0" encoding="utf-8"?>  
 <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="107" height="60" viewBox="-2 -5 105 55">
 <!-- Anschlüsse links und rechts -->
 <polyline points="0 25  100 25" fill="none" stroke="black" 
      stroke-width="3px"/>
 <!-- Das Widerstandsrechteck -->
 <rect x="10" y="15" width="80" height="20" fill="white" stroke="black" 
      stroke-width="3px" />
 <!-- Der Schleifer -->
 <polyline points="65 5  40 40  40 50" fill="none" stroke="black"
      stroke-width="3px"/>
 <!-- Die Pfeilspitze wird gedreht -->
 <polygon points="60 5  70 5  65 -5" stroke="black" stroke-width="3px"
      transform="rotate(33.7 65 5)" />
 </svg>

Koordinaten

Im Gegensatz zu vielen anderen Grafikformaten (z. B. Bitmaps) sind SVG-Koordinaten Gleitkomma-Zahlen und nicht Ganzzahlen. Das heißt, eine Koordinate in SVG kann quasi unbeschränkt genau sein, wenn entsprechend viele Kommazahlen vorhanden sind, während ganzzahlige Pixel-Angaben in Bitmaps auf die maximale Größe jenen Bildes begrenzt sind.

Bei bitmapbasierten Ausgabemedien, zum Beispiel einem Monitor, bezeichnet eine SVG-Angabe wie x = 100 y = 200 nicht den ganzen Bildschirmpixel, sondern die Grenze zwischen den Pixeln. Daher bedeutet z. B. eine Angabe von viewBox="0 0 800 600" im öffnenden SVG-Tag eine mathem. Breite von 800 Einheiten. Bei Pixelgrafiken wäre dies eine mathem. Breite von 801 Einheiten, da die Spalten 0 und 800 mitgezählt würden. Bei dünnen Linien ist hier in SVG besondere Vorsicht geboten. Eine Angabe
<line x1="10" y1="300" x2="100" y2="300" stroke="#000000" stroke-width="1px" />
erzeugt, bei einer Skalierung von 1 : 1 im SVG-Tag, auf dem Monitor nicht etwa eine schwarze horiz. Linie von 1 Pixel Breite auf der Pixelzeile 300, sondern eine dunkelgraue Linie mit 2 Pixel Breite auf den Pixelzeilen 299 und 300, weil die Linie genau auf dem Rand zwischen den beiden Zeilen liegt. Erst eine Angabe von
<line x1="10" y1="300.5" x2="100" y2="300.5" stroke="#000000" stroke-width="1px" />
führt zum gewünschten Ergebnis.

SVG-Unterstützung in Software

SVG wurde mit einem wesentlichen Augenmerk auf das World Wide Web entworfen. Viele Browser können es nativ darstellen, d. h. sie benötigen kein Plugin. Alternativ existiert für viele Umgebungen ein Plugin von Adobe. Siehe dazu auch die Liste der SVG-Unterstützung in Browsern.

Viele Desktop-Environments benutzen zunehmend SVG unter anderem als Format für Programmsymbole, Hintergrundbilder, Mauszeiger, weil SVG sich ohne Qualitätsverluste frei skalieren lässt. Bekannte Projekte sind das Oxygen Project^[2] für KDE und das Tango Desktop Project^[3] für GNOME. Generell ist zu bemerken, dass viele Betriebssysteme auf ihren grafischen Oberflächen vermehrt Vektorgrafiken benutzen; der zusätzliche Ressourcenverbrauch zum Rendern wird dabei durch steigende Hardwareressourcen kompensiert oder sogar schon von den Grafikkarten übernommen.

Auch in der Wikipedia können SVG-Grafiken hochgeladen werden. Um auch Nutzern mit inkompatiblen Browsern die Betrachtung zu ermöglichen, werden die Grafiken momentan noch auf den Servern in PNG-Dateien – also in Rasterbilder – umgewandelt (dies geschieht mithilfe der rsvg-Library, siehe auch SVG-Support (en)). Auf der Artikelseite der umgewandelten Grafik gelangt man zum SVG-Quelltext.

Programme, mit denen man SVG-Grafiken einfach erstellen und anzeigen kann, sind u. a.:

Ein Programm, welches sich zur Erstellung von chemischen Formeln und deren Export als SVG eignet ist BKChem^[4].

Das SVG-Logo

Um ein einheitliches „Markenzeichen“ für SVG zu schaffen, wurde von SVG.org, unterstützt u. a. von Sun und Opera, ein Logowettbewerb ins Leben gerufen. Bis zum 1. Oktober 2006 waren Designer aufgerufen, unter svglogo.com eigene Vorschläge für ein SVG-Logo einzureichen. Dieses soll in Software und auf Webseiten, die SVG verwenden, eingesetzt werden. Am 17. Dezember wurde der Gewinner bekanntgegeben.

Siehe auch

Macromedia Flash (Konkurrenz zu SVG)

Literatur

Alexander Adam, SVG Scalable Vector Graphics, Verlag FRANZIS, ISBN 3-7723-61901-0
Marcel Salathé, SVG Scalable Vector Graphics, ...für professionelle Einsteiger, Verlag Markt+Technik, ISBN 3-8272-6188-0

Fußnoten

↑ http://www.w3.org/TR/SVG/intro.html#MIMEType
↑ siehe auch: „Oxygen Project“ in der englischen Wikipedia; Homepage der Entwickler
↑ siehe auch: „Tango Desktop Project“ in der englischen Wikipedia; offizielle Homepage
↑ offizielle Homepage von BKChem

Weblinks

Wikibooks: SVG – Lern- und Lehrmaterialien
Commons: SVG-Beispiele – Album mit Bildern, Videos und Audiodateien
Scalable Vector Graphics (SVG) Specification beim World Wide Web Consortium (englisch)
Linkkatalog zum Thema SVG bei curlie.org (ehemals DMOZ)

[1] ttp://www.w3.org/TR/SVG/intro.html#MIMEType

[2] siehe auch: „Oxygen Project“ in der englischen Wikipedia; Homepage der Entwickler

[3] siehe auch: „Tango Desktop Project“ in der englischen Wikipedia; offizielle Homepage

[4] zielle Homepage von BKChem

[1]

[2]

[3]

[4]