Skalierbare Vektorgrafiken in Websites einbinden

Um SVG-Code in Webseiten zu verwenden gibt es drei Ansätze. 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. Der ›Nachteil‹ besteht vor allem darin, dass eine separate SVG-Datei benötigt 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 keine separate SVG-Datei notwendig.

Diese Methoden werden auf dieser Seite anhand von Beispielen verdeutlicht. Weiter unten findet man eine Übersicht über die gegenwärtige Browser-Unterstützung der Methoden.

Einbinden per <img>-Element

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

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 Darstellung sieht dann so aus:

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

Referenzierung über das <object>-Element

Sämtliche Beispiele auf den anderen Seiten dieses kleinen Tutorials sind mit dieser ›klassischen‹ Methode umgesetzt worden. Das heißt, eine separate SVG-Datei wird über das <object>-Element referenziert:

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 Datei polygon.svg wird so zweimal referenziert, einmal ohne und einmal mit Hintergrundgrafik:

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:

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>
    #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>
    #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 von dem von Ihnen verwendeten Browser noch nicht unterstützt:

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