SVG-Formen in Python zeichnen

Kurze Antwort: Um SVG-Formen in Python zu zeichnen, erstellen Sie ein SVGDocument, setzen Sie Größe und viewBox des SVG-Wurzelelements, erstellen Sie Formelemente mit create_element_ns(), setzen Sie Geometrie- und Stilattribute mit set_attribute(), hängen Sie jede Form an das Wurzelelement an und speichern Sie das SVG.

1from aspose.svg import SVGDocument
2
3with SVGDocument() as document:
4    svg = document.root_element
5    rect = document.create_element_ns("http://www.w3.org/2000/svg", "rect")
6    rect.set_attribute("width", "80")
7    rect.set_attribute("height", "50")
8    svg.append_child(rect)
9    document.save("shapes.svg")

In diesem Artikel lernen Sie, wie Sie:

SVG-Formen sind die einfachsten Bausteine für generierte Diagramme, Icons, Charts, Badges und Illustrationen. Jede Form besitzt eigene Geometrieattribute: ein Rechteck verwendet x, y, width und height; ein Kreis verwendet cx, cy und r; ein Polygon verwendet eine points-Liste. Mehr Hintergrund zu SVG-Markup finden Sie im Leitfaden SVG Shapes.

Grundlagen von SVG-Formen

ElementWichtige GeometrieattributeVerwenden für
<rect>x, y, width, height, rxBoxen, Panels, Karten und abgerundete Rechtecke
<circle>cx, cy, rPunkte, Badges, Marker und runde Icons
<ellipse>cx, cy, rx, ryOvale oder nicht kreisförmige Marker
<line>x1, y1, x2, y2Ein einzelnes gerades Segment
<polyline>pointsVerbundene offene Segmente
<polygon>pointsGeschlossene Formen wie Dreiecke und Sterne

SVG-Formen in Python zeichnen

Verwenden Sie diesen Workflow, wenn Sie eine SVG-Zeichnung aus Formprimitiven erzeugen möchten:

  1. Erstellen Sie ein SVGDocument.
  2. Setzen Sie am SVG-Wurzelelement die Attribute width, height und viewBox.
  3. Erstellen Sie jede Form mit document.create_element_ns(namespace_uri, qualified_name).
  4. Setzen Sie Geometrie- und Stilattribute mit set_attribute().
  5. Hängen Sie jede sichtbare Form mit append_child() an das SVG-Wurzelelement an.
  6. Speichern Sie das Dokument mit document.save(output_path).

Rechtecke, Kreise und Ellipsen zeichnen

Verwenden Sie Rechtecke, Kreise und Ellipsen, wenn sich die Grafik durch einfache Werte für Mittelpunkt, Größe und Radius beschreiben lässt. Das folgende Beispiel erzeugt eine kleine Szene mit einem Rechteck als vollflächigem Hintergrund, einem Kreis als Hauptobjekt und einer Ellipse als weichem Schatten.

 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-basic-shapes.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", "200")
14    svg.set_attribute("viewBox", "0 0 300 200")
15
16    rectangle = document.create_element_ns(namespace_uri, "rect")
17    rectangle.set_attribute("width", "300")
18    rectangle.set_attribute("height", "200")
19    rectangle.set_attribute("fill", "#e6eafa")
20    svg.append_child(rectangle)
21
22    circle = document.create_element_ns(namespace_uri, "circle")
23    circle.set_attribute("cx", "150")
24    circle.set_attribute("cy", "75")
25    circle.set_attribute("r", "50")
26    circle.set_attribute("fill", "#2e86de")
27    circle.set_attribute("stroke", "#0d47a1")
28    circle.set_attribute("stroke-width", "8")
29    svg.append_child(circle)
30
31    ellipse = document.create_element_ns(namespace_uri, "ellipse")
32    ellipse.set_attribute("cx", "150")
33    ellipse.set_attribute("cy", "155")
34    ellipse.set_attribute("rx", "70")
35    ellipse.set_attribute("ry", "20")
36    ellipse.set_attribute("fill", "#90a4ae")
37    ellipse.set_attribute("opacity", "0.35")
38    svg.append_child(ellipse)
39
40    document.save(output_path)

Das gespeicherte SVG enthält nur generierte DOM-Elemente. Dieser Ansatz ist nützlich, wenn eine Anwendung Formpositionen berechnet und anschließend die fertige SVG-Datei schreibt.

Die Abbildung zeigt, wie die drei Formelemente zusammenwirken: Das Rechteck füllt die gesamte viewBox als heller Hintergrund, der Kreis erzeugt das blaue Objekt und die halbtransparente Ellipse darunter wirkt wie ein Schatten.

SVG-Szene mit hellem Rechteckhintergrund, blauem Kreis und halbtransparentem Ellipsenschatten, erstellt in Python

Linien, Polylinien und Polygone zeichnen

Verwenden Sie line für ein einzelnes Segment, polyline für eine offene verbundene Linie und polygon für eine geschlossene Form. Das Attribut points enthält eine durch Leerzeichen getrennte Liste von Koordinatenpaaren.

 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-lines-polygons.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "520")
