SVG <img> is massive

Please make sure you are testing with the latest release of html2canvas. Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

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

Bug reports:

If I use <img src="... .svg"> the svg is super blown up. This appears to only happen with “responsive” svg images (images where no height or width has been set in the actual image encoding). The image and contentBox are rendered with the correct size but the when drawn on the canvas, the image adopts the viewport height.

Here’s the Fiddle: http://jsfiddle.net/1b4mLnfj/2/

Specifications:

• html2canvas version tested with: 1.0.0-rc.1 / 1.0.0-rc.0
• Browser & version: Chrome 73 / Opera 58
• Operating system: OS X

[niklasvh]

Thanks, i’ll look into it

[wladston]

I was able to solve this by setting the width and height attributes in the svg. So in the .svg file source, I changed this:

<svg viewBox="0 0 262 28" fill="none" 

to this

<svg width="262" height="28" viewBox="0 0 262 28" fill="none" 

and it worked!