Convert SVG to PNG in C#

PNG file format supports lossless image compression that makes it popular among its users. It has two major uses: the World Wide Web and image-editing. It widely takes to transmit pictures over the network, display photos and graphics on web pages and reserve in cloud storages. There are some restrictions on SVG usage on web pages, so conversion SVG to PNG is sometimes necessary. With Aspose.HTML, you can convert SVG to PNG format programmatically with full control over a wide range of conversion parameters.

In this article, you find information on SVG to PNG conversion by using ConvertSVG() methods of the Converter class and applying ImageSaveOptions and ICreateStreamProvider parameters. Also, you can try an Online SVG Converter to test the Aspose.HTML API functionality and convert SVG on the fly.

Online SVG Converter

You can convert SVG to other formats with Aspose.HTML API in real time. Please load SVG from the local file system, select the output format and run the example. The save options are set by default. You will immediately receive the conversion result as a separate file.

If you want to convert SVG to PNG image programmatically, please see the following C# code examples.

SVG to PNG by a single line of code

The static methods of the Converter class are primarily used as the easiest way to convert an SVG file into various formats. You can convert SVG to PNG in your C# application literally with a single line of code!

In the following example, we take an SVG file in a local file system ( shapes.svg), convert and save it in the local file system.

// Invoke the ConvertSVG() method for SVG to PNG conversion
Converter.ConvertSVG(Path.Combine(DataDir, "shapes.svg"), new ImageSaveOptions(), Path.Combine(OutputDir, "convert-with-single-line.png"));

Convert SVG to PNG

Converting a file to another format using the ConvertSVG() method is a sequence of operations among which document loading and saving. In the following example, we create an SVG file from code.

1. Prepare code for an SVG document.
2. Create a new ImageSaveOptions object. By default, the Format property is PNG.
3. Use the ConvertSVG(content, baseUri, options, outputPath) method of the Converter class to save SVG as a PNG image.

Please take a look over the following C# code snippet which shows the process of converting SVG to PNG using Aspose.HTML for .NET.

// Prepare SVG code
var code = "<svg xmlns='http://www.w3.org/2000/svg'>" +
           "<circle cx ='100' cy ='100' r ='60' fill='none' stroke='red' stroke-width='10' />" +
           "</svg>";

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

// Create an instance of the ImageSaveOptions class
var options = new ImageSaveOptions();

// Convert SVG to PNG
Converter.ConvertSVG(code, ".", options, savePath);

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

Save Options

Aspose.HTML allows converting SVG to PNG using default or custom save options. ImageSaveOptions usage enables you to customize the rendering process. You can specify the image format, page size, margins, background color, etc.

Property	Description
Compression	Sets Tagged Image File Format (TIFF) Compression. By default, this property is LZW.
CSS	Gets a CssOptions object which is used for configuration of CSS properties processing.
Format	Sets the ImageFormat (JPG, PNG, BMP, TIFF, or GIF). By default, this property is PNG.
BackgroundColor	This property sets the color that will fill the background. By default, this property is Transparent.
PageSetup	This property gets a page setup object and uses it for configuration output page-set.
HorizontalResolution	Sets horizontal resolution for output images in pixels per inch. The default value is 300 dpi.
VerticalResolution	Sets vertical resolution for output images in pixels per inch. The default value is 300 dpi.
UseAntialiasing	This property sets the image rendering quality. Antialiasing is enabled by default.
Text	Gets a TextOptions object which is used for configuration of text rendering.

Convert SVG to PNG using ImageSaveOptions

To convert SVG to PNG with ImageSaveOptions specifying, you should follow a few steps:

1. Load an SVG file using one of the SVGDocument() constructors of the SVGDocument class. ( flower1.svg).
2. Create a new ImageSaveOptions object and specify save options. By default, the Format property is PNG.
3. Use the ConvertSVG() method to save SVG as a PNG image. You need to pass the SVGDocument, ImageSaveOptions, and output file path to the ConvertSVG() method to convert SVG to PNG.

The following C# code snippet shows how to convert SVG to PNG using custom save options:

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

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

// Initialize an SVG document from the file
using var document = new SVGDocument(documentPath);

