SVG Transformations – Rotate, Scale, and Translate SVG

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#

1. 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.

2. 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.

1. Create an instance of the SVGDocument class. The RootElement property points to the document’s root <svg> element.
2. 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.
3. To add the rectElement to svgElement, you can use the AppendChild() method.
4. Call the Save() method to save the resulting SVG image to a local file specified by path.

using Aspose.Svg;
using System.IO;

// Translate an SVG rectangle using the transform attribute in C#

// Create a new SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <rect> element and set its attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
    rectElement.X.BaseVal.Value = 50;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "blue");

    // Apply translate() function to the rectangle
    rectElement.SetAttribute("transform", "translate(150, 50)");

    // Append the <rect> element to the <svg> element
    svgElement.AppendChild(rectElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "translate.svg"));
}

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.

1. 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.
2. 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.
3. 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).
4. Call the SetAttribute() method to set the transform attribute of the <rect> element using the transformAttribute string.

using Aspose.Svg;
using System.IO;

// Translate an SVG element using a transformation matrix in C#

// Create a new SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <rect> element and set its attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
    rectElement.X.BaseVal.Value = 150;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "blue");
    svgElement.AppendChild(rectElement);

    // Get the current transformation matrix associated with the rectElement
    SVGMatrix transformationMatrix = rectElement.GetCTM();
    transformationMatrix = transformationMatrix.Translate(150, 50);

    // Apply the transformation matrix to the rectElement
    string transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
                                + transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
                                + transformationMatrix.F + ")";
    rectElement.SetAttribute("transform", transformAttribute);

    // Save the document
    document.Save(Path.Combine(OutputDir, "translation-matrix.svg"));
}

See Also

You can download the complete examples and data files from GitHub.

About downloading from GitHub and running examples, you find out from the How to Run the Examples section.

To learn how to use a transformation matrix to rotate, scale, translate, and skew SVG graphics and consider SVG code examples, please go to the Transformation Matrix – SVG Code Examples article.

Read the SVG Transformation article to learn more and get SVG code examples for rotating, scaling, moving, and skewing SVG graphics using the SVG transform attribute.