viewbox

[Matthias Scharwies]

Servus!

Hi, in Wiki steht:

Mittels einer automatic transformation rechnet der Browser beim Rendern das "neue" Koordinatensystem automatisch auf die im svg-Element wirklich benötigten Werte um.

Wie ist dies zu verstehen? Was sind die wirklich benötigten Werte?

In diesem Beispiel hat die SVG-Grafik eine height="200" und eine width="300". Eigentlich müsstest Du jetzt eine Grafik zeichnen, die diese Maße ausfüllt, sprich:

<svg width="300" height="200">
  <desc>Flagge Frankreichs</desc>
  <rect x="0"   y="0" width="100" height="200" fill="#0055A4" />
  <rect x="100" y="0" width="100" height="200" fill="white" />
  <rect x="200" y="0" width="100" height="200" fill="#EF4531" />  
</svg>

Du hast aber von irgendwoher eine thematisch passende Grafik, die jedoch nur 2x3px groß ist.

<svg width="300" height="200" viewbox="0 0 3 2">
  <desc>Flagge Frankreichs</desc>
  <rect x="0" y="0" width="1" height="2" fill="#0055A4" />
  <rect x="1" y="0" width="1" height="2" fill="white" />
  <rect x="2" y="0" width="1" height="2" fill="#EF4531" />  
</svg>

Anstatt alle Werte umzurechnen, kannst du einfach innerhalb deines 200x300px großen SVGs mit dem viewbox-Attribut ein neues Koordinatensystem aufmachen.

Du könntest das auch mit der transform-Funktion mühsam per Hand machen, aber das passiert automatisch:

"Mittels einer automatic transformation rechnet der Browser beim Rendern das "neue" Koordinatensystem automatisch auf die im svg-Element wirklich benötigten Werte um. "

Dieses zweite Koordinatensystem innerhalb des viebox-Attribut ist nützlich, um bereits vorhandene oder im Netz gefundene SVG-Grafiken mit anderen Dimensionen wunschgenau passend zu skalieren.

Herzliche Grüße

Matthias Scharwies