SVG Scaling – C# Examples

How to Scale SVG – C# Code

Using Aspose.SVG for .NET library, you can perform a scale transformation programmatically. This article covers C# examples for SVG scaling. It considers cases of using the scale() function in the transform attribute as well as a transformation matrix – matrix(a,b,c,d,e,f).

Scale() Function

Scaling is an SVG transformation that enlarges or reduces an object using a scaling factor. You have to distinguish the uniform and directional scaling. The scale(sx, sy) transform function allows scaling images along the x- and y-axis. The sy scaling factor value is optional, and if omitted, it is assumed to be equal to sx.

The following C# code snippet demonstrates how to create an SVG <circle> element, set its attributes, and apply a transformation using the scale() 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 <circle> element and set the required attributes.
   • You can use the CreateElementNS() method to create an instance of the SVGCircleElement class.
   • Call the SetAttribute() method to set attributes specifying position, size, fill, and transformation. Use the scale() function for the transform attribute that specifies a scaling transformation. In particular, scale(2) means to scale the <circle> element by a factor of 2 in both the x and y dimensions.
3. To add the circleElement 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;
...

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

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

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

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

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

SVG Transform Matrix – Scale Matrix

Here, we will look at the C# example for scaling an entire SVG image rather than a single its element and implement the transformation using a scale matrix. Let’s look closer at the C# code for applying the scale 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, scaling, scaling, and skewing that can be applied to the element.
4. After obtaining the CTM, use the Scale() method that post-multiplies a scale transformation on the current matrix and returns the resulting matrix. The Scale(scaleFactor) method takes only one argument – scaleFactor. This parameter is mandatory and represents the scaling in both x and y axis 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
	string documentPath = Path.Combine(DataDir, "snowflake.svg");

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

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

		// 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, "scale-svg.svg"));
	}

The following Figure shows the original SVG (a) and the scaled image with a scaling factor of 0.5 – the reduced 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.