Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Quick Answer: To draw SVG shapes in Python, create an
SVGDocument, set the root SVG size and viewBox, create shape elements with
create_element_ns(), set geometry and style attributes with
set_attribute(), append each shape to the root, and save the 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 this article, you will learn how to:
rect, circle, ellipse, line, polyline, and polygon;SVG shapes are the simplest building blocks for generated diagrams, icons, charts, badges, and illustrations. Each shape has its own geometry attributes: a rectangle uses x, y, width, and height; a circle uses cx, cy, and r; a polygon uses a points list. For broader SVG markup background, see the
SVG Shapes guide.
| Element | Main geometry attributes | Use when |
|---|---|---|
<rect> | x, y, width, height, rx | Drawing boxes, panels, cards, and rounded rectangles |
<circle> | cx, cy, r | Drawing dots, badges, markers, and circular icons |
<ellipse> | cx, cy, rx, ry | Drawing ovals or non-circular markers |
<line> | x1, y1, x2, y2 | Drawing one straight segment |
<polyline> | points | Drawing connected open segments |
<polygon> | points | Drawing closed shapes such as triangles and stars |
Use this workflow when you need to generate an SVG drawing from shape primitives:
SVGDocument.width, height, and viewBox attributes.document.create_element_ns(namespace_uri, qualified_name).set_attribute().append_child().document.save(output_path).Use rectangles, circles, and ellipses when the artwork can be described by simple center, size, and radius values. The following example creates a small scene with a full-size rectangle as the background, a circle as the main object, and an ellipse as a soft shadow.
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)The saved SVG contains only generated DOM elements. This approach is useful when an application calculates shape positions and then writes the final SVG file.
The illustration shows how the three shape elements work together: the <rect> covers the entire viewBox as a pale background, the <circle> creates the blue object, and the semi-transparent <ellipse> below it reads as a shadow.

Use line for one segment, polyline for an open connected line, and polygon for a closed shape. The points attribute is a space-separated list of coordinate pairs.
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)The line and polyline use stroke because they draw outlines. The polygon uses both fill and stroke because it creates a closed area.
The illustration shows the difference between the three elements. The <line> draws one straight segment, the <polyline> draws an open zigzag from the points list, and the <polygon> closes its points automatically to form a filled triangle.

| Problem | Fix |
|---|---|
| Shape does not appear | Make sure the element was appended to the SVG root with append_child() |
| Shape is outside the visible area | Check viewBox, coordinates, width, and height |
| Line is invisible | Set stroke and stroke-width; fill does not make a line visible |
| Polygon looks open or wrong | Verify the points coordinate pairs and their order |
| Rounded rectangle is not rounded | Set rx or ry on the <rect> element |
The answers below use the same DOM pattern as the examples: create the SVG element with document.create_element_ns(namespace_uri, element_name), set its geometry and style attributes, append it to the SVG root, and save the document.
You can create basic SVG shape elements such as rect, circle, ellipse, line, polyline, and polygon. Use these elements for boxes, badges, markers, simple diagrams, connected lines, triangles, and other straight-edged shapes.
Use a rect element and set x, y, width, and height. Add style attributes such as fill, stroke, or rx, append the rectangle to the SVG root, and save the document.
Use a circle element with cx, cy, and r. Add fill or stroke attributes, append the circle to the SVG root, and save the SVG.
Use an ellipse element with cx and cy for the center, then set rx and ry for the horizontal and vertical radii. Add fill, stroke, or opacity attributes before appending the element to the SVG root.
Use a line element and set x1, y1, x2, and y2. A line needs stroke and usually stroke-width; setting only fill will not make a line visible.
Use a polyline element and set the points attribute to coordinate pairs such as "30,120 70,75 115,110". Set fill="none" when you want only the connected outline.
Use a polygon element with three coordinate pairs in the points attribute, for example "50,10 90,80 10,80". Add fill and stroke, append the polygon to the SVG root, and save the SVG.
Use a rect element and set rx or ry in addition to x, y, width, and height. The rx and ry values control the corner radius.
A shape is usually invisible when it was not appended to the SVG root, lies outside the viewBox, or lacks the needed paint attributes. For lines and polylines, set stroke and stroke-width; for closed shapes, set fill, stroke, or both.
Use polygon for closed shapes made from straight line segments. Use <path> when the shape needs curves, mixed commands, multiple subpaths, or more complex geometry.
Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.