Navigate SVG in Python

Quick Answer: Load an SVG file with SVGDocument, inspect the root element with document.document_element, iterate elements with get_elements_by_tag_name(), find nodes with query_selector() or query_selector_all(), and use document.evaluate() for XPath queries.

Aspose.SVG APIs Used

API	Purpose
SVGDocument	Loads SVG content and exposes the SVG DOM
outer_html	Returns markup for an element and its children
get_elements_by_tag_name()	Returns elements with a specified tag name
Element.query_selector()	Finds the first element matching a CSS selector
Element.query_selector_all()	Finds all elements matching a CSS selector
Document.evaluate()	Evaluates XPath expressions

Inspect SVG Documents

SVG files are XML-based documents, so many editing and extraction tasks start with navigation: reading markup, traversing elements, checking attributes, and finding nodes by tag name, CSS selector, or XPath. Aspose.SVG for Python via .NET exposes these operations through the SVG DOM API.

Choose the navigation method according to the question you need to answer. If you only need to see the document structure, print the root markup. If you know the element type, use tag-name search. If you need to find an element the same way you would target it in CSS, use CSS selectors. If the condition depends on hierarchy, attributes, or a more structural rule, XPath is often more expressive.

Task	Recommended approach
View the full SVG markup	document.document_element.outer_html
Find all elements of one SVG type	get_elements_by_tag_name()
Move through parent and child elements	Element traversal properties such as first_element_child and last_element_child
Find elements by ID, class, attribute, or CSS-like pattern	query_selector() or query_selector_all()
Find elements by structural conditions	document.evaluate() with XPath

Before running the examples, install Aspose.SVG for Python via .NET in your Python environment.

View SVG Markup

The outer_html property returns the markup of an element and its children. Use it when you need to quickly inspect the full root <svg> element.

This is a useful first diagnostic step before writing selectors. It lets you verify actual tag names, IDs, classes, inline styles, namespaces, and attribute values in the source document. After checking the markup, you can decide whether a tag-name search, CSS selector, or XPath expression is the cleanest way to reach the target node.

import os
from aspose.svg import SVGDocument

# Load an SVG file and print the root markup
input_folder = "data/"
input_path = os.path.join(input_folder, "document.svg")

with SVGDocument(input_path) as document:
    print(document.document_element.outer_html)

The output is the serialized root <svg> element. For large SVG files, printing the full markup can be noisy, so use it mainly while debugging or when you need to inspect a small generated SVG.

Inspect Elements and Attributes

Use get_elements_by_tag_name() when you need all elements with a specific tag name. The following example prints every <rect> element and its attributes.

This approach is simple and reliable when the SVG structure is known. For example, it works well when you need to audit all rectangles in a diagram, collect all paths in an icon set, or check whether certain shapes carry expected IDs and styling attributes. The attributes collection helps you distinguish geometry attributes such as x, y, and width from styling stored in style, fill, stroke, or class attributes.

import os
from aspose.svg import SVGDocument

# Find all <rect> elements and print their attributes
input_folder = "data/"
input_path = os.path.join(input_folder, "shapes.svg")

with SVGDocument(input_path) as document:
    for element in document.get_elements_by_tag_name("rect"):
        print(f"Element: {element.tag_name}, ID: {element.id}")

        attributes = element.attributes
        for i in range(attributes.length):
            attr = attributes[i]
            if attr is not None:
                print(f" Attribute: {attr.name} = {attr.value}")

Expected output:

Element: rect, ID: first-rect
 Attribute: id = first-rect
 Attribute: x = 50
 Attribute: y = 90
 Attribute: width = 100
 Attribute: height = 90
 Attribute: style = stroke-width:5; stroke:FireBrick
Element: rect, ID: second-rect
 Attribute: id = second-rect
 Attribute: x = 120
 Attribute: y = 150
 Attribute: width = 120
 Attribute: height = 120
 Attribute: style = stroke-width:10; stroke:DarkCyan
Element: rect, ID: third-rect
 Attribute: id = third-rect
 Attribute: x = 170
 Attribute: y = 220
 Attribute: width = 90
 Attribute: height = 90
 Attribute: style = stroke-width:5; stroke:FireBrick

Once you know which attributes are present, you can safely update them with set_attribute() or use the same values to build a selector. For example, if a rectangle has id="second-rect", a CSS selector such as #second-rect may be clearer than iterating all <rect> elements.

Traverse the SVG Element Tree

Element traversal properties let you move through the SVG hierarchy. The following example starts at the root <svg> element, moves to its last child element, and then to the first child of that group.

