Grundlagen

Zeichen-Icon SVG (Scalable Vector Graphics, zu Deutsch skalierbare Vektorgrafik) ist eine XML basierende Sprache, welche es erlaubt, zweidimensionale Vektorgrafiken zu beschreiben. Die Sprache wurde vom W3C entworfen und wird von den meisten Browsern nahezu vollständig unterstützt.

In SVG gibt es verschiedene Elemente, die Sie im XML-Dokument platzieren können, um dadurch Linien, Rechtecke, Kreise, Ellipsen, Polylinien, Polygone, aber auch Texte und komplexe Pfade zu zeichnen. SVG entstand durch den Wunsch auf die Standardisierung der Sprachen VML und PGML. Das W3C standardisierte keine dieser Sprachen, sondern schuf eine eigene: SVG. Die erste Version erschien bereits 2001. Die aktuelle Version, SVG 1.1, wurde 2003 veröffentlicht und wird heute von fast allen Browsern unterstützt. Seit 2011 wird an SVG 2 gearbeitet. SVG 2 bringt viele Erweiterungen, wird jedoch von nur wenigen Browsern (vollständig) unterstützt.

Eine SVG-Datei hat üblicherweise die Dateiendung .svg. Als MIME-Typ kommt image/svg+xml zum Einsatz. Die Einbindung eines SVG-Dokuments in eine HTML-Seite kann auf verschiedene Arten erfolgen (z. B. als Bild oder per Direktnotation). Diese werden auf dieser Seite aber noch näher beschrieben.

Verwendung

SVG-Grafiken können an ganz unterschiedlichen Stellen verwendet und eingesetzt werden. Trotzdem sind Vektorgrafiken noch lange nicht so verbreitet wie die üblichen Rastergrafiken. Vektorgrafiken haben im Gegensatz zu Rastergrafiken den Vorteil, dass diese beliebig skaliert werden können, ohne einen Qualitätsverlust zu erleiden. Diese Aufbereitung einer Vektorgrafik erfordert für den Rendering-Vorgang zwar einen höheren Ressourcenverbrauch, dieser ist jedoch bei den heutigen Computern kein Hindernis mehr.

SVG ist ein Vektorgrafikformat, welches vor allem für die Verwendung im World Wide Web entwickelt und entworfen wurde (z. B. für responsives Webdesign). Gerade deshalb wird der Großteil der SVG-Spezifikation (zu mindestens, wenn man von SVG 1.1 ausgeht) von so gut wie allen Webbrowsern unterstützt. Der Einsatz von SVG-Grafiken auf Webseiten und unter der Annahme, dass einigermaßen aktuelle Browserversionen verwendet werden, kann man also als problemlos bezeichnen.

SVG-Grafiken können auch über Skripte dynamisiert werden. Für den Zugriff auf die Dokument-Bestandteile aus dem Skript heraus wird das DOM (Document Object Model) verwendet, welches Ihnen vielleicht aus HTML oder JavaScript bekannt ist. Gerade durch diese Funktionalität ermöglicht sich eine völlig neue Welt in dynamische und interaktive Grafiken.

Grundaufbau

Im Prinzip ist eine SVG-Datei nur eine ganz normale XML-Datei, bei welcher die Namen von Elementen, Attributen und Attributwerten über eine DTD festgelegt sind. Eine SVG-Datei enthält also i. d. R. zuallererst eine XML-Deklaration. Es folgt der Verweis zur DTD, welcher unter http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd zu finden ist. Als PUBLIC-Identifikator wird -//W3C//DTD SVG 1.1//EN angegeben.

Das Wurzelelement von SVG ist svg, in welchem im Normalfall das version-Attribut (zumeist mit dem Wert 1.1) notiert wird. Als Namensraum wird http://www.w3.org/2000/svg verwendet. Für einige Features, wie z. B. das Erstellen eines Hyperlinks oder das Referenzieren eines Skripts, benötigen Sie XLink. XLink wird über den Namensraum http://www.w3.org/1999/xlink eingebunden. Als Namensraumpräfix wird meistens xlink verwendet.

Ein weiteres wichtiges Attribut ist viewBox. Das Attribut ist optional, sollte jedoch immer angegeben werden. Als Werte werden vier nummerische Werte erwartet. Die ersten zwei Werte geben die X- und Y-Position des Anzeigebereichs (engl. viewport) an und sind i. d. R. 0. Wird das viewBox-Attribut bei anderen Elementen (die innerhalb des svg-Elements platziert sind) verwendet, dann kann es auch vorkommen, dass hier positive oder negative Werte zum Einsatz kommen. Die nächsten zwei Zahlen im Wert des svg-Attributs geben die Breite und Höhe des Anzeigebereichs an. Der mit diesem Attribut definierte Anzeigebereich ist elementar für die restlichen Positions- und Größenangaben innerhalb des svg-Elements. Durch diese Angaben ist es dann letztendlich auch möglich, dass die Anzeigesoftware (z. B. der Browser) die Grafik nach Belieben skalieren kann. Diese Tatsache führt dazu, dass es sich bei der Grafik um eine Vektorgrafik handelt. Der Standard-Anzeigebereich wird über die Attribute width und height festgelegt. Diese Attribute können aber auch durchaus weggelassen werden.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
 
<!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" version="1.1" viewBox="0 0 200 200">
    
</svg>

Einbindung

SVG-Grafiken können auf unterschiedliche Art und Weisen in eine HTML-Seite eingebunden werden. Der vermutlich einfachste Weg ist die Verwendung des img-Elements, welches auch dazu verwendet wird, „normale“ Rastergrafiken einzubinden. Dabei sollte jedoch beachtet werden, dass die Referenzierung auf Stylesheets sowie die Verwendung von Links und Skripten aus Sicherheitsgründen von den Browsern im Regelfall geblockt werden.

<img src="Grafik.svg" width="200" height="200" alt="SVG-Grafik" />

Möchten Sie eine interaktive SVG-Grafik (z. B. mit Links oder Skripten) einbinden, dann empfiehlt sich die Verwendung des embed-Elements.

<embed type="image/svg+xml" src="Grafik.svg" width="200" height="200" />

Eine weitere Möglichkeit zur Einbindung einer SVG-Grafik wäre die Verwendung der background-image-Eigenschaft von CSS. Weitere Einstellungen können dann natürlich mittels den Eigenschaften background-size, background-position und background-repeat vorgenommen werden.

<div style="width: 200px; height: 200px; background-image: url('Grafik.svg'); background-repeat: no-repeat;"></div>

Mit HTML5 ist es nun auch möglich, SVG-Elemente direkt in HTML zu notieren. Dafür wird einfach das svg-Element inkl. dessen Unterelemente innerhalb eines HTML-Elements platziert. Die Größenangabe erfolgt durch das width- und height-Attribut. In einem solchen Fall ist dann z. B. auch möglich, das viewBox-Attribut wegzulassen, sofern der Wert des width- und height-Attributs einen „festen“ Wert hat und sich die Größen- und Positionsangabe, der im svg-Element platzierten Elemente, auf die zwei Attributwerte beziehen.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    
</svg>

Positions- und Größenangaben

In SVG beziehen sich die Positions- und Größenangaben immer auf das width- und height-Attribut oder auf die Größenangabe im viewBox-Attribut. Wird in diesen Attributen keine Maßeinheit explizit angegeben, so wird von Pixel ausgegangen. Natürlich ist es aber auch möglich, eine SVG-Grafik in einem anderen Koordinatensystem aufzubauen. Dafür wird hinter einem Wert einfach die gewünschte Maßeinheit notiert. Als Maßeinheiten stehen em (Schriftgröße), ex (Höhe des kleinen x), px (Pixel), in (Inch), cm (Zentimeter), mm (Millimeter), pt (Punkt) und pc (Pica) zur Verfügung. In den Positionierungsattributen von Elementen (z. B. für eine Linie oder ein Rechteck), welche innerhalb des svg-Elements platziert werden, sind keine Maßeinheiten anzugeben, da sich die Angaben immer auf das Koordinatensystem der SVG-Grafik (und somit im Regelfall auf die Werte des viewBox-Attributs) beziehen. Bei Attributen für Größenangaben ist es hingegen wieder möglich, eine Maßeinheit mit anzugeben. Wird keine Maßeinheit angegeben, so wird von der Maßeinheit des Koordinatensystems ausgegangen.

Attribute

Bevor wir uns in den nächsten Themen auf die SVG-Elemente stürzen, um etwas in unsere SVG-Grafik zeichnen zu können, möchten wir Ihnen hier ein paar wichtige Attribute nennen, welche Sie immer wieder benötigen werden.

Zu den Attributen zur Positionierung gehören x, x1, x2, cx (center-x), y, y1, y2, cy (center-y. Für Größenangaben werden die Attribute width und height sowie r (radius), rx (radius-x) und ry (radius-y) verwendet. Diese Attribute werden auch als „primitive“ bzw. grundlegende Attribute bezeichnet.

Neben diesen Attributen gibt es noch eine weitere wichtige Gruppe an Attributen: die Präsentationsattribute. Die folgende Tabelle zeigt ein paar wichtige Attribute dieser Gruppe:

fill	Füllfarbe
fill-opacity	Transparenz der Füllfarbe
stroke	Farbe des Umrisses (Rahmen)
stroke-opacity	Transparenz der Farbe des Umrisses (Rahmen)
stroke-width	Dicke des Umrisses (Rahmen)
transform	Angabe von Transformations-Funktionen (translate(x y), scale(x y), rotate(a x y), skewX(a), skewY(a))

Übrigens: Für die Farbangaben gibt es ähnliche Möglichkeiten wie in CSS. Es ist möglich, einen (englischen) Farbnamen, einen Hex-Wert (Kurz- oder Langform) oder die RGB-Funktion zu notieren.