SVG Tutorial

Grundsätzlich wird die Ausdehnung einer SVG Grafik durch die Attribute width und height im äusseren svg-Element festgelegt. Damit wird dann auch das Koordinatensystem der Grafik (Viewport) bestimmt, dass Sie zum Platzieren der Objekte verwenden müssen.

Durch den Gebrauch des Attributs viewBox - i.d.R. im svg-Element - können Sie innerhalb der SVG Grafik ein unterschiedliches Koordinatensystem verwenden. Dieses Koordinatensystem kann z.B. größer oder kleiner sein kann als das der "normalen" SVG Grafik.

Dazu wird mit Hilfe des Attributs viewBox ein Rechteck definiert. Dieses Rechteck bestimmt eine weitere, andere Ausdehnung für die SVG Grafik und somit auch ein unterschiedliches Koordinatensystem.
In der SVG Grafik sind somit 2 Koordinatensysteme definiert.

• Zum einen das "normale" Koordinatensystem, bestimmt durch die Attribute width und height im svg-Element und
• zum anderen das "neue" Koordinatensystem, bestimmt durch das, mit dem Attribut viewBox definierte Rechteck.
  !Zur Platzierung der Objekte innerhalb der SVG Grafik muss dieses neue Koordinatensystem verwendet werden!

Das eigentliche Feature des Attributs viewBox besteht nun in der sogenannten automatic transformation. Diese bewirkt, dass ein so definiertes, "neues" Koordinatensystem beim Rendern vom User Agent automatisch auf die, im svg-Element durch width und height angegebene normale Grösse der Grafik (den "normalen" Viewport) skaliert wird.

Um den neuen Viewport der SVG Grafik festzulegen, werden dem Attribut viewBox 4 numerische Werte mitgegeben, wie z.B.: 0 0 200 100 die in der Reihenfolge von links nach rechts folgende Bedeutung haben:

1. x-Koordinate des Rechtecks, das den neuen Viewport festlegt
2. y-Koordinate des Rechtecks, das den neuen Viewport festlegt
3. Breite des Rechtecks, das den neuen Viewport festlegt
4. Höhe des Rechtecks, das den neuen Viewport festlegt

Die folgenden 3 SVG Beispiele sollen die Verwendung des Attributs viewBox im svg-Element verdeutlichen.

Im ersten "normalen" SVG Dokument wird das Attribut viewBox nicht verwendet.
Das Rechteck wird in Originalgrösse angezeigt.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<!-- das nomale Dokument - 200 Pixel breit, 100 Pixel hoch -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="100">

<!-- das Rechteck - 160 Pixel breit, 60 Pixel hoch -->
  <rect x="20" y="20" width="160" height="60"
    fill="limegreen" stroke="black" stroke-width="2px" />
</svg>
      

Im folgenden SVG Dokument werden die Werte width und height im svg-Element so gewählt, dass die Grafik um die Hälfte verkleinert wird.
Durch das Attribut viewBox wird ein Viewport definiert, der die Aussmasse des ersten Beispieldokuments hat.
Die Koordinaten des Rechtecks werden nicht verändert, da nun das Koordinatensystem des neuen Viewport im Dokument gültig ist.
Der User Agent stellt das Rechteck jetzt verkleinert dar, d.h. er skaliert den Inhalt des des virtuellen Viewports automatisch auf die "normale" Grösse des SVG-Dokuments.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<!-- das verkleinerte Dokument - 100 Pixel breit, 50 Pixel hoch -->
<!-- Verwendung von viewBox 200 Pixel breit, 50 Pixel hoch -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100" height="50"
  viewBox="0 0 200 100">

<!-- die Koordinaten und Aussmasse des Rechtecks haben sich nicht verändert -->
  <rect x="20" y="20" width="160" height="60"
    fill="limegreen" stroke="black" stroke-width="2px" />
</svg>
      

Im dritten SVG Dokument werden die Werte width und height im svg-Element wie im 2. Beispiel so gewählt, dass die Grafik um die Hälfte verkleinert wird.
Jedoch wird das Attribut viewBox nicht verwendet.
Der User Agent stellt nun lediglich einen Ausschnitt des Rechtecks dar.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<!-- das verkleinerte Dokument - 100 Pixel breit, 50 Pixel hoch -->
<!-- keine Verwendung von viewBox -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100" height="50">

<!-- die Koordinaten und Aussmasse des Rechtecks haben sich nicht verändert -->
  <rect x="20" y="20" width="160" height="60"
    fill="limegreen" stroke="black" stroke-width="2px" />
</svg>
      

Das Attribut viewBox kann ausser im svg-Element auch innerhalb weiterer Elemente, die einen neuen Viewport erzeugen, verwendet werden. Elemente, die dieses Kriterium erfüllen sind: svg, symbol (wenn es durch das Element use referenziert wird), image und foreignObject (siehe auch Kapitel Dokumentstruktur II).