Bitte warten...

SVG: Scalable Vector Graphics

(SVG 1.1)

Übersicht
Skalierbare Vektorgrafiken in Websites einbinden
Unterstützung durch andere Anwendungen

SVG ist eine Auszeichnungssprache und ein Datenformat für Vektorgrafiken. Der Vorteil von Vektorgrafiken gegenüber Rastergrafiken besteht vor allem in der beliebigen verlustfreien Skalierbarkeit. Das heißt, eine Vektorgrafik kann beliebig vergrößert werden, ohne dass die Grafik an Konturschärfe verliert oder grobe Pixel sichtbar werden. Dies wird erreicht, indem das Bild nicht Bildpunkt für Bildpunkt aufgelöst, sondern auf seine geometrischen Inhalte abstrahiert wird. Für ein Rechteck werden beispielsweise lediglich dessen Position, Kantenlänge, Kontur- und Füllfarbe benötigt, um es zu beschreiben. Auf diese Weise kann der Speicherbedarf einer Vektorgrafik sehr gering gehalten werden. Auf der anderen Seite ist der Rechenaufwand für die Darstellung einer Vektorgrafik unter Umständen wesentlich höher als bei einer Rastergrafik. Auch ist nicht jede Art von Bild für die Darstellung als Vektorgrafik geeignet. Während man Fotos oder gescannte Bilder sicherlich besser als Rastergrafik speichert, können Logos, Diagramme, Landkarten oder Comics durchaus gut als Vektorgrafik dargestellt werden, da sie häufig überwiegend aus Flächen und Linien bestehen. Ein weiterer Vorteil gegenüber Rastergrafiken ist, dass SVGrafiken mit JavaScript animiert werden können.

Die Sprache erinnert in ihrem Aufbau stark an HTML, da beide zur SGML-Familie gehören. Seit HTML5 ist es möglich, SVG auch direkt im Quelltext einer Seite einzubetten, da SVG quasi als Teilmenge von HTML behandelt wird. Bei eigenständigen Dateien sollten im Unterschied zu HTML folgende Punkte beachtet werden:

  • Wie bei allen XML-Formaten müssen Tags ohne End-Tag mit einem / geschlossen werden: <tag />
  • <style>-Elemente benötigen das Attribut type='text/css'.
  • <script>-Elemente benötigen das Attribut type='text/javascript'.
  • Eingebettetes JavaScript sollte mit CDATA auskommentiert werden. Siehe hier.

Neben der manuellen Erstellung, die in diesem Tutorial behandelt wird, können SVGrafiken auch mit eigenständigen Editoren wie beispielsweise Inkscape erstellt werden. Da der Inhalt einer SVG-Datei ausschließlich aus Text besteht, ist es auch möglich, SVGrafiken dynamisch mittels PHP zu erzeugen. Die Standard-Konformität des SVG-Quelltextes kann z. B. mit dem W3C-Validator überprüft werden.

  • Maße können unter anderem in Pixeln oder Millimeter angegeben werden.
  • Das Koordinatensystem hat seinen Ursprung oben/links.
  • Objekte dürfen die Bilddimensionen überragen.
  • Koordinaten geben das Zentrum einer Linie an.
  • Objekte können mit CSS formatiert werden.
  • Der Hintergrund von SVGrafiken ist standardmäßig transparent.
  • Objekte überlagern sich standardmäßig in der Reihenfolge ihres Auftretens.
  • Internet Explorer unterstützt SVG erst ab Version 9.

Skalierbare Vektorgrafiken in Websites einbinden

Um SVG-Code in Webseiten zu verwenden gibt es drei Ansätze, die auf dieser Seite anhand von Beispielen erläutert werden. Einerseits kann eine SVG-Grafik normal als Grafik über das <img>-Element eingebunden werden. Außerdem kann sie als separate Datei mit Hilfe des <object>-Elements referenziert werden. Dies ist die übliche Methode für HTML 4 und XHTML, die auch von den meisten Browsern unterstützt wird.

Die dritte Methode besteht in dem direkten Einbinden von SVG-Code in den HTML-Quelltext der Webseite, wie dies in HTML5 möglich ist. Es ist hier keine separate SVG-Datei notwendig.

Einbinden per <img>-Element

SVG-Dateien können in vielen Browsern wie jedes andere Bild auch über das <img>-Element referenziert werden:

