Print Only SVG from Browser

javascript, svg

Solution

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.

Problem

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.

Original source