SVG <img> is massive

[I3rendan]

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

[I3rendan]

I attached a Fiddle, which I hope makes this clear: http://jsfiddle.net/1b4mLnfj/2/

[niklasvh]

Thanks, i'll look into it

[I3rendan]

I've been poking around this for a while and it seems like the container bounds are being calculated correctly but the vector image itself is adopting the dimensions of the viewport. It seems like the bounds and curvedBounds are all right, so I'm not sure where to make changes... Anyone run into an issue like this before?

[I3rendan]

After more investigation, it looks like this is only happening with svg images that are "responsive" -- if you open the svg in Illustrator and save without the responsive option checked, it will size correctly... essentially if the svg doesn't have a height and width encoded in it (what Illustrator called "responsive") then it will adopt the dimensions of the viewport.

[I3rendan]

So one potential solution is to replace the <img> with a true <svg> using a library like svg-inject (https://github.com/iconfu/svg-inject) -- here, if you apply a height and width to the <img>, it will be adopted by the <svg> when injected and that will prevent the resizing on the canvas.

There are a few drawbacks to this (like when using encoded, base64 src's, or if you have multiple svg's with the same structure and inline class styling) but maybe this will help someone else struggling with the issue. I've been working on this steadily for a few days now and this is the best solution I have so far. I can't find anything the the actual html2canvas code that will prevent the resize of a svg image on the canvas if the svg doesn't have encoded height / width values.

[I3rendan]

So I'm throwing-in the towel on this one but I landed on the solution being related to how the svg is rendered / drawn on the canvas. Specifically, in renderNodeContent if we can figure out how to determine if an image is an svg and also one that's missing the encoded height / width (responsive), then we could draw that svg with dimensions that match the viewport (width = viewport.width, height = (image.height * viewport.width) / image.width)) then theoretically this could work. I'm just not sure how to determine if the svg image is missing those height and width values.

[HairyRabbit]

any update here?

[I3rendan]

Not from me, I've stopped working on the issue but hopefully the comments above could be helpful.

[donoli1st]

Hi i had the same issue.
My Image Tag contained a style='transition: transform 0.6s;' style. Without this, the Image rendered correctly.

[kasperkamperman]

Thanks for this issue. I could solve it by loading the SVG inline ().

[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!