How to Resize Document During Conversion from SVG? – C#

In today’s world, most documents are in A4 format, but sometimes content rendered from SVG is a different size. This results in a lot of white space on the page, or the content just won’t fit on the page! In this article, we will consider how to use rendering options to resize document pages to the size of the content and vice versa.

How to Resize a Document When Rendered with Aspose.SVG

The Aspose.Svg.Rendering namespace provides a powerful set of tools such as low-level options classes, interfaces, and enumerations for rendering SVG documents to different output formats such as PDF, XPS, and images. By default, SVG is converted to an A4-size document, likely containing some empty space in addition to the image. But sometimes, you may need to crop documents to create a smaller page size that fits the page’s content size.

The PageSetup class provides a set of properties to manage the page setup settings for SVG documents when rendering them to different file formats. Let’s take a look at some of the more used ones:

• Set Page Setup. The AnyPage property allows you to set the page setup (size, margins, orientation, etc.) for any page of an SVG document that is rendered to a multi-page format, such as PDF, XPS, PNG, JPG, etc. Use the Page, Size, and Margin classes to manage the page setup settings for SVG documents when rendering them to different file formats.
• Resize Document to Fit the Size of Content. You can fit page size to the content and vice versa using the Sizing property with SizingType enumeration. This property is a set of bit flags that control the behavior of the renderer. You can crop documents or scale documents to match their content to the page size.

You can easily use the C# examples in this article to convert SVG to images, PDF and XPS with a custom page layout. The only differences are in specifying:

• the appropriate rendering options – ImageRenderingOption, PdfRenderingOption or XpsRenderingOption;
• the appropriate output device – ImageDevice, PdfDevice or XpsDevice.

SVG to PNG with Default Rendering Options

To convert SVG to PNG with default rendering options, you should follow a few steps:

1. Use one of the SVGDocument() constructors to initialize a document instance. In the following examples, we load a local SVG file.
2. Initialize an instance of the ImageRenderingOption class if you want to convert SVG to an image file format. By default ImageFormat is PNG.
3. Create a new instance of the ImageDevice class. Use the ImageDevice() constructor that takes options and output file path savePath as parameters.
4. Use the RenderTo(device) method to convert SVG to PNG, which takes the device object as a parameter.

The following fragment of C# code shows an example of converting an SVG document to an image without any additional options, i.e. with default rendering options. As a result of the conversion, an A4 PNG document was obtained with a lot of empty space (see illustrations of conversion results (a)).

using Aspose.Svg.Rendering;
using Aspose.Svg.Rendering.Image;
using System.IO;
...

    // Prepare path to a source SVG file
    string documentPath = Path.Combine(DataDir, "rendering.svg");

    // Prepare a path to save the converted file
    string savePath = Path.Combine(OutputDir, "a4.png");

    // Create an instance of the SVGDocument class
    using SVGDocument document = new SVGDocument(documentPath);

    // Initialize an ImageRenderingOptions object with default options
    ImageRenderingOptions opt = new ImageRenderingOptions();

    // Create an output rendering device and convert SVG
    using ImageDevice device = new ImageDevice(opt, savePath);
    document.RenderTo(device);

Rendering Options

SizingType enumeration of the Aspose.Svg.Rendering namespace specifies flags that, together with other PageSetup options, define different strategies for adjusting the page size or content size when rendering SVG documents.

Name	Description
FitContent	Adjusts the page size to fit the content without scaling. This ensures that all SVG content is visible without extra margins. Ideal for documents where the content should determine the page size.
ScaleContent	Scales the content to fit a predefined page size. The aspect ratio of the content can be changed to fit the specified dimensions. This option is useful when you need the content to fit a fixed page layout.
Contain	Resizes the content to fit the page dimensions while maintaining the aspect ratio. Unlike ScaleContent, this method ensures that the aspect ratio remains intact, which can result in empty spaces if the content’s aspect ratio differs from the page’s.
Crop	Fits content onto a page and crops any portions that extend beyond certain page boundaries.

Fit Page to SVG Content when Converting SVG to JPG

In order to fit page size of the output image to the width and height of the content, you need to use the FitContent flag, which will adjusts the page size to fit the content without scaling. Let’s look at the steps you should follow:

1. Load an SVG file. In the example, the SVGDocument(documentPath) constructor loads the SVG document from a local file system.
2. Create an instance of the ImageRenderingOption class. In this example, we set the SizingType to FitContent, which means that the output document’s page size will fit the content width and height without scaling.
3. Create a new instance of the ImageDevice class and pass it to the RenderTo(device) method to convert SVG to JPG.

using Aspose.Svg.Rendering;
using Aspose.Svg.Rendering.Image;
using System.IO;
...
    // Prepare path to a source SVG file
    string documentPath = Path.Combine(DataDir, "rendering.svg");

    // Prepare a path to save the converted file
    string savePath = Path.Combine(OutputDir, "fitContent.jpg");

    // Create an instance of SVGDocument class
    using SVGDocument document = new SVGDocument(documentPath);

    // Initialize an ImageRenderingOptions object with custom options. Use the FitContent flag
    ImageRenderingOptions opt = new ImageRenderingOptions(ImageFormat.Jpeg);
    opt.PageSetup.Sizing = SizingType.FitContent;

    // Create an output rendering device and convert SVG
    using ImageDevice device = new ImageDevice(opt, savePath);
    document.RenderTo(device);

The SVG to JPG conversion resulted in a JPG document with a page size that fits the the SVG content (see illustrations of conversion results (b)).

