This Gist contains C# examples Aspose.SVG for .NET – SVG Transformations

README.md

Aspose.SVG for .NET – Rotate, Translate, and Scale SVG in C#

This GitHub gist repository contains C# code examples used in the Aspose.HTML for .NET documentation, specifically within the SVG Transformations – Rotate, Scale, and Translate SVG chapter. These examples help developers apply SVG transformations such as rotation, scaling, translation, and matrix operations to programmatically manipulate vector graphics.

Topics Covered

• Rotate Elements & Shapes – Rotate SVG shapes using the rotate() function in the transform attribute, the transformation matrix, or the SVG Builder API for easy and powerful manipulation.
• Scale SVG Content – Apply scale() transformations to entire documents or individual elements to change size.
• Translate Elements – Move shapes by applying the translate() function in the transform attribute and via the transformation matrix.
• Transformation Matrices – Work directly with SVG matrices, modify and apply transformations via matrix string attributes.
• SVG Builder API for Transformations – Use the SVGSVGElementBuilder or SVGRectElementBuilder helpers to apply transformations in expressive, chainable code patterns.

Quick Start

1. Make sure you have the Aspose.SVG for .NET library installed.
2. Find and copy the gist that corresponds to your specific task.
3. Open and adjust the example files with your paths and file names.
4. Run the code to transform SVG and inspect the output SVG files – watch how transformations are applied visually and programmatically.

About Aspose.SVG for .NET

Aspose.SVG for .NET is a robust, cross-platform library enabling full control over SVG graphics in C# applications. It provides an API for creating, editing, saving, and converting SVG content without requiring external software. With features such as DOM manipulation, SVG Builder, and transformation matrices, it enables developers to automate complex vector graphics processes related to rotation, scaling, translation, and skew on Windows, Linux, and macOS.

Prerequisites

To run the examples, you need:

• .NET Platforms: .NET Platforms: .NET 5.0+, .NET Framework 4.6.1+, or .NET Core 2.0+
• Supported OS: Windows, Linux, macOS
• The Aspose.SVG for .NET library (you can install it via NuGet: Install-Package Aspose.SVG).

Resources & Support

• Offitial Documentation
• API Reference
• Product page – Aspose.SVG for .NET
• Blog – Aspose.SVG Product Family
• Temporary License
• Support Forum – Aspose.SVG
• Rotate SVG Online – Aspose.SVG

Aspose.SVG for .NET – SVG Transformations

Aspose.SVG for .NET – SVG Transformations

Example-CombineSvgTransforms.cs

// Combine multiple SVG transformations (scale, translate, and rotate) using a transformation matrix with Aspose.SVG
// Learn more: https://docs.aspose.com/svg/net/svg-scaling/

// Load an SVG document
string documentPath = Path.Combine(DataDir, "snowflake.svg");
using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get the transformation matrix associated with the svgElement
    SVGMatrix transformationMatrix = svgElement.GetCTM();
    transformationMatrix = transformationMatrix.Scale(0.5F)
                                               .Translate(250, 250)
                                               .Rotate(20);

    // Apply the transformation matrix to the svgElement
    string 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, "scale-image.svg"));
}

Example-RotateSvg.cs

// Rotate an SVG element using the transform attribute programmatically with Aspose.SVG
// Learn more: https://docs.aspose.com/svg/net/rotate-svg/

// Set SVG Namespace URL
string SvgNamespace = "http://www.w3.org/2000/svg";

// 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(SvgNamespace, "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
    document.Save(Path.Combine(OutputDir, "rotate-svg-rect.svg"));
}

Example-RotateSvgDocumentByMatrix.cs

// Rotate an entire SVG document using a transformation matrix programmatically in C#
// Learn more: https://docs.aspose.com/svg/net/rotate-svg/

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

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

    // Apply the transformation matrix to the svgElement
    string 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-matrix.svg"));
}

Example-RotateSvgElement.cs

// Rotate a single selected element in an SVG document using C#
// Learn more: https://docs.aspose.com/svg/net/rotate-svg/

// Load an SVG document from a file
SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));

// Get the root SVG element of the document
SVGSVGElement svgElement = document.RootElement;

// Get the fist <rect> element for rotation
SVGRectElement rectElement = svgElement.QuerySelector("rect") as SVGRectElement;

