Add SVG as an annotation layer, keeping background transparency.

[Regan Dawson]

I have tried converting the SVG to a PDF using HtmlToPdfConverter and then adding a new layer with that but it doesn't work properly as a white background is added during the conversion process so the annotation just obscures the whole page rather than adding to it.

Is there anyway to prevent the white background from being added, or to remove it from the resulting PDF before I add that to the annotation layer? Or any other way to achieve this?

[Gowthamraj Kumar]

Hi Regan Dawson,

Currently, we are analyzing your requirement on our end and we will update the further details on August 30^th, 2022.

Meanwhile, we request you to share the input document (SVG HTML/file), complete code snippet, output document, platform, and product version to analyze this on our end, so that it will helpful for us.

Regards,

Gowthamraj K

[David Hayward]

Hi, I am running this on .NET 6 in c#

      // Initialize the HTML to PDF converter with Blink rendering engine

      var htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink);

      var settings = new BlinkConverterSettings();

      htmlConverter.ConverterSettings = settings;

      // Convert SVG to PDF

      var annotation = htmlConverter.Convert("annotation.svg");

      // Save the PDF annotation

      var annotationStream = File.OpenWrite("annotation.pdf");

      annotation.Save(annotationStream);

      // Open document

      var docStream = File.OpenRead("document.pdf");

      var document = new PdfLoadedDocument(docStream);

      // Add the annotation

      var page = document.Pages[1]; // Page 2

      var layer = page.Layers.OfType<PdfPageLayer>().FirstOrDefault(item => item.Name == "APE Annotations") ?? page.Layers.Add("APE Annotations");

      layer.Graphics.DrawPdfTemplate(annotation.Pages[0].CreateTemplate(), PointF.Empty, layer.Graphics.Size);

      // Save document

      var outStream = File.OpenWrite("result.pdf");

      document.Save(outStream);

Attachment: Archive_3fbe2b37.zip

[Gowthamraj Kumar]

Hi Regan Dawson,

Thank you for sharing the details.

We have checked the provided details on our end and we do not have support for drawing a template with transparent background. To achieve your requirement, we need to convert the SVG document to an image using our HTML converter and create a transparent image from the converted image. Then we can draw an image in layer graphics. We have attached the sample for your requirement on your end let us know if it satisfies your requirement or not.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NETCoreConsoleApp1782959661

Please refer to the below following steps to achieve your requirement,

• Convert the SVG to an image using Blink
• Create a transparent image from the converted image using the System library
• Draw the transparent image in layer graphics
• Save the PDF document.

Please find the below documentation for converting HTML to image,

UG: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink#html-string-to-image

Please let us know if you need any further assistance in this.

Regards,

Gowthamraj K

[David Hayward]

Hi Gowthamraj,

Converting the SVG to PNG loses the vector detail which is critical for our application, so unfortunately not an option for us.

I have tested converting the SVG to PDF using a third party tool that preserves the transparent background. When using this file with DrawPdfTemplate and it works perfectly, see example below. It is just getting the svg to pdf conversion to keep the transparent background which is the issue I think. Is there any way to remove the white background after the conversion?

using Syncfusion.Drawing;

using Syncfusion.Pdf;

using Syncfusion.Pdf.Parsing;

using (var docStream = File.OpenRead("assets/document.pdf"))

using (var document = new PdfLoadedDocument(docStream))

using (var annotationStream = File.OpenRead("assets/annotation.pdf"))

using (var annotation = new PdfLoadedDocument(annotationStream))

{

    var page = document.Pages[1];

    var layer = page.Layers.OfType<PdfPageLayer>().FirstOrDefault(item => item.Name == "APE Annotations") ?? page.Layers.Add("APE Annotations");

    layer.Graphics.DrawPdfTemplate(annotation.Pages[0].CreateTemplate(), PointF.Empty, layer.Graphics.Size);

    using (var outStream = new FileStream(Path.Combine(Path.GetTempPath(), "result.pdf"), FileMode.Create))

    {

        Console.WriteLine(outStream.Name);

        document.Save(outStream);

    }

}

Attachment: Archive_c3f6d5b.zip

[Gowthamraj Kumar]

Hi David Hayward

Currently, we are analyzing the other possibilities on our end and we will update the further details on September 5^th 2022.

Regards,

Gowthamraj K

[Sivaram Gunabalan]

Hi David Hayward

On our further analysis, the Blink rendering engine internally uses a chrome headless browser for converting HTML to PDF. It will preserve the PDF document like how the input HTML/URL is displayed(annotations and background color) in chromium-based web browsers (chrome, print preview). Currently, we do not have the support to remove the white background from the generated PDF. So we could not proceed further on this.

Regards,

Sivaram G