SVG-Viewport, SVG-Koordinaten und viewBox

SVG Koordinatensystem – Batman-Gleichung

Das SVG-Koordinatensystem hat seinen Nullpunkt oben links und zieht mit viewBox eine Zeichenfläche von beliebiger Größe, aber mit einem bestimmten Seitenverhältnis auf. Innerhalb des umfassenden Elements wird die Grafik dann mit einer bestimmten Größe angezeigt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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
SVG viewBox Quadranten
Bei der "normalen" Einstellung viewbox="0 0 w h" liegt der sichtbare Ausschnitt im vierten Quadranten

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" />
SVK Koordinaten

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 als ein Radiant der Grafik

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.

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

ViewBox Coordinates 0 0
viewBox(0 0 600 280)
ViewBox Coordinates 0 0
viewBox(-300 -60 600 280)

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">
SVG ViewBox width/height
SVG ViewBox width/height geändert

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.
preserveAspectRatio
xMidYMid meet
preserveAspectRatio
xMidYMin meet
preserveAspectRatio
xMidYMax meet
preserveAspectRatio
xMidYMid slice
preserveAspectRatio
xMaxYMid slice
preserveAspectRatio
none
preserveAspectRatio
xMidYMid meet
preserveAspectRatio
xMinYMin meet
preserveAspectRatio
none

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