Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Embedding svg image not drawed

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

6reactions

Githamzacommented, May 13, 2019

I get the same behaviour

1reaction

kikifangcommented, May 26, 2018

@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—