7

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.

SixDegrees
  • 781
  • 1
  • 8
  • 19

2 Answers2

12

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);
    };
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
Francis Hemsher
  • 3,478
  • 2
  • 13
  • 15
  • 2
    Had to change "mySVG" to "container" and "$(container).html()" to "container.innerHTML". Other than that it worked – GusOst Feb 28 '16 at 15:06
  • most valuable thing but it is not showing svg images that i made like squre rectangle only text are viewing can you help me complete SVG as pdf – nouman arshad Jul 12 '17 at 10:28
  • Is it possible to open a new window with just the svg (and not encapsulate it in an tag)? – BelgoCanadian Sep 13 '17 at 17:15
  • 1
    @BelgoCanadian - I have an example that uses window.matchMedia and onbeforeprint and onafterprint that places the SVG into a DIV. You could then just request DIV.innerHTML for only the SVG. Example at: www.svgDiscovery.com/C/svg-print-save-PDF.htm – Francis Hemsher Sep 14 '17 at 12:16
  • Hi @FrancisHemsher, your solution is kind of fantastic, you should probably post it as an answer here! thanks a million! – BelgoCanadian Sep 14 '17 at 18:36
  • @FrancisHemsher your link is broken now. Can you explain the answer here or post it? – King Oct 24 '20 at 10:21
10

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • OK. That's an excellent solution for printing the entire page. I should have mentioned that the SVG will reside on the page along with HTML, and it's only the SVG that I want to print, not anything else on the page. I suppose I could pop up another window with just the SVG and have the user invoke printing from there, but that's less than optimal. – SixDegrees Feb 09 '14 at 16:09
  • 2
    Hide what you don't want to print using the media query. – Robert Longson Feb 09 '14 at 20:10
  • You could post SVG back to the server and use something like an XSL FO engine that supports SVG to render it to PDF. Then the user can physically print that rendered PDF (or not). – Kevin Brown Feb 09 '14 at 20:56