Print Only SVG from Browser

Question

I'm working on a webpage that will dynamically render SVG graphics based on user interaction. Once complete, I would like the user to be able to print the graphics only - not simply print the webpage they reside on and the SVG along with it, but just the SVG. Also, the printed version will ideally be drawn slightly differently than the onscreen browser version. Is this sort of thing possible with current browsers and SVG?

In Java, I can provide either a paint engine or a print engine to my applications drawing routine, and this handles the same problem simply. I'm a novice to SVG, however, and I can't determine whether some similar mechanism exists.

Answer 1

You can call window.print to start the printing process from javascript.

You can make the printed and visible versions different using media queries E.g.

@media print { different css for print SVG }

If you don't want existing stuff on the page to print, use the media query to set it display:none or visibility:hidden.

Answer 2

You can use jQuery. Assume you have your svg in a DIV(svgDiv) in the web page, include a print button that calls the following, where the root svg has an id=mySVG, to get width/height, or use the svgDiv width/height. This will print the view that is currently in the svg window.

//---print button---
    var printSVG = function()
    {
        var popUpAndPrint = function()
        {
            var container = $('#svgDiv');
            var width = parseFloat(mySVG.getAttribute("width"))
            var height = parseFloat(mySVG.getAttribute("height"))
            var printWindow = window.open('', 'PrintMap',
            'width=' + width + ',height=' + height);
            printWindow.document.writeln($(container).html());
            printWindow.document.close();
            printWindow.print();
            printWindow.close();
        };
        setTimeout(popUpAndPrint, 500);
    };