Рисование SVG-фигур в Python

Краткий ответ: Чтобы рисовать SVG-фигуры в Python, создайте SVGDocument, задайте размер корневого SVG и viewBox, создайте элементы фигур с create_element_ns(), задайте атрибуты геометрии и стиля через set_attribute(), добавьте каждую фигуру в корень и сохраните 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")

В этой статье вы узнаете, как:

создавать элементы SVG-фигур в Python;
задавать атрибуты геометрии для rect, circle, ellipse, line, polyline и polygon;
применять атрибуты fill и stroke к генерируемым фигурам;
сохранять полноценный SVG-рисунок, собранный из нескольких элементов.

SVG-фигуры – самые простые строительные блоки для генерируемых диаграмм, иконок, графиков, бейджей и иллюстраций. У каждой фигуры есть свои атрибуты геометрии: прямоугольник использует x, y, width и height; круг использует cx, cy и r; <polygon> использует список points. Для более широкой справки по SVG-разметке смотрите руководство SVG Shapes.

Основы SVG-фигур

Элемент	Основные атрибуты геометрии	Когда использовать
`<rect>`	`x`, `y`, `width`, `height`, `rx`	Для блоков, панелей, карточек и прямоугольников со скруглением
`<circle>`	`cx`, `cy`, `r`	Для точек, бейджей, маркеров и круглых иконок
`<ellipse>`	`cx`, `cy`, `rx`, `ry`	Для овалов или некруглых маркеров
`<line>`	`x1`, `y1`, `x2`, `y2`	Для одного прямого сегмента
`<polyline>`	`points`	Для соединенных незамкнутых сегментов
`<polygon>`	`points`	Для замкнутых фигур, например треугольников и звезд

Как рисовать SVG-фигуры в Python

Используйте этот рабочий процесс, когда нужно сгенерировать SVG-рисунок из примитивов фигур:

Создайте SVGDocument.
Задайте для корневого SVG атрибуты width, height и viewBox.
Создайте каждую фигуру с document.create_element_ns(namespace_uri, qualified_name).
Задайте атрибуты геометрии и стиля с set_attribute().
Добавьте каждую видимую фигуру в корень SVG с append_child().
Сохраните документ с document.save(output_path).

Нарисовать прямоугольники, круги и эллипсы

Используйте прямоугольники, круги и эллипсы, когда графику можно описать простыми значениями центра, размера и радиуса. Следующий пример создает небольшую сцену: прямоугольник во весь размер служит фоном, круг – основным объектом, а эллипс – мягкой тенью.

 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)

Сохраненный SVG содержит только сгенерированные DOM-элементы. Такой подход полезен, когда приложение рассчитывает позиции фигур и затем записывает финальный SVG-файл.

Иллюстрация показывает, как три элемента работают вместе: <rect> покрывает весь viewBox светлым фоном, <circle> создает синий объект, а полупрозрачный <ellipse> под ним воспринимается как тень.

SVG-сцена со светлым прямоугольным фоном, синим кругом и полупрозрачной эллиптической тенью, созданная в Python

Нарисовать линии, ломаные и многоугольники

Используйте <line> для одного сегмента, <polyline> для открытой ломаной и <polygon> для замкнутой фигуры. Атрибут points – это список пар координат, разделенных пробелами.

 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)

Линия и <polyline> используют stroke, потому что рисуют контуры. <polygon> использует и fill, и stroke, потому что создает замкнутую область.

Иллюстрация показывает разницу между тремя элементами. <line> рисует один прямой сегмент, <polyline> рисует открытый зигзаг из списка points, а <polygon> автоматически замыкает свои точки и образует закрашенный треугольник.

SVG-линия, открытая ломаная polyline и закрашенный многоугольник polygon, созданные с Aspose.SVG for Python

Распространенные ошибки и исправления

Проблема	Исправление
Фигура не отображается	Убедитесь, что элемент добавлен в корень SVG с `append_child()`
Фигура находится вне видимой области	Проверьте `viewBox`, координаты, ширину и высоту
Линия невидима	Задайте `stroke` и `stroke-width`; `fill` не делает линию видимой
`<polygon>` выглядит незамкнутым или неправильным	Проверьте пары координат в `points` и их порядок
Прямоугольник не скругляется	Задайте `rx` или `ry` у элемента `<rect>`

FAQ

Ответы ниже используют тот же DOM-паттерн, что и примеры: создать SVG-элемент через document.create_element_ns(namespace_uri, element_name), задать атрибуты геометрии и стиля, добавить элемент в корень SVG и сохранить документ.

Какие SVG-фигуры можно создать в Python?

Можно создавать базовые SVG-элементы фигур, такие как <rect>, <circle>, <ellipse>, <line>, <polyline> и <polygon>. Используйте их для блоков, бейджей, маркеров, простых диаграмм, соединенных линий, треугольников и других фигур с прямыми сторонами.

Как нарисовать прямоугольник SVG в Python?

Используйте элемент <rect> и задайте x, y, width и height. Добавьте атрибуты стиля, такие как fill, stroke или rx, добавьте прямоугольник в корень SVG и сохраните документ.

Как нарисовать круг SVG в Python?

Используйте элемент <circle> с cx, cy и r. Добавьте атрибуты fill или stroke, добавьте круг в корень SVG и сохраните SVG.

Как нарисовать эллипс SVG в Python?

Используйте элемент <ellipse> с cx и cy для центра, затем задайте rx и ry для горизонтального и вертикального радиусов. Добавьте fill, stroke или opacity перед добавлением элемента в корень SVG.

Как нарисовать линию SVG в Python?

Используйте элемент <line> и задайте x1, y1, x2 и y2. Линии нужен stroke и обычно stroke-width; один только fill не сделает линию видимой.

Как нарисовать polyline SVG в Python?

Используйте элемент <polyline> и задайте атрибут points парами координат, например "30,120 70,75 115,110". Установите fill="none", если нужен только соединенный контур.

Как нарисовать треугольник SVG в Python?

Используйте элемент <polygon> с тремя парами координат в атрибуте points, например "50,10 90,80 10,80". Добавьте fill и stroke, добавьте <polygon> в корень SVG и сохраните SVG.

Как создать скругленный прямоугольник SVG в Python?

Используйте элемент <rect> и задайте rx или ry вместе с x, y, width и height. Значения rx и ry управляют радиусом скругления углов.

Почему SVG-фигура не видна?

Фигура обычно невидима, если она не добавлена в корень SVG, находится за пределами viewBox или не имеет нужных paint-атрибутов. Для линий и <polyline> задавайте stroke и stroke-width; для замкнутых фигур задавайте fill, stroke или оба атрибута.

Когда использовать `` вместо ``?

Используйте <polygon> для замкнутых фигур из прямых сегментов. Используйте <path>, когда фигуре нужны кривые, смешанные команды, несколько subpath или более сложная геометрия.

Связанные статьи

SVG viewBox и координаты в Python объясняет, как координаты сопоставляются с видимой областью SVG.
Рисование SVG-текста в Python показывает, как добавлять подписи и заголовки в генерируемые SVG-рисунки.
Работа с SVG-путями в Python объясняет пользовательскую геометрию <path>.
Редактирование SVG-файла описывает низкоуровневые DOM-паттерны редактирования.

Рисование SVG и пути SVG viewBox и координаты