Draw SVG Shapes in Python

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:

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.

SVG Shape Basics

ElementMain geometry attributesUse when
<rect>x, y, width, height, rxDrawing boxes, panels, cards, and rounded rectangles
<circle>cx, cy, rDrawing dots, badges, markers, and circular icons
<ellipse>cx, cy, rx, ryDrawing ovals or non-circular markers
<line>x1, y1, x2, y2Drawing one straight segment
<polyline>pointsDrawing connected open segments
<polygon>pointsDrawing closed shapes such as triangles and stars

How to Draw SVG Shapes in Python

Use this workflow when you need to generate an SVG drawing from shape primitives:

  1. Create an SVGDocument.
  2. Set the root SVG width, height, and viewBox attributes.
  3. Create each shape with document.create_element_ns(namespace_uri, qualified_name).
  4. Set geometry and style attributes with set_attribute().
  5. Append every visible shape to the SVG root with append_child().
  6. Save the document with document.save(output_path).

Draw Rectangles, Circles, and Ellipses

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.

SVG scene with a pale rectangle background, blue circle, and semi-transparent ellipse shadow created in Python

Draw Lines, Polylines, and Polygons

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.

SVG line, open polyline zigzag, and filled triangle polygon created with Aspose.SVG for Python

Common Mistakes and Fixes

ProblemFix
Shape does not appearMake sure the element was appended to the SVG root with append_child()
Shape is outside the visible areaCheck viewBox, coordinates, width, and height
Line is invisibleSet stroke and stroke-width; fill does not make a line visible
Polygon looks open or wrongVerify the points coordinate pairs and their order
Rounded rectangle is not roundedSet rx or ry on the <rect> element

FAQ

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.

What SVG shape elements can I create in Python?

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.

How do I draw a rectangle in SVG with Python?

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.

How do I draw a circle in SVG with Python?

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.

How do I draw an ellipse in SVG with Python?

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.

How do I draw a line in SVG with Python?

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.

How do I draw a polyline in SVG with Python?

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.

How do I draw a triangle in SVG with Python?

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.

How do I create a rounded rectangle in SVG with Python?

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.

Why is my SVG shape not visible?

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.

When should I use polygon instead of path?

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.

Related Articles