Frage zum Wiki-Artikel „responsiv“

[Detlef Mietke]

Hallo Gunnar,

ja, viewBox erstellt ein neues Koordinatensystem im der SVG Darstellungsebene (Wrapper). Dein Kreisbeispiel zu verstehen bereitet mir keine Probleme.

Die Angaben im viewBox-Attribut legen das Koordinatensystem fest und haben nichts mit der dargestellten Größe der Grafik zu tun.

Für responsives Verhalten der SVG Inhalte sollte die CSS-Eigenschaft für SVG tag dann width:100% und height:auto sein und das viewBox Attribut angewendet werden. So habe ich es in diversen Erklärungen gelesen. Im SELFHtml-Wiki wird in der Texterklärung der viewBox Werte Pixel als Einheit geschrieben. Macht meines Erachtens auch Sinn. Ein Rechteck mit 500 x 200 Einheiten sollte auf einem Bildschirm in 500 x 200 Bildpunkteinheiten erscheinen und nicht bis zur maximalen Viewportausdehnung proportional vergrößert werden. In Grafikprogrammen sind oder werden die Raster in bestimmten Maßzahlen, meist Pixel eingestellt. Die Eigenschaften des Beispielrechtecks in den Dateiformaten JPG, GIF oder PNG werden im Pixelmaß angegeben.

Ein SVG Rechteck erstellt durch <rect x="0" y="0" width="500" height="200" style="fill: #ff0;"/> ohne viewBox nur im SVG tag ohne Angaben zu width und height dargestellt, erscheint wie eine gleich große Grafik im PNG-Format mit 500 x 200 (Bildschirm)-Pixel.

Zur responsiven Darstellung mit oben genannten CSS-Eigenschaften für den SVG tag und dem viewBox Attribut zur Darstellung der gesamten SVG, kein Ausschnitt und nicht auf den maximalen Viewport skaliert. Wie sollen dann die Werte in der viewBox benannt sein? Mit viewBox="0 0 500 200" wird bei großem Viewport skaliert vergrößert. Das entspricht nicht meinen Vorstellungen.

Mit den hier im Forum erhaltenen Tipps mit Angaben zu max-width im SVG tag und viewBox Attributen erhielt ich ein Ergebnis nach meinem Wunsch. Nun soll aber die Einheit Pixel (px) vermieden werden. Mit style="max-width:500px und viewBox="0 0 500, 200" ist es so, wie es mir gefällt und bei CSS muss nach den Werten eine Angabe zur Einheit folgen. Der Vergrößerungsfaktor ist max-width / width = 1.

Mit der Einheit em ist bei unveränderten Werten die SVG vergrößert, mit % zwischen 0 bis 100 wird skaliert, aber ohne ersichtliche Kontrolle hinsichtlich der SVG Größen mit 500 und 200 bei width und height. Mit Einheiten wie vw oder vmax ist es ohne zu rechnen auch nicht möglich und die Umrechnung würde über die Bildschirmeinheit Pixel erfolgen. Eine Einheitenangabe für die Werte in der viewBox ist nicht vorgesehen und müsste, wenn man eine einträgt dann für width und height gleich lauten, aber die Werte müssten sich auch je nach gewählter Einheit ändern.

Die relativen Einheiten wie em oder % für max-width machen Sinn, wenn man mit dem viewBox Attribut nur einen Ausschnitt der SVG zeigen will, ohne dass der auf den maximalen Viewport vergrößert gezeigt wird. Um das Seitenlayout nicht zu zerstören, ist dann wohl Probieren angesagt - war auch nicht mein ehemaliges Anliegen.

Oder mit den entsprechenden CSS-Eigenschaften; dann kann man auch den max- machen sowie anstatt px sinnvolle Längeneinheiten verwenden: em, rem, %, vw, vh, vmin, vmax.

Ich danke für die erhaltene Hilfe und die Anregungen, mit besten Grüßen Detlef