Rotate SVG – C# Examples

How to Rotate SVG – C# Code

Using Aspose.SVG for .NET library, you can perform a rotate transformation programmatically. This article has 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).

Rotate() Function

The following C# code snippet demonstrates how to create an SVG <rect> element, set its attributes, and apply a transformation using the rotate() function for transform attribute.

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() method to set attributes specifying position, size, fill, and transformation. Use the rotate() function for the transform attribute, which takes the angle to be rotated and the coordinates of the point to be rotated around. If coordinates are not specified, then the rotation will be performed around the point (0, 0) of the initial coordinate system.
   • To add the rectElement to svgElement, you can use the AppendChild() method.
3. Call the Save() method to save the resulting SVG image to a local file specified by path.

using Aspose.Svg;
using System.IO;
...

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

        // Create a rect element and set its attributes
        var 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", "purple");

        // Apply rotate() function to the SVG
        rectElement.SetAttribute("transform", "rotate(45)");

        // Append the rect element to the SVG
        svgElement.AppendChild(rectElement);

        // Save the document
        string outputPath = "rotate-svg-rect.svg";
        document.Save(Path.Combine(OutputDir, outputPath));
    }

The transformation rotates the rectangle 45 degrees around the point (0, 0) of the original coordinate system since the coordinates of the point around which the element needs to be rotated were not passed to the rotate() function. For clarity, the Figure shows the coordinate systems before and after rotation. This illustrates that the rotation transformation is done by rotating the coordinate system.

Rotate SVG Element – SVG Rotate around Center

The following C# code snippet demonstrates how to find a required SVG element in an existing SVG file and rotate it. You should follow a few steps:

1. Load a source SVG file using one of the SVGDocument() constructors.
2. Get root <svg> element of the document.
3. Use the QuerySelector() method to find the first rectangle element to rotate. The QuerySelector(selector) method of the Element class allows you to get the first element within the document that matches the specified selector.
4. Set a transform attribute with rotate(45, 100, 140) value for the rectangle element. This transformation rotates the element by an angle of 45 degrees (clockwise) around a specified point (center of selected rectangle) with coordinates (100, 140).
5. Call the Save() method to save the resulting SVG image to a local file.

using Aspose.Svg;
using System.IO;
...
    // Load an SVG document from a file
    var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));
    
    // Get root <svg> element of the document
    var svgElement = document.RootElement;

    // Get <rect> element to rotate
    var rectElement = svgElement.QuerySelector("rect") as SVGRectElement;

    // Set a new "transform" attribute using rotate() function for the rectangle element
    rectElement.SetAttribute("transform", "rotate(45, 100, 140)");
    
    // Save the document
    document.Save(Path.Combine(OutputDir, "rotate-element.svg"));

The following Figure shows the original SVG (a) and image with the rotated first rectangle element (b). This transformation changed the appearance of the rectangle relative to other elements. The rectangle’s position, width, and height remain the same, but it will be visually rotated around the specified point – in this case, the rectangle’s center.

Note: To rotate an SVG element around its center or some other point, you must use the rotate(angle, cx, cy) function, which rotates the element by an angle around the point with coordinates (cx, cy). Determine (calculate) the position of the image center – its coordinates – and perform rotation.

SVG Transform Matrix – Rotate Matrix

Here, we will look at the C# example for rotating an entire SVG image rather than a single its element and implement the transformation using a rotate matrix. Let’s look closer at the C# code for applying the rotate matrix.

1. Load a source SVG file using one of the SVGDocument() constructors.
2. Get root <svg> element of the document.

• Note: To apply any transformation to the entire SVG image, you need to apply the transform attribute to the root <svg> element.

3. Use the GetCTM() method of the SVGGraphicsElement class that returns the current transformation matrix (CTM) associated with the <svg> 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.
4. After obtaining the CTM, use the Rotate() method that post-multiplies a rotate transformation on the current matrix and returns the resulting matrix. The Rotate(angle) method takes only one argument – angle. This parameter is mandatory and represents the amount of rotation you want to apply.
5. Construct a transformAttribute – a string representation of a 2D transformation matrix using the values from the modified transformation matrix transformationMatrix. The matrix notation is matrix(a, b, c, d, e, f).
6. Call the SetAttribute() method to set the transform attribute of the <svg> element using the transformAttribute string.
7. Call the Save() method to save the resulting SVG image to a local file.

using Aspose.Svg;
using System.IO;
...

	// Load an SVG document
    using (var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
    {
        var svgElement = document.RootElement;

        // Get the transformation matrix associated with the svgElement
        var transformationMatrix = svgElement.GetCTM();
        transformationMatrix = transformationMatrix.Rotate(45);

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

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

The following Figure shows the original SVG (a) and the rotated image (b).

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.