Frage zum Wiki-Artikel „responsiv“

[Detlef Mietke]

Wertes Team,

wenn ich das (die) gegebenen Beispiele für responsives SVG anwende (copy and paste in eigenständige Seite), so wird die SVG-Grafik vergrößert dargestellt.

Mit den CSS-Angaben für den SVG tag mit width:100% und height:auto und der Verwendung der viewBox für den aktuellen SVG tag mit einer darzustellenden SVG-Grafik z.B. mit 480 x 280 Pixel also viewBox="0 0 500 300" ist das Ergebnis auf den horizontalen Viewport vergrößert und die Höhe proportional angepasst. Die responsive Eigenschaft besteht.

Optimal wäre es, wenn bei großem Viewport die Originalgröße der SVG-Grafik angezeigt und nur beim Verkleinern des Viewports proportional skaliert wird (responsiv). Wird für den aktuellen SVG tag mit style="height: 300px" die CSS Anweisung height:auto überschrieben, dann wird das SVG Beispiel nicht vergrößert. Die responsive Eigenschaft des SVG Inhalts besteht, allerdings bleibt die ViewBox-Höhe dann für einen verkleinerten Viewport fixiert.

Ich habe viel gesucht und versucht aber nichts Optimales gefunden. Gibt es dafür eine Lösung, wobei die vielleicht nicht konformen Eigenheiten der IE-Browser nicht zu berücksichtigen sind?

Mit freundlichem Gruß D. Mietke