Hi,
I have SVG chart. i have selected all the areas. i clicked print preview to pdf. i am not able to view complete svg chart. am able to view only half portion of the chart. there is no scorll bars in pdf. its showing only one page in pdf. remaining half portion of the chart is not showing in the second pdf page. paper size letter. i tried other paper size format. its not showing full chart. Screen shot is attached for reference. chart1 screen shot shows selected portion of chart. Chart2 screen shots shows the pdf preview. Am using 12.5 prince version. Awaiting for your reply.

Thanks,
Dineshkumar

1. chart1.jpg‎ 170.4 kB ‎
   SVG Chart selection
2. chart2.jpg‎ 275.0 kB ‎
   PDF Preview

Edited 5 Sep 2019 by dineshkumar

Can you attach or email me (mikeday@yeslogic.com) the SVG?

Hi Mike,

I have attached the SVG file in attached text file format. Could you please do the needful.

1. Sample.txt‎ 789.1 kB ‎
   SVG file

Edited 6 Sep 2019 by dineshkumar

There are some issues with this SVG: it is not well-formed XML (some attributes are missing quotes) and there are clip-paths that are not defined. But the biggest issue is probably the lack of a viewBox attribute, which you can fix by adding this to the root element:

viewBox="0 0 2300 5400"

This will make it easier to scale correctly.

Hi,
Could you tell me which attributes are missing quotes and clipaths. so i will update. i have added the mentioned viewBox="0 0 2300 5400". it does not works. but i adjusted as viewBox="0 0 3900 5400". it works. but am selected only little portion and print preview the svg. it shows like small image, shows lot of spaces at right side, bottom and has the scroll bar. we need it 100% width and 100% height. if it large portion then it showing as small size in pdf. viewbox width and height should be adjusted dynamically based on selected portion. Attached chart4 for reference.

Is it possible to adjust dynamically the viewBox coordinates? Please share some sample.

1. chart4.jpg‎ 183.3 kB ‎
   PDF Preview

Edited 10 Sep 2019 by dineshkumar

Hi Mike,

Any update on this

You can use the W3C's markup validation service to check your SVG:

https://validator.w3.org/

It will list all the validation errors in your document.

i adjusted as viewBox="0 0 3900 5400". it works. but am selected only little portion of svg and i checked in print preview. it shows like small image, shows lot of spaces at right side, bottom and has the scroll bar. we need it 100% width and 100% height. if it large portion then it showing as small size in pdf that's fine. viewbox width and height should be adjusted dynamically based on selected portion. Attached chart4 for reference(Small portion pdf preview).

is there any viewbox calculation to show as dynamically.

1. chart4.jpg‎ 183.3 kB ‎
   PDF Preview_Small portion

Hi Mike,

Any update on this.

It helps if you add a border around the image, to check the aspect ratio.

Hi Mike

Do i need to add border for root element.

Try adding a border on the @page, the root element, and the svg element (if the svg element is not the root element).j

Hi Mike,

I tried using border in svg element style="border: solid blue thin;" or style="border: 1px solid blue thin;". not able to get the aspect ratio. in pdf preview am getting border. we donot want the border line in pdf. Could please help me on this to get view box coordinates

Hi Mike

Any update on this

What tool are you using to generate the SVG?

Hi Mike,

I am not using any tool. in .net mvc, just creating as svg template using xml format. code that i already attached as SVG file.

In that case can you determine in your .Net code the suitable viewBox for the SVG? For example a suitable bounding box that holds all of its content?

Hi Mike,

I have added the viewBox(0 0 1300 2200) for the SVG as mentioned in previous comments.without selecting any area of the image, am getting full image in pdf preview in single page. am selecting quarter portion of image. it works in pdf preview. if am selecting more than quarter portion. its not showing selected portion of image in pdf preview. attached screen shot reference for reference.

1. chart7.jpg‎ 125.5 kB ‎
   SVG Chart selection
2. chart8.jpg‎ 128.2 kB ‎
   SVG Chart selection
3. pdfpreview1.jpg‎ 167.5 kB ‎
   PDF Preview
4. pdfpreview2.jpg‎ 204.2 kB ‎
   PDF Preview

Hi Mike

Any update on this

What exactly do you mean by PDF preview in single page? How are you converting the SVG to PDF, and what CSS are you applying to it, for example @page size and margins?

Hi Mike,

i am created the svg file as xml string (already i have attached as sample.txt) and Converting as byte array using prince.ConvertMemoryStream. am using @page { size: US-Letter portrait; margin: 7mm; } and then rendering as pdf. PDF preview in single page means that I have svg chart and its not showing full chart in pdf while croping (width as 100% and Height as 100%). its showing half of the chart. if i set viewBox values. it is shows in PDF in single page with very small size. it should cover the full page in pdf.

US Letter paper size is 8.5" x 11", so with a 7mm margin that is 201.9mm x 265.4mm of usable space, for an aspect ratio of 1 : 1.31.

However, your SVG viewBox is 1300x2200, for an aspect ratio of 1 : 1.69, which is significantly taller.

It is impossible for the SVG to cover the full page unless it has the same aspect ratio as the paper.