Code auswählen
1
2
<img src='img/polygon.svg' style='width:350px;height:180px;' alt='SVG-Beispiel1'>
<img src='img/polygon.svg' style='width:350px;height:180px;background-image:url(img/alpha.png);' alt='SVG-Beispiel2'>

Die Datei polygon.svg wird so zweimal referenziert, einmal ohne und einmal mit Hintergrundgrafik:

SVG-Beispiel1 SVG-Beispiel2

Weichen die Dimensionen des HTML-Elements von denen der Grafik ab, so wird diese skaliert:

SVG-Beispiel1 SVG-Beispiel2

Referenzierung über das <object>-Element

Eine alternative Methode ist die Referenzierung einer separaten Grafikdatei in einem <object>-Element:

Code auswählen
1
2
<object data='img/polygon.svg' type='image/svg+xml' style='width:350px;height:180px;'></object>
<object data='img/polygon.svg' type='image/svg+xml' style='width:350px;height:180px;background-image:url(img/alpha.png);'></object>

Die Darstellung sieht dann so aus:

Weichen die Dimensionen des <object>-Elements von denen der Grafik ab, so wird diese beschnitten:

Einbetten als Inline-SVG

In HTML5 ist es wie gesagt möglich, den Quelltext der SVG-Datei direkt einzubinden:

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<svg width='350px' height='180px'>
  <style type='text/css'>
    #poly1a { stroke:red; stroke-width:6px; fill:green; stroke-miterlimit:1.9; }
    #poly2a { stroke:blue; stroke-width:3px; stroke-miterlimit:20; fill:cyan; fill-rule:evenodd; }
    #poly3a { stroke:yellow; stroke-width:3px; stroke-dasharray:10,5; fill:none; }
  </style>
  <polygon id='poly1a' points='15 35, 20 20, 40 10, 60 60, 80 10, 100 70, 102 20, 130 60, 150 20, 170 40' />
  <polygon id='poly2a' points='60 75, 90 150, 18 104, 102 104, 30 150' />
  <polygon id='poly3a' points='230 30, 280 30, 280 70, 200 70, 200 100, 220 100, 220 140, 250 140' />
</svg>

<svg width='350px' height='180px' style='background-image:url(img/alpha.png);'>
  <style type='text/css'>
    #poly1b { stroke:red; stroke-width:6px; fill:green; stroke-miterlimit:1.9; }
    #poly2b { stroke:blue; stroke-width:3px; stroke-miterlimit:20; fill:cyan; fill-rule:evenodd; }
    #poly3b { stroke:yellow; stroke-width:3px; stroke-dasharray:10,5; fill:none; }
  </style>
  <polygon id='poly1b' points='15 35, 20 20, 40 10, 60 60, 80 10, 100 70, 102 20, 130 60, 150 20, 170 40' />
  <polygon id='poly2b' points='60 75, 90 150, 18 104, 102 104, 30 150' />
  <polygon id='poly3b' points='230 30, 280 30, 280 70, 200 70, 200 100, 220 100, 220 140, 250 140' />
</svg>

Unter diesem Absatz sollten nun die gleichen beiden Grafiken zu sehen sein. Falls dies nicht der Fall ist, wird Inline-SVG vom verwendeten Browser nicht unterstützt:

Weichen die Dimensionen des <svg>-Elements von denen der Grafik ab, so wird diese beschnitten:

Unterstützung durch andere Anwendungen

Alle in diesem Tutorial beschriebenen Merkmale wurden mit verschiedenen Browsern erfolgreich getestet, wenn nicht anders vermerkt. Daher kann davon ausgegangen werden, dass diese Merkmale im Web problemlos verwendet werden können.

Möchte man SVGrafiken außerhalb des Webs als eigenständige Grafikdateien erstellen, kann es bei verschiedenen Merkmalen zu Darstellungsproblemen kommen, wenn diese von den verwendeten Anwendungen nicht untersützt werden. Die folgende Tabelle enthält Merkmale, bei denen mir aufgefallen ist, dass sie von den aufgeführten Anwendungen nicht voll unterstützt werden (Stand: Januar 2020).

Die Angaben zu Farben in den ersten sechs Zeilen gelten unabhängig davon, ob diese als SVG-Attribut oder per CSS festgelegt wurden.

Die fehlende Unterstützung von hsl() und hsla() in Gimp, Xviewer und Pix könnte an der Bibliothek librsvg2-2 liegen, die von all diesen Programmen verwendet wird.

InkscapeGimpXviewerPix
Farbname
Hexadezimal
rgb()
rgba()
hsl()
hsla()
opacity