// Set a new "transform" attribute with rotation value for the rectangle element
rectElement.SetAttribute("transform", "rotate(45, 100, 140)");

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

Example-RotateSvgElementUsingBuilderApi.cs

// Rotate a single selected element in an SVG document using SVG Builder API
// Learn more: https://docs.aspose.com/svg/net/rotate-svg/

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
{
    // Find the first <rect> element for rotation
    SVGRectElement rect = document.GetElementsByTagName("rect").First() as SVGRectElement;

    // Rotate the first <rect> element around its center using the SVGRectElementBuilder
    new SVGRectElementBuilder()
        .Transform(t => t.Rotate(45, 100, 140))
        .Build(rect);

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

Example-RotateSvgUsingBuilderApi.cs

// Rotate an entire SVG document using SVGElementBuilder with Aspose.SVG
// Learn more: https://docs.aspose.com/svg/net/rotate-svg/

// Load an SVG document
string documentPath = Path.Combine(DataDir, "shapes.svg");

using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svg = new SVGSVGElementBuilder()

        .Transform(t => t.Rotate(45))
        .Build(document.FirstChild as SVGSVGElement);

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

Example-ScaleSvgDocumentUsingBuilder.cs

// Scale an entire SVG document using SVG Builder with Aspose.SVG
// Learn more: https://docs.aspose.com/svg/net/svg-scaling/

// Load an SVG document
string documentPath = Path.Combine(DataDir, "shapes.svg");

using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svg = new SVGSVGElementBuilder()

        .Transform(t => t.Scale(0.5))
        .Build(document.FirstChild as SVGSVGElement);

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

Example-ScaleSvgImage.cs

// Scale an entire SVG image using C#
// Learn more: https://docs.aspose.com/svg/net/svg-scaling/

// Load an SVG document
string documentPath = Path.Combine(DataDir, "tree.svg");

using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svgElement = document.RootElement;

    // Set a "transform" attribute with scale value for the <svg> element
    svgElement.SetAttribute("transform", "scale(0.7)");
    
    // Save the document
    document.Save(Path.Combine(OutputDir, "scale-tree.svg"));
}

Example-ScaleSvgUsingMatrix.cs

// Combine multiple SVG transformations (scale, translate, and rotate) using a transformation matrix with Aspose.SVG
// Learn more: https://docs.aspose.com/svg/net/svg-scaling/

// Load an SVG document
string documentPath = Path.Combine(DataDir, "snowflake.svg");
using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get the transformation matrix associated with the svgElement
    SVGMatrix transformationMatrix = svgElement.GetCTM();
    transformationMatrix = transformationMatrix.Scale(0.5F);

    // Apply the transformation matrix to the svgElement
    string 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, "scale-snowflake.svg"));
}

Example-SvgScaling.cs

// Scale an SVG circle using the transform attribute with Aspose.SVG
// Learn more: https://docs.aspose.com/svg/net/svg-scaling/

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

    // Create a <circle> element and set its attributes
    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS("http://www.w3.org/2000/svg", "circle");
    circleElement.Cx.BaseVal.Value = 150;
    circleElement.Cy.BaseVal.Value = 150;
    circleElement.R.BaseVal.Value = 50;
    circleElement.SetAttribute("fill", "salmon");

    // Apply scaling to the SVG circle
    circleElement.SetAttribute("transform", "scale(2)");

    // Append the <circle> element to the SVG
    svgElement.AppendChild(circleElement);

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

Example-SvgTranslationMatrix.cs

// Translate an SVG element using a transformation matrix in C#
// Learn more: https://docs.aspose.com/svg/net/svg-transformations/

// 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"));
}

Example-TranslateSvg.cs

// Translate an SVG rectangle using the transform attribute in C#
// Learn more: https://docs.aspose.com/svg/net/svg-transformations/

// 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"));
}

Example-TranslateSvgElement.cs

// Translate a single selected element in an SVG document using C#
// Learn more: https://docs.aspose.com/svg/net/svg-transformations/

// Load an SVG document
string documentPath = Path.Combine(DataDir, "lineto.svg");
using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get the first <path> element for translation
    SVGPathElement pathElement = svgElement.QuerySelector("path") as SVGPathElement;

    // Set a new "transform" attribute with translation value for the <path> element
    pathElement.SetAttribute("transform", "translate(80)");

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