Html2canvas: Embedding svg image not drawed

Created on 28 Jul 2016 · 5Comments · Source: niklasvh/html2canvas

I have a simple page with SVG icons. When I generate the canvas element with html2canvas, the image tag is not drawed.

I tried with firefox & chrome, and changed the image size.

HTML

/* html */
<div>
  <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICB4PSIwcHgiCiAgIHk9IjBweCIKICAgdmlld0JveD0iMCAwIDIwMCAyMDAiCiAgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwMCAyMDAiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIGlkPSJzdmcyIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjUgcjEwMDQwIgogICB3aWR0aD0iMTAwJSIKICAgaGVpZ2h0PSIxMDAlIgogICBzb2RpcG9kaTpkb2NuYW1lPSIzMjctY3VsdHVyYS5zdmciPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTE2Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzMTQiIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSI2NDAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNDgwIgogICAgIGlkPSJuYW1lZHZpZXcxMiIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iMS4xOCIKICAgICBpbmtzY2FwZTpjeD0iMTAwIgogICAgIGlua3NjYXBlOmN5PSIxMDAiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjI3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMiIgLz48ZwogICAgIGlkPSJMYXllcl81Ij48ZwogICAgICAgaWQ9Imc1Ij48cGF0aAogICAgICAgICBmaWxsPSIjRkZGRkZGIgogICAgICAgICBkPSJNMTM2LjUsNzYuOEwxMDIuNyw3MWwtMS42LDE4LjJsLTIuOC0zMS44bC0zMy44LDUuOGwtMzQuMywwLjFsNC4zLDQ5LjFjMS42LDE4LjgsMTguMiwzMi43LDM3LDMxLjEgICAgYzExLjctMSwyMS41LTcuOCwyNi45LTE3LjRjMS40LDE2LjIsMTQuMywyOS42LDMxLjEsMzFjMTguOCwxLjYsMzUuNC0xMi4zLDM3LTMxLjFsNC4zLTQ5LjFMMTM2LjUsNzYuOHogTTQwLjEsOTMuNyAgICBjLTAuMy0zLjQsMy4yLTcuNiwxMC04LjJjNi44LTAuNiwxMSwyLjksMTEuMyw2LjNjMCwwLTQuOC0wLjItMTAuNywwLjNDNDQuOCw5Mi43LDQwLjEsOTMuNyw0MC4xLDkzLjd6IE03MC4yLDEyOC4zICAgIGMtMTAuNywwLjktMTcuMy02LjItMTcuOS0xMy40YzAsMCw3LjMtMi4yLDE2LjUtM2M5LjItMC44LDE2LjgsMC4xLDE2LjgsMC4xQzg2LjIsMTE5LjIsODAuOSwxMjcuNCw3MC4yLDEyOC4zeiBNODMuMSw4OS40ICAgIGMtNS45LDAuNS0xMC42LDEuNS0xMC42LDEuNWMtMC4zLTMuNCwzLjItNy42LDEwLTguMmM2LjgtMC42LDExLDIuOSwxMS4zLDYuM0M5My45LDg5LDg5LDg4LjgsODMuMSw4OS40eiBNMTA3LjYsOTcuNiAgICBjMCwwLDQuNywxLDEwLjYsMS41YzUuOSwwLjUsMTAuNywwLjMsMTAuNywwLjNjLTAuMywzLjQtNC41LDYuOS0xMS4zLDYuM0MxMTAuOCwxMDUuMiwxMDcuMywxMDEsMTA3LjYsOTcuNnogTTE0Ny45LDEzOC4zICAgIGMwLDAtNy42LDAuOS0xNi44LDAuMWMtOS4yLTAuOC0xNi41LTMtMTYuNS0zYzAuNi03LjIsNy4zLTE0LjMsMTcuOS0xMy40QzE0My4yLDEyMywxNDguNSwxMzEuMSwxNDcuOSwxMzguM3ogTTE1MC4xLDEwOC42ICAgIGMtNi44LTAuNi0xMC4zLTQuOC0xMC04LjJjMCwwLDQuNywxLDEwLjYsMS41YzUuOSwwLjUsMTAuNywwLjMsMTAuNywwLjNDMTYxLjEsMTA1LjcsMTU2LjksMTA5LjIsMTUwLjEsMTA4LjZ6IgogICAgICAgICBpZD0icGF0aDciIC8+PC9nPjwvZz48ZwogICAgIGlkPSJMYXllcl8xNCI+PHBvbHlnb24KICAgICAgIG9wYWNpdHk9IjAuMSIKICAgICAgIHBvaW50cz0iMTk5LjQsMjAwIDAsMjAwIDAsMTQ2LjcgMjAwLjIsNTAuNiAgIgogICAgICAgaWQ9InBvbHlnb24xMCIgLz48L2c+PC9zdmc+">
