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 - n

Answer 1

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);
    };

Answer 2

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.