Print large SVG chart on separate pages - printing

Question

I am trying to print a large SVG chart from a browser, the SVG chart is embedded into the HTML. The width / height of the chart is set to absolute. The print only prints a part of the SVG chart, however much will fit on 1 page, and cuts the rest off. Is there a way to split up the chart to print into separate pages?

Answer 1

This totally depends on what browser you are using to view the SVG. Either try a different browser... Safari has GREAT printing capabilities (on the Mac at least).. or... "isolate" the SVG.. Either look at the source and figure out the relative URL to the embedded SVG and enter it into the URL bar..
<td><object id="object" type="image/svg+xml" data="**smiley.svg**">Please use a modern browser!</object></td>
<td><iframe id="iframe" src="**smiley.svg**">Please use a modern browser!</iframe></td>
<td><embed id="embed" src="**smiley.svg**" type="image/svg+xml" /></td>
<td><img id="img" alt="smiley face" src="**smiley.svg**" /></td>
or Copy and paste the actual SVG code from the inline source and paste it into a plain text document with the .svg extension...
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
<linearGradient id="gradient">
<stop class="begin" offset="0%"/>
<stop class="end" offset="100%"/>
</linearGradient>
<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>
Then you can use a multitude of applications, from Illustrator, to the free Inkscape, or MANY, many others to manipulate (or print) it to your hearts content.

Answer 2

Use phantomjs.org project to generate your chart images at server.
It allows to load any HTML page by URL into headless WebKit machine and render it into PNG.
Plus, you can get final size of your page and then cut it into peaces via defining Clip Region in cycle.
For example next sample exports several charts from the page into separate PNG images in file system. After that you can assemble your new web page or pack them into PDF and provide download link to your user. This would be the most reliable and stable printing solution for web application.
var page = require('webpage').create();
page.viewportSize = { width: 1280, height : 1024 };
page.open('http://chart.html', function () {
page.clipRect = page.evaluate(function () {
var chart = jQuery("#chart1");
return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };
});
page.render('chart1.png');
page.clipRect = page.evaluate(function () {
var chart = jQuery("#chart2");
return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };
});
page.render('chart2.png');
page.clipRect = page.evaluate(function () {
var chart = jQuery("#chart3");
return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };
});
page.render('chart3.png');
phantom.exit();
});