</div>

CSS:

/* CSS */
div{
  width: 90px; height: 90px;
  background-color: blue;
}

div img
{
  width: 100%; height: auto;
}

Javascript:

jQuery(function($){
    var e = $('div')[0];
  html2canvas(e, { logging: true }).then(function(canvas){
    $('#result').attr('src', canvas.toDataURL() );
  });
});

SVG image:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g id="Layer_5">
        <g>
                <path fill="#FFFFFF" d="M136.5,76.8L102.7,71l-1.6,18.2l-2.8-31.8l-33.8,5.8l-34.3,0.1l4.3,49.1c1.6,18.8,18.2,32.7,37,31.1    c11.7-1,21.5-7.8,26.9-17.4c1.4,16.2,14.3,29.6,31.1,31c18.8,1.6,35.4-12.3,37-31.1l4.3-49.1L136.5,76.8z M40.1,93.7    c-0.3-3.4,3.2-7.6,10-8.2c6.8-0.6,11,2.9,11.3,6.3c0,0-4.8-0.2-10.7,0.3C44.8,92.7,40.1,93.7,40.1,93.7z M70.2,128.3    c-10.7,0.9-17.3-6.2-17.9-13.4c0,0,7.3-2.2,16.5-3c9.2-0.8,16.8,0.1,16.8,0.1C86.2,119.2,80.9,127.4,70.2,128.3z M83.1,89.4    c-5.9,0.5-10.6,1.5-10.6,1.5c-0.3-3.4,3.2-7.6,10-8.2c6.8-0.6,11,2.9,11.3,6.3C93.9,89,89,88.8,83.1,89.4z M107.6,97.6    c0,0,4.7,1,10.6,1.5c5.9,0.5,10.7,0.3,10.7,0.3c-0.3,3.4-4.5,6.9-11.3,6.3C110.8,105.2,107.3,101,107.6,97.6z M147.9,138.3    c0,0-7.6,0.9-16.8,0.1c-9.2-0.8-16.5-3-16.5-3c0.6-7.2,7.3-14.3,17.9-13.4C143.2,123,148.5,131.1,147.9,138.3z M150.1,108.6    c-6.8-0.6-10.3-4.8-10-8.2c0,0,4.7,1,10.6,1.5c5.9,0.5,10.7,0.3,10.7,0.3C161.1,105.7,156.9,109.2,150.1,108.6z"/>
        </g>
</g>
<g id="Layer_14">
        <polygon opacity="0.1" points="199.4,200 0,200 0,146.7 200.2,50.6  "/>
</g>
</svg>

Result:

result

Here is an example https://jsfiddle.net/5w4k5gmy/

I will appreciate your help.

Source

silvioq

Most helpful comment

I get the same behaviour

Githamza on 13 May 2019

👍3

All 5 comments

silvioq if you put a debugger; after getting the response and in chrome console type document.body.append(canvas). It adds the image but the image is not added properly.

updated fiddle link: https://jsfiddle.net/5w4k5gmy/1/

gipsydangerv2 on 4 Aug 2017

Ok. I reported this odd behavior the last year. The canvas seems broken.

silvioq on 4 Aug 2017

Fixed in 1.0.0

niklasvh on 12 Dec 2017

@niklasvh

Hi niklasvh,

I synced the latest version (1.0.0-alpha.12) of html2canvas. But unfortunately, my svg image cannot get rendered in the html canvas, in Chrome browser. In Safari, it works well. What do you think of this issue?

Thank you so much,
Kiki

---The below is the image source---