Note: When converting an SVG to a raster format such as JPG, the pixel size of the image may change due to differences in resolution (DPI). SVGs are resolution-independent, meaning their dimensions are defined in a coordinate system rather than in fixed pixels. When converting, the default resolution is set to 300 DPI, while the standard screen resolution is 96 DPI. This results in a larger output image because the pixel sizes are scaled proportionally. For example, an SVG of 350 x 350 units will be converted to approximately 1094 x 1094 pixels at 300 DPI. To maintain the original dimensions, it is important to specify the desired resolution when converting.

For all examples in the article, we use the source rendering.svg file – 350 x 350 px.

Scale Content when Rendering SVG to JPG

In the following example, the AnyPage property sets the page size to 1500x3000 pixels, which is larger than required to accommodate the contents of the SVG document. Using SizingType with the ScaleContent flag scales the SVG content to fit on the page:

using Aspose.Svg.Rendering;
using Aspose.Svg.Rendering.Image;
using Aspose.Svg.Drawing;
using System.IO;
...
    // Prepare path to a source SVG file
    string documentPath = Path.Combine(DataDir, "rendering.svg");

    // Prepare a path to save the converted file
    string savePath = Path.Combine(OutputDir, "scaleContent.png");

    // Create an instance of the SVGDocument class
    using SVGDocument document = new SVGDocument(documentPath);

    // Initialize an ImageRenderingOptions object with custom options. Use the ScaleContent flag
    ImageRenderingOptions opt = new ImageRenderingOptions();
    opt.PageSetup.AnyPage = new Page(new Drawing.Size(1500, 3000));
    opt.PageSetup.Sizing = SizingType.ScaleContent;

    // Create an output rendering device and convert SVG
    using ImageDevice device = new ImageDevice(opt, savePath);
    document.RenderTo(device);

The SVG to PNG conversion resulted in a 1500x3000 PNG image that was scaled (enlarged) without maintaining the aspect ratio (see the illustration of conversion results (с)).

Scale Content Using Contain Flag

The Contain flag controls the size of the content and allows it to be scaled while maintaining its aspect ratio. The content is scaled until it fits the width or height of the page. The following example shows how the Contain flag can be used in combination with setting a page size of 2000x2500 pixels. If the page size is not set, the result will be scaled and fit the A4 format when rendered.

using Aspose.Svg.Rendering;
using Aspose.Svg.Rendering.Image;
using System.IO;
...
    // Prepare path to a source SVG file
    string documentPath = Path.Combine(DataDir, "rendering.svg");

    // Prepare path for converted file saving 
    string savePath = Path.Combine(OutputDir, "using-contain.png");

    // Initialize SVGDocument
    using SVGDocument document = new SVGDocument(documentPath);

    // Initialize an PdfRenderingOptions object with custom options. Use the Contain flag
    ImageRenderingOptions opt = new ImageRenderingOptions();
    opt.PageSetup.AnyPage = new Page(new Drawing.Size(2000, 2500));
    opt.PageSetup.Sizing = SizingType.Contain;

    // Create an output rendering device and convert SVG
    using ImageDevice device = new ImageDevice(opt, savePath);
    document.RenderTo(device);

In the example, the AnyPage property of the PageSetup sets a new Page object with a Size of 2000x2500 pixels. This sets the page size to 2000x2500 pixels. Then we set the Sizing property of the PageSetup object to include the Contain flag. This means that the content of the output document will be scaled to fit the width or height of the page while maintaining its proportions. In this example, the image fits the width of the page (see the illustration of conversion results (d)).

Crop SVG to PNG Rendered Result

To crop the output page size to the required width and height, you need to set the page size first and then the SizingType.Crop flag in the Sizing property. If you do not set the required page dimensions, then A4 size will be chosen by default.

using Aspose.Svg.Rendering;
using Aspose.Svg.Rendering.Image;
using Aspose.Svg.Drawing;
using System.IO;
...
    // Prepare path to a source SVG file
    string documentPath = Path.Combine(DataDir, "rendering.svg");

    // Prepare a path to save the converted file
    string savePath = Path.Combine(OutputDir, "using-crop.jpg");

    // Initialize SVGDocument
    using SVGDocument document = new SVGDocument(documentPath);

    // Initialize an ImageRenderingOptions object with custom options. Use the Crop flag
    ImageRenderingOptions opt = new ImageRenderingOptions(ImageFormat.Jpeg);
    opt.PageSetup.AnyPage = new Page(new Drawing.Size(500, 500));
    opt.PageSetup.Sizing = SizingType.Crop;

    // Create an output rendering device and convert SVG
    using ImageDevice device = new ImageDevice(opt, savePath);
    document.RenderTo(device);

Figures of the Conversion Results

The figure shows the results of converting the rendering.svg file to PNG and JPG formats using the RenderTo() method and various rendering options that control the page size of the output document.

Note: The source SVG image is 350x350 pixels.

a) The result of converting SVG to PNG with default rendering options is a PNG document the size of an A4 page with lots of white space. The rendered image on an A4 page is stretched in height and width by about 3 times since the default resolution is 300 dpi.

b) Converting the SVG to JPG resulted in a JPG document with a page width and height that fit the content width and height. The rendered image is stretched by about 3x the height and width because the default resolution is 300 dpi.

c) The result of converting SVG to PNG with scaling (enlargement) without preserving the proportions.

d) The SVG to PNG conversion resulted in a PNG document in which the SVG image was scaled to fit the width of the output page while maintaining the image’s aspect ratio.

See Also

• How to Convert SVG Files – You will learn how to convert SVG to other formats in C#, find C# code examples and try an online converter SVG.
• How to Merge SVG Files – You will learn how to merge multiple SVG to PDF, XPS or Image formats using Render() method and find C# examples of SVGs merging.
• Vectorization – Basic Overview – The articles in this section explain how to convert raster images to vector graphic using the Aspose.SVG for .NET API.