Traversal is useful when the relative position of nodes matters. In SVG, document order is also painting order: elements later in the DOM are usually drawn above earlier elements. Understanding parent-child relationships helps when you add a background before existing artwork, place overlays after shapes, or inspect grouped elements inside <g> containers.

import os
from aspose.svg import SVGDocument

# Navigate through the SVG element tree
input_folder = "data/"
input_path = os.path.join(input_folder, "shapes.svg")

with SVGDocument(input_path) as document:
    element = document.document_element
    print(element.tag_name)

    element = element.last_element_child
    print(element.tag_name)

    element = element.first_element_child
    print(element.tag_name)

For the sample shapes.svg, this prints the tag names along the selected path through the DOM tree. In real documents, check that each traversal step returns an element before accessing the next child, because not every SVG has the same grouping structure.

Find and Edit SVG Elements with CSS Selectors

Use query_selector() to find the first matching element. Use query_selector_all() when you need to inspect all matching nodes or apply node-level edits such as changing text content.

CSS selectors are a good fit when the target can be described by an ID, class, element name, or attribute condition. For example, circle, #logo, .highlight, and rect[fill] are selector patterns that are familiar from CSS authoring. Use query_selector() for a single editable target; use query_selector_all() when your workflow can work with the returned NodeList.

The following example finds the first <circle> element, changes its stroke color, and saves the edited SVG.

import os
from aspose.svg import SVGDocument

# Find a circle with a CSS selector, edit it, and save the SVG
input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "shapes.svg")
output_path = os.path.join(output_folder, "circle-color.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    svg_element = document.root_element
    circle = svg_element.query_selector("circle")

    if circle is not None:
        circle.set_attribute("stroke", "DarkCyan")
        document.save(output_path)

The image below shows the original SVG and the edited result.

The if circle is not None check is intentional. Real SVG files often vary by source, generator, or design revision, so selector-based editing should handle missing elements gracefully. If many elements need attribute updates, use a workflow that returns editable elements, such as tag-name search or XPath; use query_selector_all() only for edits supported by the returned nodes.

Navigate SVG with XPath

Use XPath when a structural query is clearer than a CSS selector. The document.evaluate() method evaluates an XPath expression and returns a result of the requested type.

XPath is especially useful for queries that depend on attribute values, document hierarchy, or relationships between nodes. In the example below, the expression //rect[@x='120'] means “find any <rect> element with the x attribute equal to 120.” Similar expressions can target nested groups, elements with a specific attribute combination, or nodes in a particular part of the document tree.

import os
from aspose.svg import SVGDocument
from aspose.svg.dom.xpath import XPathResultType

# Find a rectangle with XPath and print its parent element
input_folder = "data/"
input_path = os.path.join(input_folder, "shapes.svg")

with SVGDocument(input_path) as document:
    xpath_expression = "//rect[@x='120']"
    xpath_result = document.evaluate(xpath_expression, document, None, XPathResultType.ANY, None)

    node = xpath_result.iterate_next()
    if node is not None:
        print(node.parent_element.tag_name)

Use XPath when a CSS selector becomes hard to read or when the query is naturally structural. For simple ID, class, and attribute lookups, CSS selectors are usually shorter. For conditions involving hierarchy or repeated traversal, XPath can be easier to maintain.

Common Mistakes and Fixes

Problem	Likely cause	Fix
CSS selector returns nothing	The selector does not match the actual SVG markup	Inspect outer_html or use simpler selectors first
Attribute value is empty	The element does not have that attribute or the value is set through style	Check element.attributes and inspect inline style declarations
XPath query returns no node	The expression does not match the document structure or namespace assumptions	Test the query on a small SVG and verify tag names and attributes
Edited SVG is not saved	The code updates a node but does not call document.save()	Save the document after making changes
Only the first matching element changes	query_selector() returns one element	Use a multi-node workflow that supports the needed edit; for attribute updates, prefer tag-name search or XPath

FAQ

How do I inspect SVG markup in Python?

Load the SVG with SVGDocument and print document.document_element.outer_html.

How do I find SVG elements by tag name?

Use document.get_elements_by_tag_name("rect"), replacing rect with the SVG tag you need.

Can I use CSS selectors with SVG in Python?

Yes. Use query_selector() to find the first matching element or query_selector_all() to find all matching elements.

Can I use XPath to navigate SVG?

Yes. Use document.evaluate() with an XPath expression and an XPathResultType value.

How do I edit an element after finding it?

For a single matched Element, call set_attribute() and save the SVG document with document.save().

Related Articles

• Edit SVG File shows how to modify SVG elements after finding them.
• Create SVG File explains how to create or load SVG documents.
• Save SVG File explains how to save SVG documents after navigation and editing.
• Convert SVG Files in Python covers converting edited SVG files to PDF, PNG, and other formats.