Html2canvas: Renders SVG images with their natural size and text ignoring writing mode

[amitguptagwl]

Please follow the general troubleshooting steps first:

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

Bug reports:

1. I renders SVG images with their natural full size, not with scaled size
2. I renders text incorrectly with writing-mode: tb-rl;

Steps to reproduce

Go to the URL match-it > Go to the design section > click on "Simple Version" > browse some images including SVG images which has path information (minimum 7) > Click on "Generate" > Open console > call h2c() > Check the section just below the "Review" section.

Specifications:

• html2canvas version tested with: v1.0.0-alpha.12
• Browser & version: Chrome Version 66.0.3359.139
• Operating system: Ubuntu 17.10

Logs from the console

I don't see any issue in the logs. However they are given for reference;

0ms html2canvas: html2canvas 1.0.0-alpha.11
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 292ms html2canvas: Document cloned, using computed rendering
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 292ms html2canvas: Starting node parsing
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 301ms html2canvas: Added image data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUF
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 305ms html2canvas: Added image http://127.0.0.1:8080/static/css/3rdparty/images/ui-icons_444444_256x240.png
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 307ms html2canvas: Added image data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOT
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 310ms html2canvas: Added image data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIi
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 312ms html2canvas: Finished parsing node tree
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 324ms html2canvas: Finished loading 4 images (4) [img, img, img, img]
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 325ms html2canvas: Starting renderer
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 327ms html2canvas: Canvas renderer initialized (222x343 at 8,3075.671875) with scale 1
c4111db8-3913-11e8-9778-832cb4277cef?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180518%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180518T140359Z&X-Amz-Expires=300&X-Amz-Signature=7b0a029e271a663ff5f2ecdfea2858055da28c9070ccb07aa987c861de8a6d81&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B filename%3Dhtml2canvas.js&response-content-type=application%2Foctet-stream:2674 333ms html2canvas: Render completed

[amitguptagwl]

Any plan to fix that? at least svg part?