viewbox

[Dietrich der Anfänger]

Hallo, Zitat:

Durch den Gebrauch des Attributs viewBox - i.d.R. im svg-Element - können Sie innerhalb der SVG Grafik ein unterschiedliches Koordinatensystem verwenden. Dieses Koordinatensystem kann z.B. größer oder kleiner sein kann als das der "normalen" SVG Grafik.

Leider habe ich noch keine verständliche Erklärung gefunden, wofür ein zweites Koordinatensysem sinnvoll ist. Hat jemand eine verständliche Erklärung und ein Beispiel? Danke Didi

[Matthias Scharwies]

Servus!

Hallo, Zitat:

Durch den Gebrauch des Attributs viewBox - i.d.R. im svg-Element - können Sie innerhalb der SVG Grafik ein unterschiedliches Koordinatensystem verwenden. Dieses Koordinatensystem kann z.B. größer oder kleiner sein kann als das der "normalen" SVG Grafik.

Leider habe ich noch keine verständliche Erklärung gefunden, wofür ein zweites Koordinatensysem sinnvoll ist.

Hat jemand eine verständliche Erklärung und ein Beispiel?

Hier im Wiki unter viewbox.

In SVG kannst Du eine beliebig große oder kleine Grafik verwenden, die dann verlustfrei skaliert wird.

In diesem Beispiel ist das Koordinatensystem der SVG-Grafik nur 2x3px groß, wird durch die Angabe von width und height aber verlustfrei auf 200x300px skaliert.

Mit diesem zweiten Koordinatensystem kannst Du vorhandene oder im Netz gefundene, sehr große SVG-Grafiken passend herunterskalieren.

Danke Didi

Herzliche Grüße

Matthias Scharwies

[Dietrich der Anfänger]

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?

