SVG-Viewport, SVG-Koordinaten und viewBox

Das SVG-viewBox-Attribut

Der Viewport der SVG-Grafik wird durch das viewBox-Attribut sowie width- und height-Attribute im svg-Tag angegeben und ist anders festgelegt wie der CSS-Viewport.

Eine SVG-Grafik breitet sich von ihrem Nullpunkt bis ins Unendlich aus. Das viewBox-Attribut definiert die Position und die Dimension des sichtbaren Ausschnitts der Grafik als Viereck:

+-- Nullpunkt horizontal
|
x y width height
  |
  +-- Nullpunkt vertikal

Ohne viewBox-Attribut würde die Grafik sich weder verkleinern noch vergrößern lassen und sich nicht an den verfügbaren Platz anpassen. Sprich: Ohne viewBox-Attribut würde die Grafik nicht responsiv.

SVG width und height

Ohne Angabe von width- und height-Attributen nimmt ein SVG-Element den Platz ein, der ihm zur Verfügung steht (genauso wie HTML-Elemente), auch wenn seine Objekte weniger Raum brauchen. width und height im SVG-Tag beschränken die Grafik auf den angegebenen Raum.

SVG width und height können – analog zu CSS – in em, ex, pt, cm, mm und Prozent vorgegeben werden. Wenn keine Maßeinheiten angegeben sind, gelten die Einheiten des darstellenden Systems – im Browser auf dem Monitor gelten Pixel.

<svg width="1000" height="500">
 …
</svg>

In den Grafikprogrammen liegt der Nullpunkt des SVG-Koordinatensystems i.d.R. oben links (SVG transform kann einzelnen Elementen und Gruppen innerhalb des SVG-Objekts ein eigenes individuelles Koordinatensystem geben, aber das ist eine andere Geschichte).

<rect x="20" y="20" 
      width="300" height="120" />
<circle cx="300" cy="100" r="75" />

SVG viewBox

SVG bringt hilfreiche Merkmale für ein responsives Webdesign mit. Gleich am Anfang steht das viewBox-Attribut des svg-Tags.

<svg width="600" height="200" viewBox="0 0 600 200">

Das viewBox-Attribut schafft ein Fenster zur Grafik innerhalb der HTML-Seite und verkleinert, vergrößert, verzerrt, positioniert und beschneidet das SVG-Objekt.

viewBox hat vier Parameter:

viewBox="x y width height"
         ^ ^
         | |
         Ursprung 

Versetzen wir den Ursprung der Grafik um negative Werte, verschiebt sich das Objekt nach rechts / unten aus der viewBox. Positive Werte für x / y schieben das Objekt nach links / oben. Derartige Verschiebungen sind sinnvoll, wenn eine interaktive Grafik eingespielt wird – z.B. eine Kurve – und das Umrechnen der eingesetzten Werte vereinfacht werden soll.

Vergrößern von width / height verkleinert das Objekt , Verkleinern von width / height zoomt das Objekt innerhalb der viewBox heran.

viewBox vergrößern / verkleinern

Wenn die SVG-Grafik als externe Datei in einem img-Tag geladen wird, bestimmen width- und height-Attribute des img-Tags die Abmessungen. Bei inline-SVG können Größe (Skalierung) und Position im viewBox-Attribut der SVG-Grafik bestimmt werden.

Diese Grafik ist 520 Einheiten breit und 320 Einheiten hoch – der dritte und vierte Parameter des viewBox-Attributs bestimmt das Seitenverhältnis. Die kleinere Grafik ist eine identische Kopie – verkleinert durch das viewBox-Attribut:

<svg width="500" height="300" viewBox="0 0 520 320">
<svg width="500" height="300" viewBox="0 0 1040 640">

Das viewbox-Fenster ist größer – die Grafik nimmt einen relativ kleineren Raum innerhalb des Fensters ein.

I.d.R. wird die Größe einer SVG-Grafik in HTML-Seiten eher über die width- und height-Attribute festgelegt.

SVG preserveAspectRatio

Neben viewBox gibt es das preserveAspectRatio-Attribut, das die Lage, die Größe und das Seitenverhältnis (Aspect Ratio) der Grafik innerhalb eines übergroßen Elements festlegt. preserve Aspect Ratio ist wirkungslos, solange viewBox nicht das Seitenverhältnis der Grafik diktiert. Wenn das umfassende Element ein anderes Seitenverhältnis als die Grafik hat, bestimmt preserve AspectRatio mit zwei Werten Lage und Skalierung der Grafik.

preserveAspectRatio="xMidYMid meet"

Gleich ob Hochformat oder Querform – ist die Vorgabe und zentriert die Grafik je nach Querformat oder Hochformat vertikal bzw. horizontal.

preserveAspectRatio="none"

streckt und quetscht die Grafik auf das Seitenverhältnis des umfassenden Elements.

slice

anstelle von meet wirkt wie CSS background-size: cover, passt die Grafik in beiden Dimsionen an und schneidet den Überstand ab.

Gut aufpassen auf die Groß- und Kleinschreibung von xMidYMid … kleines x, großes Y.