// Create an instance of the ImageSaveOptions class. Set up the SmoothingMode, resolutions, and change the background color to AliceBlue 
var options = new ImageSaveOptions()
{
    HorizontalResolution = 200,
    VerticalResolution = 200,
    BackgroundColor = System.Drawing.Color.AliceBlue,
    UseAntialiasing = true,
};            

// Convert SVG to PNG
Converter.ConvertSVG(document, options, savePath);

The ImageSaveOptions() constructor initializes an instance of the ImageSaveOptions class that is passed to ConvertSVG() method. The ConvertSVG() method takes the document, options, output file path savePath and performs the conversion operation.

In the above example, we use:

• BackgroundColor property that sets the color that will fill the background. The default BackgroundColor is Transparent;
• HorizontalResolution and VerticalResolution properties that set horizontal/vertical resolution for output images in pixels per inch. By default, these properties are 300 dpi;
• UseAntialiasing property that sets the rendering quality for this image. This example uses UseAntialiasing = true for quality rendering.

Use UseAntialiasing = true when you want to improve the visual quality of rendered shapes, text, and images in your application, especially when clarity and smooth edges are essential. Enabling antialiasing smooths out jagged edges by blending the colors of pixels around the edges, resulting in a softer, more refined look.

While UseAntialiasing = true provides better visual quality, it can also increase processing time. For applications where rendering speed is a priority, it may be optimal to set UseAntialiasing = false.

The figure illustrates the fragment of the flower-options.png file.

Output Stream Providers

If it is required to save files in the remote storage (e.g., cloud, database, etc.) you can implement the ICreateStreamProvider interface to have manual control over the file creating process. This interface is designed as a callback object to create a stream at the beginning of the document/page (depending on the output format) and release the early created stream after rendering the document/page.

Aspose.HTML for .NET provides various types of output formats for rendering operations. Some of these formats produce a single output file (for instance, PDF, XPS), others create multiple files (Image formats – JPG, PNG, etc.).

The example below shows how to implement and use your own MemoryStreamProvider in the application:

class MemoryStreamProvider : Aspose.Html.IO.ICreateStreamProvider
{
    // List of MemoryStream objects created during the document rendering
    public List<MemoryStream> Streams { get; } = new List<MemoryStream>();

    public Stream GetStream(string name, string extension)
    {
        // This method is called when only one output stream is required, for instance for XPS, PDF or TIFF formats
        MemoryStream result = new MemoryStream();
        Streams.Add(result);
        return result;
    }

    public Stream GetStream(string name, string extension, int page)
    {
        // This method is called when the creation of multiple output streams are required. For instance, during the rendering HTML to list of image files (JPG, PNG, etc.)
        MemoryStream result = new MemoryStream();
        Streams.Add(result);
        return result;
    }

    public void ReleaseStream(Stream stream)
    {
        // Here you can release the stream filled with data and, for instance, flush it to the hard-drive
    }

    public void Dispose()
    {
        // Releasing resources
        foreach (var stream in Streams)
            stream.Dispose();
    }
}

The following C# code demonstrates how to use the MemoryStreamProvider class and the Aspose.HTML for .NET library to convert SVG to PNG and save the result to a file.

// Create an instance of MemoryStreamProvider
using var streamProvider = new MemoryStreamProvider();

// Prepare SVG code
var code = "<svg xmlns='http://www.w3.org/2000/svg'>" +
           "<circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' />" +
           "</svg>";

// Convert SVG to PNG using the MemoryStreamProvider
Converter.ConvertSVG(code, ".", new ImageSaveOptions(), streamProvider);

// Get access to the memory stream that contains the result data
var memory = streamProvider.Streams.First();
memory.Seek(0, SeekOrigin.Begin);

// Flush the result data to the output file
using (FileStream fs = File.Create(Path.Combine(OutputDir, "stream-provider.png")))
{
    memory.CopyTo(fs);
}

To learn more about ImageSaveOptions, please read the Fine-Tuning Converters article.

Check the quality of SVG to PNG conversion with our online SVG to PNG Converter. Upload, convert your files and get results in a few seconds. Try our forceful SVG to PNG Converter for free now!

Download our Aspose.HTML for .NET library allows you to successfully, quickly, and easily convert your HTML, MHTML, EPUB, SVG, and Markdown documents to the most popular formats.

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