Html2canvas: SVG not rendering on Chromes latest version 72

[svsgdev]

The SVG elements looks fine in chrome 71 but does not get rendered when updated to version 72.

Specifications:

• html2canvas version tested with:^v1.0.0-alpha.12
• Browser & version: chrome 72
• Operating system: windows 7

[HosseinAgha]

Same issue here. It is definitely a chrome issue as I can see it in purejs code.

[petezhang]

Same issue

[HosseinAgha]

OK my issue seems to be that we use hex colors in our SVGs and it should be URL encoded.
The vendors suddenly found this security bug and broke everything.
take a look: https://stackoverflow.com/questions/30733607/svg-data-image-not-working-on-firefox-or-chrome-72

[wowpages]

This Chrome update broke a function we were using for years using html2canvas 0.5.0-beta3 in conjunction with html2canvas.svg.js. One page with SVG charts rendered fine, but another one suddenly did not at all with the Chrome change. Switching to html2canvas 1.0.0-alpha.12 fixed the SVG problem, so both are working now.

However, the new version introduced a new problem - elements we cloned in an iframe from the parent frame and appended to the iframe DOM were not getting rendered most of the time, though they were rendered a small percentage of the time. Elements cloned and appended from within the frame render fine. Version 0.5.0 never had that problem and rendered the cloned parent elements perfectly. My workaround is to duplicate/hard code the parent elements in the frame, which does work.

[bjaskj]

I set the options with foreignObjectRendering: true, this renders SVGs properly when used with IMG tag.

Test on Ubuntu 18.10:
Chrome: Version 72.0.3626.119 (Official Build) (64-bit)
Firefox: 65.0 and 67.0a1 (2019-02-11).

[lake2]

This Chrome update broke a function we were using for years using html2canvas 0.5.0-beta3 in conjunction with html2canvas.svg.js. One page with SVG charts rendered fine, but another one suddenly did not at all with the Chrome change. Switching to html2canvas 1.0.0-alpha.12 fixed the SVG problem, so both are working now.

However, the new version introduced a new problem - elements we cloned in an iframe from the parent frame and appended to the iframe DOM were not getting rendered most of the time, though they were rendered a small percentage of the time. Elements cloned and appended from within the frame render fine. Version 0.5.0 never had that problem and rendered the cloned parent elements perfectly. My workaround is to duplicate/hard code the parent elements in the frame, which does work.

I Switched to html2canvas 1.0.0-alpha.12 but didn't fix the problem.
chrome 70

[nikkwong]

Does not seem to work for me in firefox either.

[trellis-ryan]

Chrome has an issue with rendering out svgs.

Make sure your svg image does not have this
xlink:href="data:image/png;base64,

if so change it to this
xlink:href="data:image/png;base64,