SVG-Koordinaten und viewBox

Die Batman-Gleichung im SVG Koordinatensystem //mathworld.wolfram.com/BatmanCurve.html

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.

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

Ohne Angaben von width und height 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.

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>

SVG width und height können auch – analog zu CSS – in em, ex, pt, cm, mm und Prozent vorgegeben werden.

Der Nullpunkt des SVG-Koordinatensystems liegt oben links (nicht unten links wie in Inkscape!). SVG transform kann einzelnen Elementen und Gruppen innerhalb des SVG-Objekts ein eigenes individuelles Koordinatensystem geben.

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

SVG viewBox

<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 – Fenster zur 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 vergrößern / verkleinern

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">
CIE Farbraum 3D
CIE Farbraum 3D

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 skalieren

Zwar kann das viewBox-Attribut eine Grafik vergrößern oder verkleinern, aber am einfachsten skaliert man die SVG-Grafik über das width- und height-Attribut.

CIE Farbraum 3D
CIE Farbraum 3D
<svg width="100%" height="100%" viewBox="0 0 520 320">
<svg width="50%" height="50%" viewBox="0 0 520 320">

width="100%" height="100%" zeigt die Grafik immer in voller Breite bzw. Höhe des umfassenden Blocks. Dumm ist nur, dass dabei mit allen IE-Browsern ein padding unter und über der Grafik bzw. rechts und links der Grafik entsteht.

preserveAspectRatio und viewBox

Neben viewBox gibt es das preserveAspectRatio-Attribut, das die Lage, die Größe und das Seitenverhältnis der Grafik innerhalb eines übergroßen Elements festlegt. preserveAspectRatio ist wirkungslos, solange viewBox nicht das Seitenverhältnis der Grafik diktiert. Wenn das umfassende Element ein anderes Seitenverhältnis als die Grafik hat, bestimmt preserveAspectRatio 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.

Die Batman-Gleichung im Koordinatensystem //mathworld.wolfram.com/BatmanCurve.html (0,y)(x,0)(-x,0)(0,-y)-1,4-21,421,42-1,4-22,82,8-2,8-2,8-4,24,2-4,2 0,0 50 100 150 200 250 300 350 400 450 500 550 50 100 150 <svg viewBox="0 0 100 100"> -100,-100 <svg viewBox="-100 -100 90 90"> 90,90 0,0 0,0 100,100 CIE Farbraum 3D Y X Z 20 40 60 80 100