SVG images are not properly rendered or not rendered at all

[DEV7163]

• [Y] You are using the latest version
• [Y] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

The svg based images are not properly rendered or not rendered at all in the generated image

HTML

Generated image

$('body').on('click', '.lnk-download', function (event) {
	var el = document.getElementById('creator-preview');
	html2canvas(el).then(canvas => {
		canvas.toBlob(function(blob) {
      			window.saveAs(blob, 'my_image.jpg');
    		});
    	});
});		

I thought it may be due I'm dynamically generating those svg, but static one have the same problem.

Console shows no errors or warnings.

Specifications:

• html2canvas version tested with: 1.4.1

• Browser & version: FF 99.01 - svg not appearing Chrome 100.0.4896.127 () - appears a small part of the svg and without any style Opera 85.0.431 - same as chrome

• Operating system: Windows 10 Pro 21H2 64b

[ortonomy]

Also just experienced this. The request is cancelled in the network request list

[artidataio]

For an inline svg node, it throws Error: Unable to find element in cloned iframe. See repro here: https://codesandbox.io/s/amazing-tamas-01rrrk?file=/src/App.js.

[twojnarowski]

This is what it produces for my website with SVG: