Draw SVG Text in Python

Quick Answer: To draw SVG text in Python, create a <text> element with create_element_ns(), set the x, y, font-family, font-size, fill, and text-anchor attributes with set_attribute(), set text_content, append the text to the SVG root, and save the document.

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")

In this article, you will learn how to:

• create SVG <text> elements in Python;
• position text with x and y coordinates;
• set font-family, font-size, fill, and text-anchor attributes;
• create simple multi-line text with <tspan> elements.

SVG text remains real text in the SVG markup. It can be selected, searched, localized, styled, and edited later. If you need to convert text into vector outlines for final artwork or font-independent rendering, use text vectorization instead. For broader SVG markup background, see the SVG Text guide.

SVG Text Basics

Attribute or element	Use
x, y	Position the text baseline
font-family	Choose the requested font family
font-size	Set text size in SVG units
fill	Set the text color
text-anchor	Align text relative to the x coordinate
<tspan>	Add positioned fragments or simple multi-line text

How to Draw SVG Text in Python

Use this workflow when generated SVG artwork needs labels, captions, badges, or text inside diagrams:

1. Create or load an SVGDocument.
2. Set the root SVG width, height, and viewBox if you are creating a new document.
3. Create a <text> element with create_element_ns().
4. Set position and style attributes such as x, y, font-size, font-family, fill, and text-anchor with set_attribute().
5. Set text_content or append <tspan> children.
6. Append the text element to the SVG root with append_child() and save the document with document.save().

Create a Simple SVG Text Label

The following example creates a small SVG label with a background rectangle and centered text. Use text-anchor="middle" when the x coordinate should represent the horizontal center of the text.

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)

The text baseline is controlled by y, not by the top edge of the letters. If vertical positioning needs exact visual centering, adjust the y value or use font metrics in your own layout logic.

The illustration shows the result of running the example: a rounded rectangle acts as a simple label background, and text-anchor="middle" aligns the SVG Text caption around the center x-coordinate.

Create Multi-Line SVG Text with <tspan>

Use <tspan> when one text block needs multiple lines or independently positioned fragments. The next example creates one <text> element and appends two <tspan> children with different y positions.

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)

Both lines belong to the same <text> element, but each <tspan> has its own position and can override style attributes such as fill.

The illustration shows the two-line SVG text output. The first <tspan> draws the dark title, and the second <tspan> uses a separate y position and blue fill value for the subtitle.

Common Mistakes and Fixes

Problem	Fix
Text is not visible	Set fill, check x and y, and make sure the text is inside the viewBox
Text appears too high or low	Remember that y positions the text baseline, not the top edge
Center alignment does not work	Set text-anchor="middle" and use the desired center as the x value
Multi-line text overlaps	Give each <tspan> a separate y value or use dy spacing carefully
Text renders differently on another machine	Use common fonts or convert final artwork to vector paths when font independence matters

FAQ

How do I add text to SVG in Python?

Create a <text> element with create_element_ns(), set the x, y, font-family, font-size, and fill attributes, set text_content, append it to the SVG root, and save the SVG.

How do I center SVG text?

Set text-anchor="middle" and set x to the desired horizontal center. Adjust y for the baseline position.

Can I create multi-line SVG text?

Yes. Use one <text> element with multiple <tspan> children. Give each <tspan> its own x and y values or use controlled dy spacing.

Should I draw SVG text or vectorize text?

Draw regular SVG text when the text should remain editable, searchable, or localizable. Vectorize text only for final artwork that must preserve exact glyph outlines without depending on installed fonts.

Related Articles

• SVG ViewBox and Coordinates in Python explains how text coordinates map to the visible SVG area.
• Draw SVG Shapes in Python shows how to combine text with generated shapes.
• Create SVG Icons in Python uses text-adjacent drawing patterns for compact generated artwork.
• Convert Text to Vector in Python explains how to convert SVG text to vector outlines for final font-independent output.