Html2canvas: Cannot draw SVG on the html canvas

Pretty sure SVG is not supported, I had to use https://github.com/canvg/canvg to first convert all SVG to canvas and then print it out.

You can also take a look at this example. http://rahulgaba.com/front-end/2016/07/14/generating-pdf-using-jspdf-and-html2canvas.html

Hmmm, I'm using html2canvas together with svg's. I don't have any problems with it.

@LanderBeeuwsaert

Could you copy me your SVG file? As my issue described, it works in Safari browser, but doesn't work in Chrome. Thank you.

@LanderBeeuwsaert
Could you please put it on jsfiddle woking example with the combination of html2canvas and svg

@mockey-jockey ,

Hey, not too familiar with jsfiddle, so if you prepare the dependencies for me in jsfiddle and then send me the link so I can complete (only have to replace the svg with my svg) I'd be happy to.

I can not capture this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">...</svg>

But I can capture this svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">...</svg>

I just add width and height.

Experiencing similar issues here. Inline SVGs not rendered into canvas.

In Safari it seems to work fine, but only if all properties are included inline within the SVG. So if you're adding your dimensions, fill, stroke, etc. through CSS stylesheet, they won't show up and it won't work.

In Chrome and in Firefox, I cannot get it to render inline SVGs at all. Strange.

Update: when enabling ForeignObjectRendering as an option, Chrome now renders the SVG but they're in the wrong place, and for some reason this also had the affect of forcing text into a different font. In Firefox, enabling this throws this error:

My svg is rendering, but get a bit offset (about 150 px)