[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

[Dietrich der Anfänger]

Verstanden! Danke Didi

[Gaby]

Moin, zufällig bin ich auf diesen Beitrag gestoßen und habe gleich eine Verständnisfrage. Warum muss hier

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

in der viewbxox . . 3 2 angegeben werden, damit das Bild die Größe 300/200 annimmt?

Schöne Grüße Gaby

[Richard Rüfenacht]

Hallo Gaby

zufällig bin ich auf diesen Beitrag gestoßen und habe gleich eine Verständnisfrage. Warum muss hier ... in der viewbxox . . 3 2 angegeben werden, damit das Bild die Größe 300/200 annimmt?

Das viewbox-Attribut bezieht sich auf die Originalgrösse der SVG-Grafik von 3 x 2 pixel. Diese Viewbox wird dann auf 300 x 200 pixel skaliert.

Dieses Vorgehen ist in SVG zwar möglich, aber nicht unbedingt sinnvoll. Eine SVG-Vektorgrafik ist von sich aus beliebig und verlustfrei skalierbar.

Das Beispiel im Wicki bezieht sich explizit auf das viewbox-Attribut.

Mit besten Grüssen
Richard

[Gunnar Bittersmann]

@@Richard Rüfenacht

Das viewbox-Attribut bezieht sich auf die Originalgrösse der SVG-Grafik von 3 x 2 pixel.

Bei einer Vektorgrafik hier Pixel ins Spiel zu bringen ist wohl dem Verständnis eher hinderlich. Es sind keine Pixel, sondern Längeneinheiten, auf die sich die Koordinaten der Elemente der SVG-Grafik beziehen.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Richard Rüfenacht

Das viewbox-Attribut bezieht sich auf die Originalgrösse der SVG-Grafik von 3 x 2 pixel.

Bei einer Vektorgrafik hier Pixel ins Spiel zu bringen ist wohl dem Verständnis eher hinderlich. Es sind keine Pixel, sondern Längeneinheiten, auf die sich die Koordinaten der Elemente der SVG-Grafik beziehen.

Ja, aber ... Sara Soueidan verwendet die Begriffe user units und "px"

"In SVG, values can be set with or without a unit identifier. A unitless value is said to be specified in user space using user units. If a value is specified in user units, then the value is assumed to be equivalent to the same number of “px” units."

Trotzdem muss die Erklärung im Wiki so verfeinert werden, dass diese Thematik besser verstanden wird.

LLAP 🖖

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Bei einer Vektorgrafik hier Pixel ins Spiel zu bringen ist wohl dem Verständnis eher hinderlich. Es sind keine Pixel, sondern Längeneinheiten, auf die sich die Koordinaten der Elemente der SVG-Grafik beziehen.

Ja, aber ... Sara Soueidan verwendet die Begriffe user units und "px"

"In SVG, values can be set with or without a unit identifier. A unitless value is said to be specified in user space using user units. If a value is specified in user units, then the value is assumed to be equivalent to the same number of “px” units."

Die Uni Münster schreibt :

Sie wissen, was ein Pixel ist? Nun, ein Pixel wird als so etwas wie das kleinste Element, das Atom, eines Bildes angesehen. Es kann ein Punkt auf dem Bildschirm, ein winziger Farbfleck auf dem Papier oder die Zelle in einem Bildsensor sein.

Ich denke, das trifft es auch für eine SV-Grafik.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Die Uni Münster schreibt :

Sie wissen, was ein Pixel ist? Nun, ein Pixel wird als so etwas wie das kleinste Element, das Atom, eines Bildes angesehen. Es kann ein Punkt auf dem Bildschirm, ein winziger Farbfleck auf dem Papier oder die Zelle in einem Bildsensor sein.

Ich denke, das trifft es auch für eine SV-Grafik.

Nein. „Pixel“ macht Sinn bei Rastergrafiken, auch bei manchen Druckern.

„Pixel“ macht keinen Sinn bei Plottern. Allgemein nicht bei Pfad-basierten Vektorgrafiken.

Möglicherweise gibt es einen Kontext (wenngleich mir gerade keine einfällt), in dem ein Browser nicht weiß, wie er denn ein SVG darstellen so, wenn weder width-/height-Attribute angegeben sind noch per Stylesheet eine Regel festgelegt ist. Das mag ein UA das innere Koordinatensystem der viewBox in Pixel übersetzen.

Aber keineswegs andersrum, dass „Pixel“ irgendeine Bedeutung fürs innere Koordinatensystem hätte.

LLAP 🖖

[beatovich]

hallo

„Pixel“ macht keinen Sinn bei Plottern. Allgemein nicht bei Pfad-basierten Vektorgrafiken.

So nebenbei: Inkscape speichert Pixel-Koordinaten standardmässig mit bis zu 8 Nachkommastellen. Das kann man aber bei den Einstellungen ändern, und dadurch die Datenmenge eines Pfades auf einen Drittel schrumpfen ohne dass die Quualität leidet.

[Richard Rüfenacht]

Hallo Matthias

... ein Pixel ... kann ein Punkt auf dem Bildschirm, ein winziger Farbfleck auf dem Papier oder die Zelle in einem Bildsensor sein.

Ich denke, das trifft es auch für eine SV-Grafik.

Bei SVG sind Pixel Längenangaben. Es wird mit Pixeln gerechnet, falls keine andere Einheit bestimmt wird, was aber am Prinzip auch nichts ändert, weil dann ein DPI-Wert erforderlich ist.

Bei Vektorgrafiken geht es um die Verhältnisse der einzelnen Längenangaben unter einander, nicht um die verwendeten Einheiten, wie Pixel.

Mit besten Grüssen
Richard

[Gunnar Bittersmann]

@@Matthias Scharwies

Das viewbox-Attribut bezieht sich auf die Originalgrösse der SVG-Grafik von 3 x 2 pixel.

Bei einer Vektorgrafik hier Pixel ins Spiel zu bringen ist wohl dem Verständnis eher hinderlich. Es sind keine Pixel, sondern Längeneinheiten, auf die sich die Koordinaten der Elemente der SVG-Grafik beziehen.

Ja, aber ... Sara Soueidan verwendet die Begriffe user units und "px"

"In SVG, values can be set with or without a unit identifier. A unitless value is said to be specified in user space using user units. If a value is specified in user units, then the value is assumed to be equivalent to the same number of “px” units."

Nichts aber. Da ging es um etwas ganz anderes, nämlich dass width="800" und width="800px" dasselbe ist. Das hat überhaupt nichts mit viewBox zu tun.

LLAP 🖖

[Gunnar Bittersmann]

@@Gaby

Warum muss hier

<svg width="300" height="200" viewbox="0 0 3 2">

in der viewbxox . . 3 2 angegeben werden, damit das Bild die Größe 300/200 annimmt?

Muss man nicht. Die Größe der Darstellung wird durch width="300" height="200" festgelegt.

Die Angaben in viewBox (CamelCase^[1]) geben ein inneres Koordinatensystem an. Die Angaben

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

beziehen sich auf dieses Koordinatensystem.

Das letzte der Rechtecke bspw. hat seine linke obere Ecke bei zwei Drittel der Breite (x="2", ViewBox geht von 0 bis 3) am oberen Rand (y="0", ViewBox geht von 0 bis 2), hat die Breite von von einem Drittel der ViewBox-Breite (width="1", ViewBox-Breite ist 3) und füllt die volle Höhe aus height="2", ViewBox-Höhe ist 2). Das Rechteck füllt also das rechte Drittel der Grafik aus.

LLAP 🖖

---

1. wenn SVG nicht gerade in den HTML-Kontext gebracht wird; XML ist case-sensitiv ↩︎

[Gaby]

Moin, wenn in der Viexbox nur noch einmal das angegeben wird, was darunter im Detail steht, ist die Angabe dann nicht überflüssig?

[Gunnar Bittersmann]

@@Dietrich der Anfänger

Durch den Gebrauch des Attributs viewBox - i.d.R. im svg-Element - können Sie innerhalb der SVG Grafik ein unterschiedliches Koordinatensystem verwenden. Hat jemand eine verständliche Erklärung und ein Beispiel?

Sara Soueidan hat: Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio

LLAP 🖖

[Mitleser]

