Converting from SVG to PNG but the size is not correct

Hello Aspose Team,

when I am trying to convert the svg to normal images like png. The the size of the png image is not the same of the original one.

Could you please tell me what should I do to get the same size always ?

I would really buy this product when you give me the solution.

Thanks

@Abdul_Sawas

Could you please share your sample SVG file along with the sample code snippet that you are trying so far. We will test the scenario in our environment and address it accordingly.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ConsoleApp3
{
    class Program
    {
        static void Main(string[] args)
        {
            // For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
            // Prepare an SVG code and save it to the file.
            string code = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"155\" height=\"46\" style=\"position:absolute\" ><defs /><g transform=\"scale(1.33333)\"><g transform=\"matrix(1,0,0,1,-310.25,-404.729925537109)\"><path d=\" M311.25,437.979925537109 L425.25,437.979925537109 L425.25,405.729925537109 L311.25,405.729925537109 L311.25,437.979925537109 Z\" stroke-width=\"2\" stroke=\"#FF0000\" stroke-opacity=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" fill=\"none\" /></g></g></svg>";

            System.IO.File.WriteAllText("document.svg", code);

            // Initialize an SVG document from the svg file.
            

            // Create an instance of MemoryStreamProvider
            using (var streamProvider = new MemoryStreamProvider())
            {
                // Initialize the SVG document
                using (var document = new Aspose.Html.Dom.Svg.SVGDocument("document.svg"))
                {
                    // Convert SVG to Image by using the MemoryStreamProvider
                    Aspose.Html.Converters.Converter.ConvertSVG(document, new Aspose.Html.Saving.ImageSaveOptions(Aspose.Html.Rendering.Image.ImageFormat.Png), streamProvider);

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

                    // Flush the result data to the output file
                    using (System.IO.FileStream fs = System.IO.File.Create("output.png"))
                    {
                        memory.CopyTo(fs);
                        byte[] imageBytes = memory.ToArray();
                        // Convert byte[] to Base64 String
                        string base64String = Convert.ToBase64String(imageBytes);
                    }
                }
            }
        }
     
    }
}

Hello,

I am using exactly your giving code in the web site, I could not include my code sample in the comment.

MemoryStreamProvider was used in the Code Sample
grafik.png (147.1 KB)

@Abdul_Sawas

We generated the SVG file using your code and noticed that the output SVG was not correct. It seems like HTML elements are not correct in the string. Please check the attached SVG file:

document.zip (438 Bytes)

Would you please share your sample SVG in .zip format which is created at your side and can be viewed in browser without any error.

5
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="636" height="19" style="position:absolute" ><defs /><g transform="scale(1.33333)"><g transform="matrix(1,0,0,1,-70.9000015258789,-28.25)"><path d=" M70.9000015258789,28.25 L70.9000015258789,42.0489501953125 L547.25,42.0489501953125 L547.25,28.25 L70.9000015258789,28.25 Z" fill="#FFFFFF" fill-opacity="1" fill-rule="evenodd" /></g></g></svg>

I am trying to send you here but it not working , I will send you frm my EMail

@Abdul_Sawas

You can add your SVG in .zip format and attach here using the upload button.

(Version_vvvv)teamviewer_-_firma_idl_gmbh_mitte_beitreten.zip (1.0 MB)

Hi Asad, I think you have got the file.

@Abdul_Sawas

The file you have shared is an HTML file instead of SVG. Nevertheless, we have tried to convert it into PNGs using the below code snippet and did not notice the size related issue. However, right border of the content was missing in the output images. Could you please try the below code snippet at your side and let us know if you notice any other issue:

using (var document = new Aspose.Html.HTMLDocument(dataDir + "(Version_vvvv)teamviewer_-_firma_idl_gmbh_mitte_beitreten.xhtml"))
{
 // Initialize ImageSaveOptions 
 var options = new Aspose.Html.Saving.ImageSaveOptions(Aspose.Html.Rendering.Image.ImageFormat.Png);

 // Convert HTML to PNG
 Aspose.Html.Converters.Converter.ConvertHTML(document, options, "output.png");
}

Hello Asad,

I think, that you did get my goal, I want to convert the svg, which are inside the html to an normal image (png)
Please take one of the svg, which is inside the html, then convert it to img.

I hust want the right code which convert the svg to normal images.

@Abdul_Sawas

Thanks for getting back to us.

We are sorry if we could not get your actual requirements. Would you please confirm if we are getting them right now? As per our assumptions, you want to convert the SVG images (used in the HTML file) into PNG images (keeping them inside the HTML and replacing with SVG images). In other words, the <svg> tags should be replaced with <img> tags and used images should be PNGs. Please let us know if we assumed correctly so that we can proceed further to assist you accordingly.

Hello Asad,

thanks a lot, that was my goal. I am waiting for your response.

Could you please send me the right code ?

I will rexplain my problem : as I converted the existing svg in the html to normal with your product, I did not get the orginal size which the svg has.

@Abdul_Sawas

Please check following code snippet which can be used to generate images with custom size:

var ioption = new Aspose.Html.Saving.ImageSaveOptions(Aspose.Html.Rendering.Image.ImageFormat.Png)
{
 PageSetup =
 {
  AnyPage = new Aspose.Html.Drawing.Page()
  {
   Size = new Aspose.Html.Drawing.Size(Aspose.Html.Drawing.Length.FromPixels(3000), Aspose.Html.Drawing.Length.FromPixels(1000))
  }
 },
 BackgroundColor = System.Drawing.Color.Green,
};
Aspose.Html.Converters.Converter.ConvertHTML("document.svg", ioption, "output.png");

Please let us know in case you still face any issue by sharing your sample SVG file with us.

Hello Asad,

but how can I tell all the size of the svg. I have thousand and thousand of them.

please let me know how can this code discover the orginal size of the svg.

Hello Asan,

unfortunatelly, that code has not worked:

  var code = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"370\" height=\"72\" style=\"position:absolute\" ><defs /><g transform=\"scale(1.33333)\"><g transform=\"matrix(1,0,0,1,-154.850006103516,-161.492169189453)\"><path d=\" M155.850006103516,213.785076904297 L431.299987792969,213.785076904297 L431.299987792969,162.492169189453 L155.850006103516,162.492169189453 L155.850006103516,213.785076904297 Z\" stroke-width=\"2\" stroke=\"#BF0000\" stroke-opacity=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" fill=\"none\" /></g></g></svg></div>";
            System.IO.File.WriteAllText("document.svg", code);
            var ioption = new Aspose.Html.Saving.ImageSaveOptions(Aspose.Html.Rendering.Image.ImageFormat.Png)
            {
                PageSetup =
                {
                  AnyPage = new Aspose.Html.Drawing.Page()
                  {
                   Size = new Aspose.Html.Drawing.Size(Aspose.Html.Drawing.Length.FromPixels(370), Aspose.Html.Drawing.Length.FromPixels(72))
                  }
                },
                BackgroundColor = System.Drawing.Color.Green,
            };
            Aspose.Html.Converters.Converter.ConvertHTML("document.svg", ioption, "output.png");