Can html2canvas render svg in a page?

svg html2canvas
rakensi picture rakensi · Jan 4, 2013 · Viewed 13.7k times · Source

I am using html2canvas to create a 'screenshot' of a HTML page that contains SVG. Everything looks good, except the element. I know that it should be possible to render SVG in Canvas; PhantomJS, fabric.js and CanVG do it.

Is this something that html2canvas does not support? Or am I doing something wrong, and this should just work?

If this has not been implemented, what is the best way to extend html2canvas (using canvg)?

Answer

rakensi picture rakensi · Jan 5, 2013

Capturing SVG images works by transforming them into canvas, using canvg. Include both javascript files as indicated on that page. Then the easiest way to do this is:

<body onload="canvg()">

See the parameterless call example. When all SVG images have been converted, html2canvas works flawlessly.

Of course, all SVG images will be converted to canvases, but I did not see a difference.

Related questions

html and Svg to Canvas javascript

<div id="Contents"> <div style="float:left;margin-left:10px;"> <svg></svg> </div> <div style="float:left;margin-left:10px;"> <svg></svg> </div> </…

Read More
SVG not displayed when using html2canvas

I am working on a project where I need to generate a pdf file (onclick saveFile as PDF) on the client side as some data are not to be sent to the server. I have read about these options available; …

Read More
Using html2canvas to render a highcharts chart to pdf doesn't work on IE and Firefox

We are using html2canvas.js and html2canvas.svg.js (version 0.5.0 beta1) and highcharts.js to download a donut chart into pdf. This works as expected in Chrome, however in IE and Firefox this isnt working. In IE the …

Read More