13    svg.set_attribute("height", "300")
14    svg.set_attribute("viewBox", "0 0 520 300")
15
16    line = document.create_element_ns(namespace_uri, "line")
17    line.set_attribute("x1", "30")
18    line.set_attribute("y1", "20")
19    line.set_attribute("x2", "130")
20    line.set_attribute("y2", "290")
21    line.set_attribute("stroke", "#4387be")
22    line.set_attribute("stroke-width", "10")
23    svg.append_child(line)
24
25    polyline = document.create_element_ns(namespace_uri, "polyline")
26    polyline.set_attribute("points", "100,100 160,50 220,100 280,50 340,100 400,50")
27    polyline.set_attribute("fill", "none")
28    polyline.set_attribute("stroke", "#fb6796")
29    polyline.set_attribute("stroke-width", "5")
30    svg.append_child(polyline)
31
32    polygon = document.create_element_ns(namespace_uri, "polygon")
33    polygon.set_attribute("points", "360,290 430,20 500,290")
34    polygon.set_attribute("fill", "#86a9b9")
35    polygon.set_attribute("stroke", "#fb6796")
36    polygon.set_attribute("stroke-width", "5")
37    svg.append_child(polygon)
38
39    document.save(output_path)

Linie und Polylinie verwenden stroke, weil sie Konturen zeichnen. Das Polygon verwendet sowohl fill als auch stroke, weil es eine geschlossene Fläche bildet.

Die Abbildung zeigt den Unterschied zwischen den drei Elementen. <line> zeichnet ein einzelnes gerades Segment, <polyline> zeichnet einen offenen Zickzack aus der points-Liste und <polygon> schließt seine Punkte automatisch zu einem gefüllten Dreieck.

SVG-Linie, offene Polylinie als Zickzack und gefülltes Dreieckspolygon, erstellt mit Aspose.SVG for Python

Häufige Fehler und Lösungen

ProblemLösung
Die Form erscheint nichtPrüfen Sie, ob das Element mit append_child() an das SVG-Wurzelelement angehängt wurde
Die Form liegt außerhalb des sichtbaren BereichsPrüfen Sie viewBox, Koordinaten, width und height
Die Linie ist unsichtbarSetzen Sie stroke und stroke-width; fill macht eine Linie nicht sichtbar
Das Polygon wirkt offen oder falschPrüfen Sie die Koordinatenpaare in points und ihre Reihenfolge
Das abgerundete Rechteck ist nicht rundSetzen Sie rx oder ry am <rect>-Element

FAQ

Die Antworten unten verwenden dasselbe DOM-Muster wie die Beispiele: SVG-Element mit document.create_element_ns(namespace_uri, element_name) erstellen, Geometrie- und Stilattribute setzen, an das SVG-Wurzelelement anhängen und das Dokument speichern.

Welche SVG-Formelemente kann ich in Python erstellen?

Sie können SVG-Grundformen wie rect, circle, ellipse, line, polyline und polygon erstellen. Nutzen Sie diese Elemente für Boxen, Badges, Marker, einfache Diagramme, verbundene Linien, Dreiecke und andere Formen mit geraden Kanten.

Wie zeichne ich ein Rechteck in SVG mit Python?

Verwenden Sie ein rect-Element und setzen Sie x, y, width und height. Ergänzen Sie Stilattribute wie fill, stroke oder rx, hängen Sie das Rechteck an das SVG-Wurzelelement an und speichern Sie das Dokument.

Wie zeichne ich einen Kreis in SVG mit Python?

Verwenden Sie ein circle-Element mit cx, cy und r. Fügen Sie fill- oder stroke-Attribute hinzu, hängen Sie den Kreis an das SVG-Wurzelelement an und speichern Sie das SVG.

Wie zeichne ich eine Ellipse in SVG mit Python?

Verwenden Sie ein ellipse-Element mit cx und cy für den Mittelpunkt und setzen Sie anschließend rx und ry für den horizontalen und vertikalen Radius. Ergänzen Sie fill, stroke oder opacity, bevor Sie das Element anhängen.

Wie zeichne ich eine Linie in SVG mit Python?

Verwenden Sie ein line-Element und setzen Sie x1, y1, x2 und y2. Eine Linie benötigt stroke und meist stroke-width; nur fill macht sie nicht sichtbar.

Wie zeichne ich eine Polylinie in SVG mit Python?

Verwenden Sie ein polyline-Element und setzen Sie points auf Koordinatenpaare wie "30,120 70,75 115,110". Setzen Sie fill="none", wenn nur die verbundene Kontur sichtbar sein soll.

Wie zeichne ich ein Dreieck in SVG mit Python?

Verwenden Sie ein polygon-Element mit drei Koordinatenpaaren im Attribut points, zum Beispiel "50,10 90,80 10,80". Ergänzen Sie fill und stroke, hängen Sie das Polygon an das SVG-Wurzelelement an und speichern Sie das SVG.

Wie erstelle ich ein abgerundetes Rechteck in SVG mit Python?

Verwenden Sie ein rect-Element und setzen Sie zusätzlich zu x, y, width und height auch rx oder ry. Die Werte rx und ry steuern den Eckenradius.

Warum ist meine SVG-Form nicht sichtbar?

Eine Form ist meist unsichtbar, wenn sie nicht an das SVG-Wurzelelement angehängt wurde, außerhalb der viewBox liegt oder die nötigen Paint-Attribute fehlen. Für Linien und Polylinien setzen Sie stroke und stroke-width; für geschlossene Formen setzen Sie fill, stroke oder beides.

Wann sollte ich polygon statt path verwenden?

Verwenden Sie polygon für geschlossene Formen aus geraden Liniensegmenten. Verwenden Sie <path>, wenn die Form Kurven, gemischte Befehle, mehrere Teilpfade oder komplexere Geometrie benötigt.

Verwandte Artikel