SVG Transformations – C# Examples

In SVG, transformations are used to modify the position, size, orientation, and skewing of SVG elements within the SVG canvas. SVG objects can be transformed using the transform attribute’s properties: translate, scale, rotate, skewX, skewY, and matrix. Using Aspose.SVG for .NET library, you can perform these transformations programmatically. In this chapter is a general overview of how you might work with transformations using Aspose.SVG.

The current chapter describes popular SVG transforms, as well as C# examples for most common transformation scenarios.

Rotate SVG – This article covered C# examples for SVG rotation. Considered cases of using the rotate() function in the transform attribute as well as a transformation matrix matrix(a,b,c,d,e,f).
SVG Scaling – This article has covered C# examples for SVG scaling.
Translate SVG – In this section, you will learn how to translate SVG programmatically in C#.

A Few Ways to Transform SVG in C#

Using transform Attribute Properties. Transform attribute properties in SVG allow you to manipulate elements using the following transform functions:

transform=“translate(tx, ty)” – here the translate(tx, ty) function moves an element by a tx value along the x-axis and by ty along the y-axis. If one of the values is not specified, it defaults to zero.
- rotate(angle, cx, cy) rotates an element around a specified point by a given angle.
- scale(sx, sy) specifies a scale operation with scaling factors sx and sy. If sy is not provided, it is assumed to be equal to sx.
- skewX(angle) and skewY(angle) skew an element along the x or y axis by a specified angle.

Using Transformation Matrix. The transformation matrix is a mathematical way to describe SVG transformations. The matrix includes values for scaling, rotation, skewing, and translation, providing more flexibility for complex transformations. The transformation matrix combines translation, scale, rotation, and skew transformations.

transform=“matrix(a,b,c,d,e,f)” – SVG objects can be altered using the matrix property of the transform attribute. Only the first 6 values of the matrix can be specified to set translation, scaling, rotation, and skewing.

These two ways offer different levels of complexity and precision, with the transform attribute being easier for simple transformations while the transformation matrix allows greater control over the transformation process. Let’s look at these methods using C# examples for an SVG transformation, such as SVG translation.

SVG Transformation – Translate() Function

The following C# code snippet demonstrates how to create an SVG <rect> element, set its attributes, and apply a translation transformation using the transform attribute. The transformation moves the rectangle by 150 units to the right and 50 units downward.

Create an instance of the SVGDocument class. The RootElement property points to the document’s root <svg> element.
Create a <rect> element with attributes and add it to the <svg> element:
- You can use the CreateElementNS() method to create an instance of the SVGRectElement class.
- Call the SetAttribute(name, value) method to set attributes specifying position, size, fill, and transformation. The transform attribute is set on the <rect> element using the value "translate(150, 50)". This applies a translation transformation that moves the rectangle 150 units to the right and 50 units downward.
To add the rectElement to svgElement, you can use the AppendChild() method.
Call the Save() method to save the resulting SVG image to a local file specified by path.

 1using Aspose.Svg;
 2using System.IO;
 3...
 4
 5	// Create a new SVG document
 6	using (var document = new SVGDocument())
 7	{
 8		var svgElement = document.RootElement;
 9
10		// Create a <rect> element and set its attributes
11		var rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
12		rectElement.X.BaseVal.Value = 50;
13		rectElement.Y.BaseVal.Value = 50;
14		rectElement.Width.BaseVal.Value = 100;
15		rectElement.Height.BaseVal.Value = 100;
16		rectElement.SetAttribute("fill", "blue");
17
18		// Apply translate() function to the rectangle
19		rectElement.SetAttribute("transform", "translate(150, 50)");
20
21		// Append the <rect> element to the <svg> element
22		svgElement.AppendChild(rectElement);
23
24		// Save the document
25		document.Save(Path.Combine(OutputDir, "translate.svg"));
26	}

SVG Transform Matrix

Here, we will look at the C# example like the one above – create an SVG <rect> element, set its attributes, and implement the translation using a transformation matrix. Let’s take a closer look at the C# code for implementing the transformation matrix.

Use the GetCTM() method of the SVGGraphicsElement class that returns the current transformation matrix (CTM) associated with the <rect> element. The CTM represents the cumulative transformations applied to the element and includes information about translation, rotation, scaling, and skewing that can be applied to the element.
After obtaining the CTM, use the Translate() method that post-multiplies a translation transformation on the current matrix and returns the resulting matrix. The Translate(dx, dy) method takes two arguments – dx and dy- representing horizontal and vertical translation distances, respectively.
Construct a transformAttribute – a string representation of a 2D transformation matrix using the values from the modified transformationMatrix. The matrix notation is matrix(a, b, c, d, e, f).
Call the SetAttribute() method to set the transform attribute of the <rect> element using the transformAttribute string.

 1using Aspose.Svg;
 2using System.IO;
 3...
 4
 5	// Create a new SVG document
 6	using (var document = new SVGDocument())
 7	{
 8		var svgElement = document.RootElement;
 9
10		// Create a <rect> element and set its attributes
11		var rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
12		rectElement.X.BaseVal.Value = 150;
13		rectElement.Y.BaseVal.Value = 50;
14		rectElement.Width.BaseVal.Value = 100;
15		rectElement.Height.BaseVal.Value = 100;
16		rectElement.SetAttribute("fill", "blue");
17		svgElement.AppendChild(rectElement);
18
19		// Get the current transformation matrix associated with the rectElement
20		var transformationMatrix = rectElement.GetCTM();
21		transformationMatrix = transformationMatrix.Translate(150, 50);
22
23		// Apply the transformation matrix to the rectElement
24		var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
25			+ transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
26			+ transformationMatrix.F + ")";
27		rectElement.SetAttribute("transform", transformAttribute);
28
29		// Save the document
30		document.Save(Path.Combine(OutputDir, "translation-matrix.svg"));
31	}

SVG Transformations – C# Examples

A Few Ways to Transform SVG in C#

SVG Transformation – Translate() Function

SVG Transform Matrix

See Also