Hallo, Warum verkleinert sich ein Bild, wenn man die viewbox vergrößert? Ih hätte erwartet, dass es umgekehrt ist.

[Julius]

Hallo Mitleser,

Warum verkleinert sich ein Bild, wenn man die viewbox vergrößert?

du vergrößerst das Koordinatensystem, belässt aber Positions- und Größenangaben auf dem alten Stand. Dadurch werden diese gegenüber der Viewbox kleiner.

Gruß
Julius

[Mitleser]

Hallo Julius

Warum verkleinert sich ein Bild, wenn man die viewbox vergrößert?

du vergrößerst das Koordinatensystem, belässt aber Positions- und Größenangaben auf dem alten Stand. Dadurch werden diese gegenüber der Viewbox kleiner.

Sie werden gegenüber der Viewbox kleiner, die viewbox wird aber größer, also gleicht sich dies doch aus?

Bei den Viewboxen habe ich noch nie eine Maßangabe gesehen. Ist diese immer px?

[Julius]

Hallo Mitleser,

Sie werden gegenüber der Viewbox kleiner, die viewbox wird aber größer, also gleicht sich dies doch aus?

Anscheinend nicht: https://codepen.io/jcm/full/dvNwbB/

Gruß
Julius

[Gunnar Bittersmann]

@@Mitleser

Warum verkleinert sich ein Bild, wenn man die viewbox vergrößert?

Lass dir mal „Viewbox“ auf der Zunge zergehen: ein Kasten, durch den du auf die Welt schaust.

In dem Kasten siehst du bspw. Europa. Jetzt machst du den Kasten (die Viewbox) größer. Dann siehst du auch noch Asien und Afrika in deinem Kasten. Das Bild (die Landkarte) soll aber auf dieselbe Fläche passen wie vorher, als nur Europa zu sehen war. Das Bild muss also verkleinert werden.

LLAP 🖖

[Mitleser]

Hi! Offensichtlich habe ich ein Blackout!

Das Bild (die Landkarte) soll aber auf dieselbe Fläche passen wie vorher, als nur Europa zu sehen war. Das Bild muss also verkleinert werden.

Warum soll das Bild auf dieselbe Fläche passen?

[Matthias Scharwies]

Servus!

Hi! Offensichtlich habe ich ein Blackout!

Das Bild (die Landkarte) soll aber auf dieselbe Fläche passen wie vorher, als nur Europa zu sehen war. Das Bild muss also verkleinert werden.

Warum soll das Bild auf dieselbe Fläche passen?

Manchmal willst du einen Stadtplan mit der Umgebung deiner Stammkneipe zeigen, manchmal aber auch die gesamte Erde.

Mit den viewbox-Attribut kannst du beliebig zoomen und durch Veränderung von x und y (den ersten beiden der vier Werte) auch verschieben.

Eine Animation der viewbox-Werte würde eine Kamerafahrt ermöglichen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Eine Animation der viewbox-Werte würde eine Kamerafahrt ermöglichen.

Aus Performane-Gründen sollte man dabei aber womöglich mehr machen als nur die Viewbox zu ändern:

• nicht sichtbare Teile aus dem DOM nehmen
• im sichtbaren Bereich levels of detail festlegen und nicht erkennbare Teile aus dem DOM nehmen

LLAP 🖖

[Mitleser]

.... und durch Veränderung von x und y (den ersten beiden der vier Werte) auch verschieben.

Hallo Matthias, ich werde immer verwirrter: Eine Verschiebung entsteht auch, wenn man einen der beiden letzten Werte ändert. Eine Logik kann ich jetzt gar nicht mehr erkennen. Gruß

[Gunnar Bittersmann]

@@Mitleser

.... und durch Veränderung von x und y (den ersten beiden der vier Werte) auch verschieben.

ich werde immer verwirrter: Eine Verschiebung entsteht auch, wenn man einen der beiden letzten Werte ändert.

Da sollte eher eine Skalierung entstehen.

Eine Logik kann ich jetzt gar nicht mehr erkennen.

Die ersten beiden Werte sind die Koordinaten (x, y) der linken oberen Ecke; die letzten beiden die Ausmaße (Breite, Höhe) der Viewbox.

LLAP 🖖

[Mitleser]

Es wurde oben geschrieben, dass durch Änderung der ersten beiden Werten eine Verschiebung entstünde. Eine solche entsteht aber offensichtlich auch, wenn man einen der beiden letzten Werte ändert.

[Gunnar Bittersmann]

@@Mitleser

Es wurde oben geschrieben, dass durch Änderung der ersten beiden Werten eine Verschiebung entstünde. Eine solche entsteht aber offensichtlich auch, wenn man einen der beiden letzten Werte ändert.

Ich hab da mal was gebastelt: svg viewBox demo.

Wenn Breite und Höhe der Viewbox geändert werden, ist zu sehen, dass die Änderung eine Skalierung bewirkt.

Wenn nur eins davon geändert wird (Kopplung rausnehmen), kann es in manchen Bereichen der Skala so aussehen als würde das eine Verschiebung bewirken.

LLAP 🖖