ThomasM: Scalieren einer SVG-Grafik1

Beitrag lesen

Hallo Rolf,

möchtest Du mir einreden, dass man eine SVG-Grafik nur scalieren kann,
wenn man ihren Content umschreibt ... ? ... nee,  ne ...

Du kannst die Grafik natürlich mit den Bordmitteln des jeweiligen Viewers/Browsers skalieren. Wenn die Grafik dagegen in ein bestimmtes Fenster geladen werden soll (also mittels object, iframe oder embed) und in der Grafik feste Angaben stehen, dann ist eben eine feste Breite von 800px unflexibel gegenüber einer Angabe von 400px beim zuständigen Fensterobjekt. Dann passt der Inhalt nicht vollständig hinein und skaliert nicht aus "eigener Kraft". Wird dagegen mittels viewBox zwischen den internen und externen Koordinaten vermittelt, dann kann die Grafik sich flexibel an die "Außenwelt" anpassen. Genau das ist die Aufgabe von viewBox!

Beispiel PSE mit viewBox="0 0 620 540"

Ansonsten tauchen width="1797" und height="1796" genau 40 mal in der Datei auf.
Und genau so groß wird sie auch im Browser dargestellt.

Das sagte ich ja bereits.

Schreibe in die Grafik:

<svg ... viewBox="0 0 1797 1796" width="100%" height="100%">  
...  
</svg>

Nun werden die internen Koordinaten auf die viewBox bezogen, aber beim Einbinden passt sich das Dokument fließend an die Umgebung an.

Andere SVG-Dateien haben andere Wiederholungsraten für width und height.
Das Format wurde offensichtlich von Leuten festgelegt, denen EDV ein Buch
mit sieben Siegeln ist und die Mathe im ABI-Kurs abgewählt hatten.

Das kann sein, wobei man ja die Intention der Ersteller nicht kennt. Vielleicht wurden die Daten aus anderen Formaten konvertiert bzw. nicht für den Browsereinsatz optimiert ...

Grüße,
Thomas