nicht angemeldet
Hallo Matthias,
danke für Deine Geduld. Ich füge hier mal meine Testseite ein und beschreibe daran, was ich meine. Der Viewport ist in meinem Webprojekt auf 62em mit Zentrierung im Browserfenster vorgegeben. Wird das Browserfenster verkleinert, so soll der Seiteninhalt automatisch skaliert werden, sich responsiv verhalten.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Test.svg</title>
<style>
body {max-width:62em;margin:0 auto;overflow-y:scroll;}
main {background: #ddd;}
svg {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<main>
<h1>Test responsiv SVG</h1>
<svg style="max-width:500px" viewBox="0 0 500 200">
<rect x="0" y="0" width="500" height="200" style="fill: #ff0;" />
<rect x="50" y="50" width="100" height="100" style="fill: #0ff;" />
</svg>
<p>Textzeile nach dem Grafikbereich</p>
</main>
</body>
</html>
Das SCG Beispiel hat eine Fläche von 500 x 200 Bildschirmeinheiten, als PNG-Grafik sind das 500 x 200 Pixel. Im Seitenlayout (großer Viewport beim Nutzer) soll die SVG in dieser Größe angezeigt werden, aber responsives Verhalten haben, wenn der Nutzer seinen Viewport verkleinert oder einen kleineren besitzt.
Ohne max-width ist das Verhalten responsiv, die SVG wird allerdings im Seitenlayout vergrößert, ist von mir nicht gewünscht. Mit dem CSS-Style max-width:500px - eine Einheitenangabe ist ja notwendig - entspricht die Darstellung der SVG meinem Wunsch.
Pixel (px) Einheiten sollen nun nicht sein, also z. B. dann em oder %. Bei max-width:30em oder rund 50% ist das Layout nahe meinem Wunsch. Der Vergrößerungsfaktor ist die Division der Angabe width:100% das sind für das Seitenbeispiel 62em durch width=500 dem Wert aus der viewBox. Ist die Einheit Pixel, so ist der Vergrößerungsfaktor 1, die SVG erscheint in ihrer nativen (Original)-Größe. Bei der Verwendung relativer Einheiten muss man entweder umständlich rechnen oder einen passenden Wert durch Probieren ermittelln. Die Berechnung würde aber wieder nur über die Einheit Bildpunkt=Pixel gehen.
Mit dem Vorschlag aus dem Forum max-width zu verwenden hatte ich eine gut passende Lösung erhalten. Der Hinweis die absolute Einheit px nicht zu verwenden und dafür eine der anderen relativen Einheiten zu verwendet hat in meinen Versuchen zu keiner so gut umzusetzenden Lösung geführt.
Soll mit dem viewBox Attribut nur ein bestimmter Ausschnitt der SVG gezeigt werden z.B. viewBox="0 0 150 200", muss für den Vergrößerungsfaktor=1 für max-width:150px stehen. Mit relativen Einheiten finde ich nur durch Probieren einen passenden Wert, damit das Seitenlayout von der sonst wieder skalierten SVG nicht durchbrochen wird und die native Höhe von 200 Bildschirmeinheiten erhalten bleibt. Eine mathematisch exakte Berechnung ist möglich, aber viel zu umständlich. Den Werten in der viewBox sind keine Einheiten zugeordnet, aber bei Umrechnungen sind es Bildschirmeinheiten=Pixel.
In (m)einem Webprojekt würden auf einer Seite sicherlich mehr als eine SVG eingebunden sein, daher sollte das Erstellen des Layouts einfach nachvollziehbar sein und nicht auf Probieren beruhen. Ein Vergrößerungsfaktor hat keine Benennung (Einheit), also können auch nur gleichartig benannte Werte für max-width und width (der viewBox) miteinander verrechnet werden. Die Werte der viewBox scheinen mit der nicht angegebenen Einheit Pixel verbunden zu sein.
Für ein schönes Wochenende und mit freundlichen Grüßen Detlef
[Vollzitat entfernt]
Matthias Scharwies
Gunnar Bittersmann
Matthias Apsel
Julius