SVG viewBox und Koordinaten in Python

Kurze Antwort: Um SVG-Koordinaten in Python zu steuern, laden oder erstellen Sie ein SVGDocument und setzen width, height und viewBox am SVG-Wurzelelement mit set_attribute(). width und height bestimmen die sichtbare Ausgabegröße. viewBox wählt, welches Koordinatenrechteck gezeigt wird, und SVG skaliert dieses Koordinatensystem nach oben oder unten, damit es den Ansichtsbereich ausfüllt.

1from aspose.svg import SVGDocument
2
3with SVGDocument() as document:
4    svg = document.root_element
5    svg.set_attribute("width", "300")
6    svg.set_attribute("height", "150")
7    svg.set_attribute("viewBox", "0 0 100 50")
8    document.save("viewbox.svg")

In diesem Artikel lernen Sie, wie Sie:

width, height und viewBox am SVG-Wurzelelement setzen;
verstehen, wie SVG-Koordinaten dem sichtbaren Ansichtsbereich zugeordnet werden;
skalierbare SVG-Ausgabe mit einem stabilen Koordinatensystem erstellen;
abgeschnittene, verzerrte oder unerwartet skalierte generierte Grafik vermeiden.

Am einfachsten ist viewBox, wenn Sie Zeichnung und Ausgabefläche getrennt betrachten. Die SVG-Zeichenfläche ist der Koordinatenraum, in dem Formen platziert werden. Der Ansichtsbereich ist die sichtbare Ausgabefläche, normalerweise durch width und height definiert. viewBox sagt: “Zeige dieses Rechteck der SVG-Zeichenfläche im Ansichtsbereich und skaliere dieses Rechteck so, dass es den Ansichtsbereich ausfüllt.”

Das Attribut viewBox hat vier Werte: min-x, min-y, width und height. Zum Beispiel bedeutet viewBox="0 0 100 50": Beginne bei Koordinate (0, 0), zeige 100 Koordinateneinheiten horizontal und 50 Koordinateneinheiten vertikal. Wenn der Ansichtsbereich 300x150 ist, wird dieses 100x50-Koordinatensystem dreifach vergrößert, damit es die sichtbare Fläche ausfüllt. Die gerenderte Größe kann auch 600x300 oder jede andere proportionale Größe sein; dieselben Koordinaten werden dann erneut passend skaliert.

viewBox-Grundlagen

Attribut	Beispiel	Bedeutung
`width`	`300`	Die sichtbare Ausgabebreite, zum Beispiel 300 Bildschirmpixel oder CSS-Einheiten
`height`	`150`	Die sichtbare Ausgabehoehe
`viewBox`	`0 0 100 50`	Das Koordinatenrechteck, das auf den Ansichtsbereich skaliert wird
`preserveAspectRatio`	`xMidYMid meet`	Wie Grafik ausgerichtet und skaliert wird, wenn Seitenverhältnisse abweichen

Ein Benutzerkoordinatensystem ist einfach das Koordinatensystem, das Ihre Formen nach Anwendung von viewBox verwenden. Hat ein Rechteck x="10" und width="80", werden diese Werte in viewBox-Einheiten gemessen, nicht direkt in Bildschirmpixeln. Mit width="300" height="150" viewBox="0 0 100 50" skaliert SVG das Benutzerkoordinatensystem nach oben: Eine viewBox-Einheit wird zu 3 gerenderten Einheiten in beide Richtungen. Wäre die viewBox größer als der Ansichtsbereich, würde derselbe Mechanismus die Zeichnung verkleinern.

SVG viewBox in Python setzen

Verwenden Sie diesen Workflow, wenn generierte SVG-Grafik vorhersehbare Koordinaten und einen klaren sichtbaren Bereich braucht:

Erstellen oder laden Sie ein SVGDocument.
Holen Sie das SVG-Wurzelelement über document.root_element.
Setzen Sie Wurzelattribute wie width, height und viewBox mit set_attribute().
Fügen Sie Formen hinzu oder aktualisieren Sie sie mit Koordinaten, die innerhalb des viewBox-Rechtecks liegen.
Speichern Sie das SVG mit document.save() und prüfen Sie, dass keine Grafik abgeschnitten wird.

SVG-Grafik mit kleinerer viewBox vergrößern

