Issue with SVG to PDF if transform(x,y) does only have one coordinate

Aspose.PDF Product Family
1

Hi there

I’m evaluation Aspose.PDF as our future pdf engine and I’m quite happy with it.

While working with a temporary licence and embedding a d3.js svg chart in an pdf in figured out, that there’s a small issue with the interpretation of transform(x,y) if only the x is set and y is 0. It appears to me, that it’s only a IE issue while it works smoothly in Chrome. IE seems to abbreviate a <g transform="translate(38 0)"> to <g transform="translate(38)"> which subsequently is interpreted by aspose.pdf as <g transform="translate(38 38)">

cDataIE.zip (3.0 KB)

2

@sporty21

Thanks for choosing and evaluating our API.

Would you kindly share sample code snippet, which you have used to add SVG inside PDF. This would help us testing the scenario accordingly and address it.

3 
FileStream lineChart = new FileStream(pathToSvg, FileMode.Open);
page.Resources.Images.Add(lineChart);
page.Contents.Add(new GSave());  

Rectangle rectLineChart = new Rectangle(40, 500, 290, 685);
Matrix matrixLineChart = new Matrix(new double[] { rectLineChart.URX - rectLineChart.LLX, 0, 0, rectLineChart.URY - rectLineChart.LLY, rectLineChart.LLX, rectLineChart.LLY });
page.Contents.Add(new ConcatenateMatrix(matrixLineChart));
XImage xImageLineChart = page.Resources.Images[page.Resources.Images.Count];

page.Contents.Add(new Do(xImageLineChart.Name));
page.Contents.Add(new GRestore());

document.Save(fFolder + fName);
4

Another question: It appears to me, that the SVG added is added as an image rather that it’s drawn on the page. Did i make anything wrong?

5

@sporty21

Thanks for sharing sample code snippet.

There are some undefined objects and variable in the code due to which we were unable to execute it. i.e.

y1 = y0 - (chartH + yLineWidthB + yLineSpaceB);
Rectangle rectLineChart = new Rectangle(mL, y1, x1End, y0);

Would you please share a code snippet with all necessary values.

You are adding SVG image inside Image collection of a PDF, which is why it is rendered as image. You may use following code snippet to directly generate PDF from SVG. For your reference, an output PDF is also attached.

var loadopt = new SvgLoadOptions();
Aspose.Pdf.Document Doc = new Aspose.Pdf.Document(System.IO.File.Open(dataDir + "cDataIE.svg", FileMode.Open), loadopt);
Doc.Save(dataDir + "SvgToPDF.pdf");

SvgToPDF.pdf (42.3 KB)

6

I added the missing variables in the code snippet above.

Wow, that’s perfect. Could you please provide me with a small snippet, if I’d add the SVG from a string and not a file into an existing document with a particular size (e.g. 250 x 180 at coordinate 100, 400)?

I’ll defineteley go for Aspose. And your support is awesome! Thank you very much!

7

@sporty21

Thanks for your feedback.

You may please use following code snippet in order to add SVG inside PDF document using image source:

string HTML = File.ReadAllText(dataDir + "SVGString.txt");
Document doc = new Document();
Page page = doc.Pages.Add();
HtmlFragment hf = new HtmlFragment(HTML);
page.PageInfo.Margin = new MarginInfo(0, 0, 0, 0);
page.Paragraphs.Add(hf);
doc.Save(dataDir + "SVGStringtoPDF.pdf");

SVGStringtoPDF.pdf (298.9 KB)

I regret to share that currently setting coordinates and image dimensions is unavailable using above approach in the API. However we have logged a feature request as PDFNET-45465 in our issue tracking system to investigate feasibility. We will surely look into details of the issue and keep you informed with the status of ticket resolution. Please spare us little time.

Would you please share your sample PDF as well. We will try to replicate the scenario which you have mentioned in your first post and address it accordingly. We greatly appreciate your cooperation in this regard.

8

@asad.ali

I’m trying to summarize it a bit and I added a zip-file containing 6 files

  • Expected output as I see the chart in the latest IE11 version
  • Input and output files used in code snippet using the SVGLoadOptions
  • Input and output files used in code snippet using the HTMLFragment approach
  • Desired output to generate with Aspose.PDF API

SVGLoadOptions

var loadopt = new SvgLoadOptions();
Document doc = new Document(File.Open(dataDir + "InputSvg.svg", FileMode.Open), loadopt);
doc.Save(dataDir + "OutputPdfSvgLoad.pdf");

This approach has the following issues

  • The x-axis and right-handed y-axis is not drawn as expected on the pdf. The reason for that is, that IE seems to abbreviate a <g transform="translate(38 0)"> to <g transform="translate(38)"> which subsequently is interpreted by aspose.pdf as <g transform="translate(38 38)">.
  • Additionally. the gridlines do not appear correctly in the pdf. It seems as the style information is not regarded

HTMLFragment

string HTML = File.ReadAllText(dataDir + “InputSvg.txt”);
Document doc = new Document();
Page page = doc.Pages.Add();
HtmlFragment hf = new HtmlFragment(HTML);
page.PageInfo.Margin = new MarginInfo(0, 0, 0, 0);
page.Paragraphs.Add(hf);
doc.Save(dataDir + “OutputPdfHtml.pdf”);

It seems to me, that the quality is not the same as with the SVGLoadOptions approach. The differents fonts in the legends’ section seem to come from IE11.

My goal
I really fancy the SVGLoadOptions approach as this produces a nice Chart on the pdf. What I finally want to achieve is adding several SVG charts like the one attached to a page(s) and produce a report containing charts, text, shapes and images like in the file DesiredOutput.pdf. Do you think it’ll be possible to place SVG charts on a page with the SVGLoadOptions approach?

Another small question: I receive the svg-string from the client via AJAX and I’d like to read this string in a stream and use it in the SvgLoadOptions approach. Can you kindly let me know, how I need to adapt the code snippets in order to achieve that?

AsposeSvg.zip (386.4 KB)

9

@sporty21

Thanks for sharing more details.

We have noticed all the details you have provided and logged them under the ticket ID PDFNET-45467 for further investigations about your requirements. We will surely let you know about updates, as soon as we make some significant progress in investigation. Please spare us little time.

Please use following code snippet in order to achieve above:

string HTML = File.ReadAllText(dataDir + "SVGString.txt");
byte[] bArray = Encoding.UTF8.GetBytes(HTML);
var ms = new MemoryStream(bArray);
var loadopt = new SvgLoadOptions();
Aspose.Pdf.Document Doc = new Aspose.Pdf.Document(ms, loadopt);
Doc.Save(dataDir + "SvgToPDF.pdf");

In case of any further assistance, please feel free to let us know.

10

@asad.ali

Thank you very much for all your help.:slight_smile: