CSS, HTML und Javascript mit {stil}

SVG-Koordinaten und viewBox

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

Das SVG-Koordinatensystem hat seinen Nullpunkt oben links und zieht eine Zeichenfläche oder »Canvas« von beliebiger Größe auf, der innerhalb des Viewports mit einer bestimmten Größe angezeigt wird.

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 verleihen.

<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 520px breit und 320px hoch. 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 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.

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