Рисование SVG-текста в Python

Краткий ответ: Чтобы рисовать SVG-текст в Python, создайте элемент <text> с create_element_ns(), задайте атрибуты x, y, font-family, font-size, fill и text-anchor через set_attribute(), установите text_content, добавьте текст в корень SVG и сохраните документ.

from aspose.svg import SVGDocument

with SVGDocument() as document:
    text = document.create_element_ns("http://www.w3.org/2000/svg", "text")
    text.set_attribute("x", "20")
    text.set_attribute("y", "40")
    text.text_content = "Hello SVG"
    document.root_element.append_child(text)
    document.save("text.svg")

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

• создавать SVG-элементы <text> в Python;
• размещать текст с помощью координат x и y;
• задавать атрибуты font-family, font-size, fill и text-anchor;
• создавать простой многострочный текст с элементами <tspan>.

SVG-текст остается настоящим текстом в SVG-разметке. Его можно выделять, искать, локализовать, стилизовать и позже редактировать. Если нужно преобразовать текст в векторные контуры для финальной графики или вывода, не зависящего от установленных шрифтов, используйте векторизацию текста. Для более широкой справки по SVG-разметке смотрите руководство SVG Text.

Основы SVG-текста

Атрибут или элемент	Назначение
x, y	Задают положение базовой линии текста
font-family	Указывает нужное семейство шрифтов
font-size	Задает размер текста в единицах SVG
fill	Задает цвет текста
text-anchor	Выравнивает текст относительно координаты x
<tspan>	Добавляет позиционированные фрагменты или простой многострочный текст

Как рисовать SVG-текст в Python

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

1. Создайте или загрузите SVGDocument.
2. Задайте для корневого SVG width, height и viewBox, если создаете новый документ.
3. Создайте элемент <text> с create_element_ns().
4. Задайте атрибуты позиции и стиля, такие как x, y, font-size, font-family, fill и text-anchor, с set_attribute().
5. Задайте text_content или добавьте дочерние элементы <tspan>.
6. Добавьте текстовый элемент в корень SVG с append_child() и сохраните документ через document.save().

Создать простую текстовую метку SVG

Следующий пример создает небольшую SVG-метку с фоновым прямоугольником и текстом по центру. Используйте text-anchor="middle", когда координата x должна обозначать горизонтальный центр текста.

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "svg-text-label.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "320")
    svg.set_attribute("height", "120")
    svg.set_attribute("viewBox", "0 0 320 120")

    background = document.create_element_ns(namespace_uri, "rect")
    background.set_attribute("x", "24")
    background.set_attribute("y", "24")
    background.set_attribute("width", "272")
    background.set_attribute("height", "72")
    background.set_attribute("rx", "12")
    background.set_attribute("fill", "#f7f7fb")
    background.set_attribute("stroke", "#546e7a")
    background.set_attribute("stroke-width", "3")
    svg.append_child(background)

    label = document.create_element_ns(namespace_uri, "text")
    label.set_attribute("x", "160")
    label.set_attribute("y", "68")
    label.set_attribute("text-anchor", "middle")
    label.set_attribute("font-family", "Arial, sans-serif")
    label.set_attribute("font-size", "26")
    label.set_attribute("font-weight", "700")
    label.set_attribute("fill", "#263238")
    label.text_content = "SVG Text"
    svg.append_child(label)

    document.save(output_path)

Положение текста по вертикали контролируется базовой линией y, а не верхним краем букв. Если нужно точное визуальное центрирование по вертикали, подберите значение y или используйте метрики шрифта в собственной логике раскладки.

Иллюстрация показывает результат: скругленный прямоугольник служит простым фоном метки, а text-anchor="middle" выравнивает подпись SVG Text относительно центральной x-координаты.

Создать многострочный SVG-текст с помощью <tspan>

Используйте <tspan>, когда одному текстовому блоку нужны несколько строк или независимо позиционированные фрагменты. Следующий пример создает один элемент <text> и добавляет в него два дочерних <tspan> с разными позициями y.

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "svg-multiline-text.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "400")
    svg.set_attribute("height", "120")
    svg.set_attribute("viewBox", "0 0 400 120")

    text = document.create_element_ns(namespace_uri, "text")
    text.set_attribute("x", "200")
    text.set_attribute("y", "48")
    text.set_attribute("font-family", "Arial, sans-serif")
    text.set_attribute("font-size", "22")
    text.set_attribute("text-anchor", "middle")
    text.set_attribute("fill", "#263238")

    first_line = document.create_element_ns(namespace_uri, "tspan")
    first_line.set_attribute("x", "200")
    first_line.set_attribute("y", "48")
    first_line.text_content = "Generated SVG Text"
    text.append_child(first_line)

    second_line = document.create_element_ns(namespace_uri, "tspan")
    second_line.set_attribute("x", "200")
    second_line.set_attribute("y", "84")
    second_line.set_attribute("fill", "#2e86de")
    second_line.text_content = "with Aspose.SVG for Python via .NET"
    text.append_child(second_line)

    svg.append_child(text)
    document.save(output_path)

Обе строки принадлежат одному элементу <text>, но у каждого <tspan> есть собственная позиция и возможность переопределять атрибуты стиля, например fill.

Иллюстрация показывает двухстрочный SVG-текст. Первый <tspan> рисует темный заголовок, а второй <tspan> использует отдельную позицию y и синее значение fill для подзаголовка.

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

Проблема	Исправление
Текст не виден	Задайте fill, проверьте x и y, убедитесь, что текст находится внутри viewBox
Текст выглядит слишком высоко или низко	Помните, что y задает базовую линию текста, а не верхний край
Выравнивание по центру не работает	Задайте text-anchor="middle" и используйте нужный центр как значение x
Многострочный текст накладывается	Дайте каждому <tspan> отдельное значение y или осторожно используйте интервал dy
Текст отображается иначе на другом компьютере	Используйте распространенные шрифты или преобразуйте финальную графику в векторные пути, если важна независимость от шрифтов

FAQ

Как добавить текст в SVG в Python?

Создайте элемент <text> с create_element_ns(), задайте атрибуты x, y, font-family, font-size и fill, установите text_content, добавьте элемент в корень SVG и сохраните SVG.

Как центрировать SVG-текст?

Задайте text-anchor="middle" и установите x в нужную горизонтальную центральную точку. Подберите y для положения базовой линии.

Можно ли создать многострочный SVG-текст?

Да. Используйте один элемент <text> с несколькими дочерними <tspan>. Задайте каждому <tspan> свои значения x и y или используйте контролируемый интервал dy.

Лучше рисовать SVG-текст или векторизовать текст?

Рисуйте обычный SVG-текст, когда текст должен оставаться редактируемым, доступным для поиска или локализации. Векторизуйте текст только для финальной графики, которая должна сохранять точные контуры глифов без зависимости от установленных шрифтов.

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

• SVG viewBox и координаты в Python объясняет, как координаты текста сопоставляются с видимой областью SVG.
• Рисование SVG-фигур в Python показывает, как сочетать текст с генерируемыми фигурами.
• Создание SVG-иконок в Python использует близкие к тексту паттерны рисования для компактной генерируемой графики.
• Преобразование текста в вектор в Python объясняет, как преобразовать SVG-текст в векторные контуры для финального вывода, не зависящего от шрифтов.