SVG (Scalable Vector Graphics) based Static Reports

• Download SVGReports - 1.3 MB
• Download PayAdviceSVGTemplate - 14.5 KB

Introduction

There are lot of techniques and frameworks available for generating beautiful, intelligent, static and dynamic reports. Here, I am going to show just another technique for printing static reports like payslip, delivery challan, certificates, etc., using svg files.

Technologies Used

• SVG - Scalable Vector Graphics
• Inkscape - SVG Editor
• SVG Rendering Library 2.1.0

Background

The below diagram shows the main idea behind this technique. Let's see in detail.

 

SVG File - Scalable Vector Graphics

SVG File is a vector file format, which can be organized as XML. In this technique, I use this SVG file as a template for the reports. I manually design the appearance of reports in SVG and place SVG Text elements with unique name to hold report data.

Extracting XML from SVG Template

Now, I have a SVG report template, we have to read this SVG file as XML, for this, I use SVG Rendering Library.

Modifying XML with Report Data

Now we have XML string of the SVG template file. In this XML string, we have to replace the unique place holders with our report data. For example, If we need to show company name in the report, just add a SVG Text element to the SVG document and provide unique content (like #CompanyName) for this SVG Text element, in order to find out this element in the XML.

So our XML string contains #CompanyName in it. Replace this #CompanyName with our actual data. Like this, we can add our report data to the SVG template file.

Rewriting SVG file and Printing PDF Report

After adding report data to the XML string of SVG template, we have to write this XML string as SVG file. After writing the SVG file, we can convert this to PDF using Inkscape command.

Step by Step Instructions

Before proceeding, install Inkscape in your computer.

1. Creating SVG Template

Create a report template using Inkscape, design it according to your needs. In this example, I create Payslip or Pay Advice report. Look at the following image:

This image is an example of SVG template file for Pay Advice report. You can design it the way you want it to be. But you have to be careful in inserting place holders (SVG Text element) and providing unique name for it. According the above image, #EmployeeName, #EmployeeId, #GrossSalary, #OtherIncomes, #Deductions, #TotalSalary are SVG Text elements, which will be the place holders. Providing unique identification name to SVG elements is very helpful in finding those elements while processing it in the code.

2. Create and Setup Project

Create a C# project in Visual Studio (Windows Forms or WPF), and add SVG Rendering library to the project using the following Nuget command.

    Install-Package Svg

3. Creating Demo Application

Create a window like the above image and add event for the Print Pay Advice Button.

4. Reading XML from SVG Template

    //Opening svg template document into mySvgDocument
    SvgDocument mySvgDocument = SvgDocument.Open(svgFile);

    //Getting xml string from mySvgDocument
    string StringToReplace = mySvgDocument.GetXML();

• SvgDocument.Open(string path) - It opens SVG file from the specified file path.
• GetXML() - It gets the XML string of the provided SVG Document.

5. Replacing Place holders with Data

//Replacing placeholders with value
string ReplacedString = StringToReplace.Replace("#EmployeeName", txtEmpName.Text.Trim())
                                       .Replace("#EmployeeId", txtEmpID.Text.Trim())
                                       .Replace("#GrossSalary", txtGrossSalary.Text.Trim())
                                       .Replace("#OtherIncomes", txtOtherIncomes.Text.Trim())
                                       .Replace("#Deductions", txtDeductions.Text.Trim())
                                       .Replace("#TotalSalary", txtSalaryPayable.Text.Trim());

From the above code, place holders from #EmployeeName to #TotalSalary has been replaced with user provided data.

6. Writing XML Back to SVG File

    StreamWriter objStreamWriter = File.AppendText(svgFileName);
    objStreamWriter.Write(ReplacedString);
    objStreamWriter.Close();

The above lines of code write the modified XML string as SVG file.

7. Printing PDF Report

Now, we have created the report with user provided data. It's time to print the PDF report now. To print PDF report from SVG file, here I am just using the Inkscape command, here is the command:

    inkscape -f input_file.svg -A output_file.pdf

By using the above command, we can convert SVG file to PDF file. Note that before using this command, the working directory of the Windows command prompt should point to the Inkscape installation directory. Default Inkscape installation directory is C:\Program Files\Inkscape.

The following code automates the conversion of SVG file to PDF file.

    //Inkscape SVG to PDF command: inkscape -f in.svg -A out.pdf
    string Command = string.Format("inkscape -f {0} -A {1}", 
    objSaveFileDialog.FileName, 
    objSaveFileDialog.FileName.Replace(".svg", ".pdf")); //Preparing the command
    System.Diagnostics.ProcessStartInfo startInfo = 
    new System.Diagnostics.ProcessStartInfo("cmd", "/c " + Command);
    startInfo.WorkingDirectory = @"C:\Program Files\Inkscape\";
    startInfo.UseShellExecute = false;
    startInfo.CreateNoWindow = true;

    System.Diagnostics.Process process = new System.Diagnostics.Process();
    process.StartInfo = startInfo;
    process.Start();

8. Sample Output

History

• Initial version