Edit SVG File – Python Examples

Aspose.SVG for Python via .NET allows you to edit SVG files and change their content easily. The Document Object Model (DOM) API fully follows the official SVG specifications, providing full control over SVG nodes and their properties. This allows you to add new nodes, delete existing nodes, or edit the contents of current nodes.

This article will show you how to edit SVG files using the Aspose.SVG for Python via .NET. We will explore detailed Python code examples that illustrate how to add and edit elements to an SVG document.

How to Edit an SVG Document

Aspose.SVG for Python via .NET API allows you to add various elements to a document. First, you would create a new element or node; then, you can add the element to the document.

How to Get Root <svg> Element

The <svg> element is a container, and it is used as the outermost element of SVG documents. To point the <svg> element, you can apply a few ways:

1. The document_element property of the Document class gives direct access to the <svg> element of the document. In the following code snippet, we use this way.

# Create a new SVG document
document = SVGDocument()

# Get root <svg> element of the document
svg_element = document.document_element

2. The root_element property of the SVGDocument class returns the root <svg> element in the document hierarchy. To indicate the <svg> element, you can apply the following code:

# Create a new SVG document
document = SVGDocument()

# Get root <svg> element of the document
svg_element = document.root_element

Create New Elements

You can use the create_element_ns(namespace_uri, qualified_name) method of the SVGDocument class to create an instance of the Element class – the required element of the given qualified name and namespace URI. The namespace_uri sets the reference to W3C SVG specification. The qualified_name must contain the string tag name of the element.

# Create a new SVG document
document = SVGDocument()
svg_element = document.document_element

# Create a new SVG <circle> element
circle = document.create_element_ns("http://www.w3.org/2000/svg", "circle")

You can use the same code to create any new SVG element; only change the qualified_name. For example, to create basic SVG shapes, you should use for SVG circles the qualified_name = “circle”, ellipses – qualified_name = “ellipse”, rectangles – qualified_name = “rect”, lines – qualified_name = “line”, polylines – qualified_name = “polyline”, polygons – qualified_name = “polygon”, and Bezier curves – qualified_name = “path”.

How to Set Attributes

You can manage element attributes and their values ​​using the set_attribute(name, value), get_attribute(qualified_name), has_attribute(qualified_name), remove_attribute(qualified_name) methods of the Element class. For example, if you create a <circle> element, you can set attributes:

# Set attributes for the <circle> element
circle.set_attribute("cx", "50")
circle.set_attribute("cy", "50")
circle.set_attribute("r", "40")
circle.set_attribute("fill", "red")

Add Elements

1. You can use the append_child(node) method to add the new child to the end of the list of children of the node.

2. To add an element to an SVG document, Python API provides the insert_before(node, child) method of the Node class. This method inserts the node before the existing child node or at the end of the list of children if the child is null.

The following code snippet illustrates how to create and add <g> element as the first child in the SVG document using insert_before() mrthod.

from aspose.svg import SVGDocument

# Create a new SVG document
document = SVGDocument()
svg_element = document.root_element

# Add <g> element and set "fill" attribute
g_element = document.create_element_ns("http://www.w3.org/2000/svg", "g")
g_element.set_attribute("fill", "red")
svg_element.insert_before(g_element, svg_element.first_child)

# Save the document
document.save("add-g-element.svg")

Edit SVG Document – Python Code Example

Consider an example of editing the existing SVG file сhristmas-tree.svg. We will take a file with a drawing of a Christmas tree and edit it, making a drawing of a Christmas tree against the background of the night sky. To do this, we will add a background and circles that will represent stars and change the color of the tree.

The following code snippet shows:

• how to add new elements using insert_before() and append_child() metods of the Node class;
• how to find a required element and set its attributes using the query_selector() and set_attribute() methods of the Element class.

from aspose.svg import SVGDocument

# Create a new SVG document
document = SVGDocument("сhristmas-tree.svg")
svg_element = document.root_element

# Add a <rect> element as a background
rect = document.create_element_ns("http://www.w3.org/2000/svg", "rect")
rect.set_attribute("x", "10")
rect.set_attribute("y", "10")
rect.set_attribute("width", "400")
rect.set_attribute("height", "400")
rect.set_attribute("fill", "#2a065b")
svg_element.insert_before(rect, svg_element.first_child)

# Add a circle element stylized as a star
circle = document.create_element_ns("http://www.w3.org/2000/svg", "circle")
circle.set_attribute("id", "star")
circle.set_attribute("cx", "60")
circle.set_attribute("cy", "50")
circle.set_attribute("r", "5")
circle.set_attribute("stroke", "white")
circle.set_attribute("stroke-width", "4")
circle.set_attribute("stroke-dasharray", "1 3")
circle.set_attribute("fill", "none")
svg_element.append_child(circle)

# Create and add new stars
use = document.create_element_ns("http://www.w3.org/2000/svg", "use")
use.set_attribute("href", "#star")
use.set_attribute("transform", "translate(40, 70)")
svg_element.append_child(use)

# You can add as many stars as you wish

# Get polyline element to change tree color
polyline_element = svg_element.query_selector("polyline")

# Set a new "fill" attribute value for the polyline element
polyline_element.set_attribute("fill", "#039da7")
polyline_element.set_attribute("stroke", "white")
polyline_element.set_attribute("stroke-width", "3")

# Save the SVG document to a file
document.save("сhristmas-tree-edited.svg")

The figure shows the visualization of the original SVG file сhristmas-tree.svg and the file that was edited.

See Also

• The Installation article provides a step-by-step guide on how to install Aspose.SVG for Python via .NET on your computer.
• If you are interested in setting up a license, applying a metered license, or would like to try an evaluation version for the Aspose.SVG Python library, please refer to the Licensing article.
• To edit SVG file, you must first find the elements to edit in the document. There are a number of ways to do this, such as CSS selectors or XPath queries. Detailed information on how to edit SVG file using a navigation through the document can be found in the Navigate SVG article.
• The scenarios of converting and rendering SVG to other formats are viewed in the Convert SVG Files in Python section.