Convert all the content of a DIV into a SVG thumbnail

Question

I have a webapp where I have various slides in different divs. In the left screen I have a list of all those slides as mini-thumbnails.

Is there a way to convert every slide div into SVG thumbnails?

score 1 · Answer 1 · edited May 23 '17 at 11:45

1

You can use html2canvas to achieve what you want.

For a similar question, please refer to: Can html2canvas render svg in a page?

edited May 23 '17 at 11:45

Community

answered Mar 22 '14 at 19:10

9997

I'm using html2canvas, but it doesn't work well with CSS-Transform properties such as rotate(), scale(), translate3D() (I'm using Impress.js). That's why I'm asking for another library to create thumbnails but not html2canvas – Eduardo Mar 22 '14 at 19:22
1

@edwardoyarzun I actually haven't found any other libraries besides html2canvas. :/ – 9997 Mar 22 '14 at 19:53
1

OK, I think my solution will be, clone the DIV node using cloneNode() and the append it to the thumbnail container div, and then scale it with CSS Transform. – Eduardo Mar 22 '14 at 20:25
I had a similar solution as @Eduardo: render the DIV in iframe and transform the iframe. – mc9 Mar 23 '16 at 00:47

score 0 · Answer 2 · answered Mar 23 '14 at 01:46

0

If these slides are described by svg element, you can use "use" element like this.

<!--main slide-->
<div>
    <svg id="slide_1"></svg>
</div>
...
<!--thumbnail-->
<div>
    <svg><use xlink:href="#slide_1"/></svg>
    ...
</div>

answered Mar 23 '14 at 01:46

defghi1977

2 Answers2