Ein häufiges Muster ist, einfache Zeichenkoordinaten beizubehalten und trotzdem ein größeres Bild zu rendern. Das folgende Beispiel verwendet einen 300x150-Ansichtsbereich mit einer 100x50 viewBox und zeichnet dann ein Rechteck in viewBox-Koordinaten. Das Rechteck ist als 80x30 Koordinateneinheiten definiert, erscheint aber als 240x90 gerenderte Einheiten, weil der Ansichtsbereich in beiden Richtungen dreimal größer ist als die viewBox.

 1import os
 2from aspose.svg import SVGDocument
 3
 4SVG_NS = "http://www.w3.org/2000/svg"
 5
 6output_folder = "output/"
 7output_path = os.path.join(output_folder, "svg-viewbox-fixed.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "300")
13    svg.set_attribute("height", "150")
14    svg.set_attribute("viewBox", "0 0 100 50")
15
16    rect = document.create_element_ns(SVG_NS, "rect")
17    rect.set_attribute("x", "10")
18    rect.set_attribute("y", "10")
19    rect.set_attribute("width", "80")
20    rect.set_attribute("height", "30")
21    rect.set_attribute("rx", "4")
22    rect.set_attribute("fill", "#2e86de")
23    svg.append_child(rect)
24
25    document.save(output_path)

Die Ausgabe behält die Proportionen des Rechtecks, weil das Verhältnis des Ansichtsbereichs 300:150 zum Verhältnis der viewBox 100:50 passt. SVG vergrößert das Benutzerkoordinatensystem auf der x- und y-Achse um denselben Faktor. Dadurch wird das Rechteck auf dem Bildschirm größer, bleibt aber proportional. In der Praxis können Sie ein Icon, Chart oder Diagramm mit bequemen kleinen Zahlen entwerfen und es in größerer Größe rendern, ohne jede Koordinate neu zu schreiben.

Die Abbildung vergleicht dasselbe Rechteck im gleichen gerenderten 300x150-Ansichtsbereich. Teil (a) verwendet viewBox="0 0 300 150"; eine Koordinateneinheit entspricht einer gerenderten Einheit und das 80x30-Rechteck bleibt klein. Teil (b) verwendet viewBox="0 0 100 50"; SVG vergrößert das kleinere Koordinatensystem dreifach, damit es denselben Ansichtsbereich ausfüllt. Das Rechteck verwendet dieselben Codewerte, erscheint aber deutlich größer.

SVG-viewBox-Vergleich, bei dem Teil a viewBox 0 0 300 150 nutzt und ein kleines Rechteck zeigt, waehrend Teil b viewBox 0 0 100 50 nutzt und dasselbe Rechteck vergrößert darstellt

Sichtbaren Koordinatenbereich verschieben

Die ersten beiden viewBox-Werte dürfen negativ oder ungleich null sein. Sie verschieben nicht eine einzelne Form. Sie verschieben das sichtbare Koordinatenfenster über der SVG-Zeichenfläche. Das ist nützlich, wenn generierte Grafik Koordinaten um einen Mittelpunkt verwendet oder wenn Sie Raum um eine Form brauchen, deren Koordinaten den Nullpunkt kreuzen.

Im nächsten Beispiel platziert viewBox="-60 -60 120 120" die Koordinate (0, 0) in die Mitte des quadratischen Ansichtsbereichs. Der sichtbare Bereich beginnt bei x=-60, y=-60 und erstreckt sich 120 Einheiten nach rechts und 120 Einheiten nach unten.

 1import os
 2from aspose.svg import SVGDocument
 3
 4namespace_uri = "http://www.w3.org/2000/svg"
 5
 6output_folder = "output/"
 7output_path = os.path.join(output_folder, "svg-viewbox-shifted.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "240")
13    svg.set_attribute("height", "240")
14    svg.set_attribute("viewBox", "-60 -60 120 120")
15
16    x_axis = document.create_element_ns(namespace_uri, "line")
17    x_axis.set_attribute("x1", "-50")
18    x_axis.set_attribute("y1", "0")
19    x_axis.set_attribute("x2", "50")
20    x_axis.set_attribute("y2", "0")
21    x_axis.set_attribute("stroke", "#0071aa")
22    x_axis.set_attribute("stroke-width", "3")
23    svg.append_child(x_axis)
24
25    marker = document.create_element_ns(namespace_uri, "circle")
26    marker.set_attribute("cx", "0")
27    marker.set_attribute("cy", "0")
28    marker.set_attribute("r", "25")
29    marker.set_attribute("fill", "#00aaaa")
30    marker.set_attribute("stroke", "#006863")
31    marker.set_attribute("stroke-width", "5")
32    svg.append_child(marker)
33
34    document.save(output_path)

Hier liegt der Mittelpunkt des sichtbaren Bereichs bei Koordinate (0, 0). Die horizontale Achse laeuft von x=-50 bis x=50, und der Kreis ist exakt auf dem Ursprung zentriert. Dieses Muster eignet sich für Icons, Marker, Polardiagramme und generierte Symbole, die sich leichter um einen Mittelpunkt berechnen lassen.

Die Abbildung vergleicht zwei Moeglichkeiten, einen Kreis mit Mittelpunkt bei Koordinate (0, 0) zu zeigen. Teil (a) verwendet viewBox="0 0 240 240"; damit liegt (0, 0) in der oberen linken Ecke und ein grosser Teil des Kreises wird außerhalb des Ansichtsbereichs abgeschnitten. Teil (b) verwendet viewBox="-60 -60 120 120"; der sichtbare Koordinatenbereich beginnt bei (-60, -60) und endet bei (60, 60). Dadurch liegt (0, 0) in der Mitte des Ansichtsbereichs und der ganze Kreis wird sichtbar.

SVG-viewBox-Vergleich, bei dem Teil a viewBox 0 0 240 240 nutzt und einen bei 0 0 zentrierten Kreis abschneidet, waehrend Teil b viewBox -60 -60 120 120 nutzt und den Kreis zentriert

Häufige Fehler und Lösungen

Problem	Warum es passiert	Lösung
SVG erscheint leer	Alle sichtbaren Elemente liegen außerhalb des durch `viewBox` definierten Koordinatenrechtecks. Ein Kreis bei `cx="200"` ist zum Beispiel in `viewBox="0 0 100 100"` nicht sichtbar.	Verschieben Sie die Elemente in den viewBox-Bereich oder vergrößern Sie `width`, `height`, `min-x` und `min-y` der viewBox, damit die Elemente im sichtbaren Koordinatenbereich liegen.
Grafik wird abgeschnitten	Das Element liegt nur teilweise innerhalb der viewBox. SVG zeigt den Teil innerhalb des sichtbaren Koordinatenrechtecks und blendet den Rest aus.	Erweitern Sie die viewBox oder verschieben Sie sie mit `min-x` und `min-y`, damit die ganze Form sichtbar ist.
Grafik wirkt größer als erwartet	Die viewBox-Breite und -Hoehe sind kleiner als der Ansichtsbereich; dadurch entsteht ein Zoom-in-Effekt.	Verwenden Sie eine größere viewBox oder verringern Sie die gerenderten Werte `width` und `height`.
Grafik wirkt kleiner als erwartet	Die viewBox-Breite und -Hoehe sind größer als der Ansichtsbereich; dadurch entsteht ein Zoom-out-Effekt.	Verwenden Sie eine kleinere viewBox oder erhoehen Sie die gerenderten Werte `width` und `height`.
Ausgabe wirkt verzerrt	Das Seitenverhältnis des Ansichtsbereichs passt nicht zum Seitenverhältnis der viewBox. Zum Beispiel haben `300x150` und `100x100` unterschiedliche Proportionen.	Verwenden Sie passende Proportionen oder setzen Sie `preserveAspectRatio` bewusst.
Koordinaten sind schwer zu verwalten	Die viewBox passt nicht dazu, wie Sie über die Zeichnung denken.	Wählen Sie ein bequemes Koordinatensystem, etwa `0 0 100 100` für Icons oder negative bis positive Koordinaten für symmetrische Formen.
Kontur wird am Rand abgeschnitten	Die Form selbst passt hinein, aber die Kontur wird halb innerhalb und halb außerhalb der Formgrenze gezeichnet. Ein Kreis direkt am viewBox-Rand kann einen Teil seiner Kontur verlieren.	Lassen Sie zusaetzlichen Abstand innerhalb der viewBox oder verschieben Sie die Form mindestens um die halbe `stroke-width` vom Rand weg.

FAQ

Was bedeutet SVG viewBox?

viewBox definiert, welcher rechteckige Koordinatenbereich der SVG-Zeichenfläche im SVG-Ansichtsbereich angezeigt wird. In viewBox="0 0 100 50" beginnt der sichtbare Bereich bei (0, 0) und umfasst 100 Einheiten in der Breite und 50 Einheiten in der Hoehe. SVG skaliert diesen 100x50-Koordinatenbereich anschließend nach oben oder unten, damit er den gerenderten Ansichtsbereich ausfüllt.

Was ist der Unterschied zwischen Ansichtsbereich und viewBox?

Der Ansichtsbereich ist die sichtbare Ausgabefläche, definiert durch width und height. Die viewBox ist das Koordinatenrechteck, das in diese sichtbare Fläche abgebildet wird. Eine tiefere SVG-Erklaerung finden Sie in SVG Coordinate Systems and Units und SVG viewBox.

Ändern width und height die SVG-Koordinaten?

Nein. width und height steuern die gerenderte Größe des Ansichtsbereichs. Die viewBox steuert den Koordinatenbereich, den Formen, Text und Pfade verwenden. Ein Kreis mit cx="50" verwendet weiterhin Koordinate 50, egal ob das SVG 100 Pixel oder 1000 Pixel breit gerendert wird.

Warum lässt eine kleinere viewBox SVG-Grafik größer wirken?

Eine kleinere viewBox zeigt einen kleineren Koordinatenbereich und passt ihn in denselben Ansichtsbereich ein. Wenn zum Beispiel viewBox="0 0 50 50" in einen 200x200-Ansichtsbereich eingepasst wird, belegt jede Koordinateneinheit mehr gerendeten Raum als bei viewBox="0 0 200 200" im selben Ansichtsbereich.

Warum lässt eine größere viewBox SVG-Grafik kleiner wirken?

Eine größere viewBox zeigt mehr Koordinatenraum im selben Ansichtsbereich. Der Renderer muss mehr Zeichenfläche in dieselbe sichtbare Größe einpassen; dadurch nimmt jede Koordinateneinheit weniger gerendeten Raum ein und die Grafik wirkt kleiner.

Können viewBox-Werte negativ sein?

Ja. Negative Werte für min-x oder min-y sind nützlich, wenn Sie um einen Mittelpunkt zeichnen oder sichtbaren Rand um Koordinaten nahe null brauchen.