Move, Rotate, and Scale SVG Elements in Python

Quick Answer: To transform SVG elements in Python, load the SVG with SVGDocument, find the target element with selectors or tag-name search, set the transform attribute with set_attribute(), and save the edited SVG.

SVG Transform Basics

SVG transformations change how an element is rendered without rewriting its original geometry. This is useful when you need to move an icon, rotate a shape, scale a group, reposition generated artwork, or preserve the original coordinates while changing the rendered result.

In Aspose.SVG for Python via .NET, transformations are edited as SVG transform attribute values. Use Element.set_attribute() to write a complete transform value such as translate(...), rotate(...), scale(...), or a combined transform list.

Common transform functions are:

Transform value	Example	Aspose.SVG API pattern
translate(tx ty)	translate(40 12)	Write with Element.set_attribute() as the transform value
rotate(angle)	rotate(30)	Set transform on the selected SVG element
rotate(angle cx cy)	rotate(30 190 68)	Set transform with an explicit rotation center
scale(s)	scale(1.2)	Set transform when x and y scale equally
scale(sx sy)	scale(1.2 0.8)	Set transform when x and y scale separately
transform list	translate(20 0) rotate(15)	Write a complete ordered list of transform operations

This article uses the sample file transform-svg-elements.svg for the code examples and illustrations. Use it as data/transform-svg-elements.svg when running the examples.

Move an SVG Element

Use translate(tx ty) when you need to move an element without changing its x, y, cx, cy, or path data. The example below finds the #badge group, moves it 25 units to the left and 25 units up, and saves the edited SVG.

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "transform-svg-elements.svg")
output_path = os.path.join(output_folder, "badge-moved.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    badge = document.root_element.query_selector("#badge")

    if badge is not None:
        badge.set_attribute("transform", "translate(-25 -25)")

    document.save(output_path)

The code uses query_selector() to find the group by ID, updates its transform attribute, and writes the result with SVGDocument.save(). Applying the transform to a <g> element moves all shapes inside the group together.

The illustration below compares the source SVG (a) with the result after applying translate(-25 -25) to the #badge group (b).

Rotate an SVG Element Around a Point

Use rotate(angle cx cy) when the element should rotate around its own center or another known point. The example rotates the #diamond rectangle around the center of its original bounding area.

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "transform-svg-elements.svg")
output_path = os.path.join(output_folder, "rectangle-rotated.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    diamond = document.root_element.query_selector("#diamond")

    if diamond is not None:
        diamond.set_attribute("transform", "rotate(45 195 60)")

    document.save(output_path)

The center point in rotate(45 195 60) is part of the transform value. Without that point, SVG rotates the element around the current coordinate origin, which often makes the element appear to move unexpectedly.

The illustration below shows the rectangle before (a) and after rotation around the point defined in rotate(45 195 60) (b).

Scale an SVG Group

Use scale() when you need to resize an element or group. Because scaling happens around the current origin, combine translate() and scale() when you want the scaled result to stay in a useful position.

The example below finds the #arrow group and sets a complete transform value: translate(250 70) scale(1.5). The translation places the arrow inside the SVG viewport, and the scale operation makes the change easy to see.

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "transform-svg-elements.svg")
output_path = os.path.join(output_folder, "arrow-scaled.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    arrow = document.root_element.query_selector("#arrow")

    if arrow is not None:
        arrow.set_attribute("transform", "translate(250 70) scale(1.5)")

    document.save(output_path)

This example intentionally replaces the previous transform value on #arrow. Use this approach when you want the output to have a known final position and size.

The illustration below compares the source SVG (a) with the result after applying translate(250 70) scale(1.5) to the #arrow group (b).

Common Mistakes and Fixes

Problem	Likely cause	Fix
The element rotates and shifts away	rotate(angle) was used without a center point	Use rotate(angle cx cy) when the rotation should happen around a known point
Existing layout changes unexpectedly	A previous transform value was overwritten	Replace the whole value only when you want a known final transform
Scaling moves the element	Scaling happens relative to the current origin	Combine translate() and scale() deliberately, and check transform order
Scaled element appears outside the viewport	The transform does not include a suitable translation	Combine translate() and scale() so the scaled result stays visible
The saved SVG is unchanged	The document was not saved after editing	Call document.save(output_path) after transform updates
The visual result differs from the transform string	Transform functions are applied in order	Test the exact order, for example translate(...) scale(...) versus scale(...) translate(...)

FAQ

How do I move an SVG element in Python?

Load the SVG with SVGDocument, find the element with query_selector() or get_elements_by_tag_name(), set element.set_attribute("transform", "translate(40 12)"), and save the document.

How do I rotate an SVG element around its center?

Set a transform such as rotate(45 195 60), where 45 is the angle and 195 60 is the rotation center. Use a center point to avoid rotating around the SVG origin by accident.

How do I scale an SVG element in Python?

Set the transform attribute to scale(1.5) for simple scaling, or use a combined value such as translate(250 70) scale(1.5) when the scaled element also needs to stay in a specific position.

How do I combine translate and scale in SVG?

Set one transform value that contains both operations, for example element.set_attribute("transform", "translate(250 70) scale(1.5)"). The order of operations affects the final rendered result.

Should I change x and y attributes or use transform?

Use x, y, cx, or cy for simple geometry edits on one shape. Use transform when you need to move, rotate, scale, or preserve the original geometry while changing how the element is rendered.

Related Articles

• Advanced SVG Editing in Python collects focused workflows for editing SVG styles, geometry, and reusable artwork.
• Edit SVG Styles in Python explains presentation attributes, inline styles, CSS blocks, and style priority.
• Change SVG Colors in Python explains how to update fill, stroke, inline style, and gradient colors.
• Edit SVG File shows core DOM editing patterns for adding and changing SVG elements.
• Work with SVG Attributes explains how to get, set, check, remove, and update SVG attributes.
• Navigate SVG explains how to find SVG elements with CSS selectors and XPath.