SVG not displayed when using html2canvas

Question

I am working on a project where I need to generate a pdf file (onclick saveFile as PDF) on the client side as some data are not to be sent to the server. I have read about these options available; fileSaver.js and html2canvas, and none seem to help. I also want to point out that I am not so good with javascript. Here is my js code

<script type="text/javascript">
    $(document).ready(function() {
        $("#saveOutput").click(function() {
            $("#Screenshot").html2canvas({ 
                onrendered: function(canvas) {
                    var png = canvas.toDataURL()
                    window.open(png);
                }
            });
        });
    });
</script>

and my Html

<div id="Screenshot">
    <p>This is it</p>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" style="height: 250px; width: 250px;">       
          <circle id="1" cx="100" cy="100" r="25" fill="#A52A2A"></circle>
    </svg>
</div>
<div id="content">
    <a class="button" id="saveOutput" href="#">Save as File</a>
</div>

Why cant it shows the SVG file? How can these files be converted to Canvas?could someone shows me with code sample? Any help will be appreciated.

To plot the svg's you've to use "canvg.js", it converts all the svgs into — GeekExplorer, Nov 24 '15 at 10:55

score 35 · Accepted Answer · edited Sep 11 '20 at 13:45

35

Like already said in other answers: the latest html2canvas support svg elements.

But apparently CSS is not applied and has a bug when is set the css "width" style and svg "width" attribute.

Before the screenshot, I added a treatment to svg elements.

var svgElements = document.body.querySelectorAll('svg');
svgElements.forEach(function(item) {
    item.setAttribute("width", item.getBoundingClientRect().width);
    item.setAttribute("height", item.getBoundingClientRect().height);
    item.style.width = null;
    item.style.height= null;
});

Edit: added height based on comment

edited Sep 11 '20 at 13:45

Eonasdan

7,563
8
55
82

answered Dec 03 '19 at 17:41

Isabella Lopes

526
6
9

1

Thanks! This solved a problem I was having that other answers didn't solve. – William Whyte Jan 25 '20 at 14:42
1

I found that the attribute width and **height** were both required for svg element to be captured. – Clayton Bell Jul 12 '20 at 19:35
thank you @ClaytonBell. The height addition was key – Eonasdan Sep 11 '20 at 13:44
1

i have only one SVG element, I tried the above but still not working – Zeeshan Ahmad Khalil Jan 22 '21 at 06:43
love you! I had same issue after Image screenshot.spent around 2-3 hrs on it.Your solution worked 100% for mi. Thanks – Saurabh Gangamwar May 07 '21 at 15:06
It doesn't work for me either. – Crasher May 02 '22 at 01:46
Doesn't work for me even though height and width are set as attributes. Maybe this is also related to top, right, etc. styles? – foske Nov 14 '22 at 14:04

Raghavenda Rai K · Answer 2 · 2017-08-31T17:24:22.590

7

Solution 1 : You can use latest html2canvas which will support svg elements.
Solution 2 : Before calling html2canvas function you can convert all existing svg elements into canvas elements, which is supported by html2canvas. For this conversion you can use canvg.js.

edited Aug 31 '17 at 17:24

answered Aug 31 '17 at 10:03

Raghavenda Rai K

109
2
8

On StackOverflow we care about high quality questions and answers. Please read [How do I write a good answer](https://stackoverflow.com/help/how-to-answer) before you answer a question again. This will ensure that your answers live up to Stackoverflow's standards. – Noel Widmer Aug 31 '17 at 10:23
While this might be a valuable hint to solve the problem, a good answer also demonstrates the solution. Please [edit] to provide example code to show what you mean. Alternatively, consider writing this as a comment instead. – Toby Speight Aug 31 '17 at 12:24
3

I am using the latest version as of `v1.0.0-alpha.12`, however, I still can't render `SVG` tags, even very simple graphs. – AGamePlayer Jan 02 '19 at 10:54
2

Well, I do can render svg but I can only render `svg` tags when width specified. – AGamePlayer Jan 02 '19 at 11:15
1

@AGamePlayer Thank you! I resolve the problem adding "width" to the svg – Lucas Moyano Angelini Mar 28 '20 at 23:38

score 2 · Answer 3 · answered Jun 06 '21 at 09:14

Faced the same issue.

Moved all the CSS into a container element (div) and applied the CSS (in my case, position:absolute;) to the container element instead of the svg element.

As Isabella Lopes has pointed out correctly, height and width need to be applied as attributes and not styles.

score 0 · Answer 4 · answered Mar 16 '23 at 10:00

0

in my case I had a margin-top, which moved the svg outside of the visible area (worked perfect in html). Maybe helpful for someone... just replace margin by padding of the parent element.

answered Mar 16 '23 at 10:00

Mani Afschar Yazdi

23
1
6

score -1 · Answer 5 · answered Aug 28 '16 at 09:41

-1

try to download the latest version of html2canvas on the following link

https://github.com/niklasvh/html2canvas/releases

at the moment it's version 0.5.0-alpha1

i tried it and it works for me.

answered Aug 28 '16 at 09:41

jay

1,055
3
15
35

I tried 5.0 alpha 1 and v1.0.0-rc.3 and my SVGs are just blank. – Kyle Jul 25 '19 at 15:45
@Kyle I had the same problem with fontawesome icons and version 1.0.0-rc.3 and i added `style="width: 20px"` or whatever your width is for each svg and it worked. – Apostolos Aug 27 '19 at 08:20
@Apostolos to which element we had to apply that styling! SVG ? – Zeeshan Ahmad Khalil Jan 22 '21 at 06:38
i think yes. it's been a while :) but i think yes, at svg – Apostolos Jan 22 '21 at 07:05

SVG not displayed when using html2canvas

5 Answers5

Linked